apply、call、bind有什麼區別?
使用 apply
var a = { name : "Cherry", func1: function () { console.log(this.name) }, func2: function () { setTimeout(function () { this.func1() }.apply(a),100); } }; a.func2()// Cherry
使用 call
var a = { name : "Cherry", func1: function () { console.log(this.name) }, func2: function () { setTimeout(function () { this.func1() }.call(a),100); } }; a.func2()// Cherry
使用 bind
var a = { name : "Cherry", func1: function () { console.log(this.name) }, func2: function () { setTimeout(function () { this.func1() }.bind(a)(),100); } }; a.func2()// Cherry
apply、call、bind 區別
剛剛我們已經介紹了 apply、call、bind 都是可以改變 this 的指向的,但是這三個函式稍有不同。
在MDN 中定義 apply 如下;
apply() 方法呼叫一個函式, 其具有一個指定的this值,以及作為一個數組(或類似陣列的物件)提供的引數
語法:
fun.apply(thisArg, [argsArray])
- thisArg:在 fun 函式執行時指定的 this 值。需要注意的是,指定的 this 值並不一定是該函式執行時真正的 this 值,如果這個函式處於非嚴格模式下,則指定為 null 或 undefined 時會自動指向全域性物件(瀏覽器中就是window物件),同時值為原始值(數字,字串,布林值)的 this 會指向該原始值的自動包裝物件。
- argsArray:一個數組或者類陣列物件,其中的陣列元素將作為單獨的引數傳給 fun 函式。如果該引數的值為null 或 undefined,則表示不需要傳入任何引數。從ECMAScript 5 開始可以使用類陣列物件。瀏覽器相容性請參閱本文底部內容。
apply 和 call 的區別
其實 apply 和 call 基本類似,他們的區別只是傳入的引數不同。
call 的語法為:
fun.call(thisArg[, arg1[, arg2[, ...]]])
所以 apply 和 call 的區別是 call 方法接受的是若干個引數列表,而 apply 接收的是一個包含多個引數的陣列。
var a ={ name : "Cherry", fn : function (a,b) { console.log( a + b) } } var b = a.fn; b.apply(a,[1,2])// 3
var a ={ name : "Cherry", fn : function (a,b) { console.log( a + b) } } var b = a.fn; b.call(a,1,2)// 3
bind 和 apply、call 區別
我們先來將剛剛的例子使用 bind 試一下var a ={ name : "Cherry", fn : function (a,b) { console.log( a + b) } } var b = a.fn; b.bind(a,1,2)
我們會發現並沒有輸出,這是為什麼呢,我們來看一下MDN 上的文件說明:
bind()方法建立一個新的函式, 當被呼叫時,將其this關鍵字設定為提供的值,在呼叫新函式時,在任何提供之前提供一個給定的引數序列。
所以我們可以看出,bind 是建立一個新的函式,我們必須要手動去呼叫:
var a ={ name : "Cherry", fn : function (a,b) { console.log( a + b) } } var b = a.fn; b.bind(a,1,2)()// 3