JavaScriptにおけるcall()、appy()、bind()の使い方と違い
11044 ワード
JavaScriptにおけるcall()、appy()、bind()の使い方と違い
jsの開発では、
実は簡単です.この中の一番大きな違いは
まず、次の例を見ます.
もう一つの例を見ます.
上記の結果からわかるように、call、bind、applyの3つの関数の最初のパラメータは、いずれもthisの指向性オブジェクトであり、2番目のパラメータの違いは来ています.callのパラメータは直接入れるもので、2番目の3番目のパラメータは全部カンマで区切られています.
jsの開発では、
call()
、apply()
、bind()
、this
の3つの関数がよく使われますが、この3つの関数は一体何ですか?実は簡単です.この中の一番大きな違いは
Function
の指向性問題で、これらの3つの関数は関数内部this
のisObj.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
ですが、以下のthis
はwindow
プリント出力myDog
です.上記の印刷でisObj.name = window.myDog
はtom
オブジェクトを指すので、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など様々なタイプが許可されています.