JavaScriptにおけるcall()、appy()、bind()の使い方と違い

11044 ワード

JavaScriptにおけるcall()、appy()、bind()の使い方と違い
jsの開発では、call()apply()bind()thisの3つの関数がよく使われますが、この3つの関数は一体何ですか?
実は簡単です.この中の一番大きな違いはFunctionの指向性問題で、これらの3つの関数は関数内部thisisObj.nameを変化させるtomの指向性です.
まず、次の例を見ます.
	//    
	var myDog = 'tom'
	var isObj = {
		name: this.myDog,
		color: 'red',
		itSay: function () {
			console.log('my name is ' + this.myDog + ', color is ' + this.color)
		}
	}
	console.log(isObj.name) // tom
	console.log(isObj.itSay()) // my name is undefined, color is red
上記の印刷領域を見ることができます.itSay()undefinedですが、以下のthiswindowプリント出力myDogです.上記の印刷でisObj.name = window.myDogtomオブジェクトを指すので、thisは大域変数であり、isObjに相当するので出力myDogが、関数内ではundefinedというオブジェクトを指すので、call()属性は存在しない.
もう一つの例を見ます.
	// Function.prototype.call()
	var myDog = 'tom'
	var isObj = {
	    name: this.myDog,
	    color: 'red',
	    itSay: function () {
	        console.log('my name is ' + this.name + ', color is ' + this.color)
	    }
	}
	var testObj = {
		name:'jarry'
	}
	var testObjs = {
		name:'jarry',
		color:'gray'
	}
	isObj.itSay.call(testObj) // my name is jarry, color is undefined
	isObj.itSay.call(testObjs) // my name is jarry, color is gray
実はthisの方法はundefinedをパラメータの中のオブジェクトに指し、属性のないプリントはbind()を表示し、残りの2つの関数を見てみましょう.
	//    
	var myDog = 'tom'
	var isObj = {
	    name: this.myDog,
	    color: 'red',
	    itSay: function (age, ...args) {
	        console.log('my name is ' + this.name + ', color is ' + this.color + ' my age is ' + age+ 'years old, ' + args)
	    }
	}
	var testObjs = {
		name:'jarry',
		color:'gray'
	}
	isObj.itSay.call(testObjs,'8','ba','la','ba','la') // my name is jarry, color is gray my age is 8, ba,la,ba,la
	isObj.itSay.apply(testObjs,['8','ba','la','ba','la']) // my name is jarry, color is gray my age is 8, ba,la,ba,la
	isObj.itSay.bind(testObjs,'8','ba','la','ba','la')() // my name is jarry, color is gray my age is 8, ba,la,ba,la
これらの3つの関数は同じテキストをプリントし、cell()がバインディングされているのは関数の呼び出しであり、使用方法はapply()と同じで、thisの一番後ろのパラメータは1つのアレイパス値を受信し、彼らの最初のパラメータは全部isObj.itSay.call(db,' ', ... ,'string' )であり、省略することができる.
上記の結果からわかるように、call、bind、applyの3つの関数の最初のパラメータは、いずれもthisの指向性オブジェクトであり、2番目のパラメータの違いは来ています.callのパラメータは直接入れるもので、2番目の3番目のパラメータは全部カンマで区切られています.apply ()のすべてのパラメータは一つの配列の中に入れてisObj.itSay.apply(db,['', ..., 'string' ])に伝えなければなりません.bind()は、リターンが関数である以外に、そのパラメータはcall()と同じである.もちろん、3つのパラメータはstringタイプに限定されず、関数、objectなど様々なタイプが許可されています.