apply、call、bind有什麼區別？
摘要：
使用 apply
var a = {
name : "Cherry",
func1: function () {
console.log(this.name)
},
func...
使用 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