JSの中でcall、appy、bindはthisを変えて異同を指して分析します.

2340 ワード

call、appy、bindの同じ点は、thisの指向を変えて、着信するthisObjのコンテキスト環境を指します.
違い点
二つ目のパラメータに対しては、callパラメータをいちいち列挙しなければならないが、appryが入ってきたのはargmentオブジェクトまたは配列であり、bind①bindの戻り値は関数である.②後ろのパラメータの使用にも違いがあります.
1、call方法:文法:call([thisObj,[,arg 1[,arg 2]]])定義:オブジェクトを呼び出す一つの方法で、現在のオブジェクトを別のオブジェクトthisObjに置き換える.説明:コール方法は、他のオブジェクトの代わりに一つの方法を呼び出すために使用されてもよい.call方法は、関数のオブジェクトコンテキストを初期のコンテキストから、thisObjによって指定された新しいオブジェクトに変更することができる.thisObjパラメータが提供されていない場合、GlobalオブジェクトはthisObjとして使用される.
		function sum(num1,num2){
			return num1+num2;
		}		
		function callSum(num1,num2){
		// sum       callSum     ,   sum       
			return sum.call(this,num1,num2);
		}
		console.log(callSum(20,20));
2、appy:文法:appy(thisObj、配列パラメータ)定義:あるオブジェクトを適用する一つの方法で、現在のオブジェクト説明を別のオブジェクトthisObで置換します.パラメータが配列タイプでない場合、Type Errエラーを報告します.
		function sum(num1,num2){
			return num1+num2;
		}		
		function applySum1(num1,num2){
			return sum.apply(this,[num1,num2]);
		}
		function applySum2(num1,num2){
			return sum.apply(this,arguments);
		}
		console.log(applySum1(30,20));
		console.log(applySum2(10,20));
3、bind:EcmaScript 5でbindという方法を拡張しました.bindはコールに似ています.例えば、受け入れ可能なパラメータは二つの部分に分けられています.そして、最初のパラメータはすべて実行時関数コンテキストのthisの対象としています.手書きでカスタマイズしたbind関数は以下の通りです.
		Function.prototype.customeBind2 = function(thisObj,...list){
			let self = this;//    
			console.log(this);//this       fun,       				
			let Bound = function(...arg2){
				//              ,       this,          
				//             ,      this   thisArg
				let thisArgSelf = this instanceof Bound ? this : thisArg;
				self.apply(thisArgSelf,[...list,...arg2])
			}
			//     
			// Object.create                   
			Bound.prototype = Object.create(self.prototype);
			Bound.prototype.constructor = self;
			//       
			return Bound	
		}
		/**this       
		ƒ func(...arg){
			console.log(this);//this  {a:1}
			console.log(arg)
		}
		*/
		
		function fun(...arg){
			console.log(this);
			console.log(arg);				
		}
		/**       
		{b: 2}
		 (6) [99, 9, 33, 3, 4, 2]
			 -------------------
		 {b: 3}
		 (5) [99, 3, 22, 9, 3]
		*/
		
		//this  b,       fun1,        
		let fun1 = fun.bind({b:2},99,9,33);
		let fun2 = fun.customeBind2({b:3},99,3,22);
		fun1(3,4,2);
		console.log('-------------------')
		fun2(9,3);		
分析終了、参考資料「JavaScript高級プログラム設計」