JavaScript 中 apply、call、bind方法的異同： 相同點 都是用來動態指定函數 this 對象的指向 第一個參數都是 this 要指向的對象，也就是要指定的上下文 都可以利用後續參數傳參 不同點 傳參形式不同：apply 方法接受的是一個參數數組，call 和 bind 方法接受 ...
JavaScript 中 apply、call、bind方法的異同：
相同點
- 都是用來動態指定函數 this 對象的指向
- 第一個參數都是 this 要指向的對象，也就是要指定的上下文
- 都可以利用後續參數傳參
不同點
- 傳參形式不同：apply 方法接受的是一個參數數組，call 和 bind 方法接受的是參數列表
- 執行方式不同：apply、call 會立即執行，而 bind 方法會創建一個新函數，需要單獨調用執行
apply() 的使用
語法：func.apply(thisArg, [argsArray])
thisArg: 必選的。在 func 函數運行時使用的 this 值
argsArray: 可選的。一個數組或者類數組對象，其中的數組元素將作為單獨的參數傳給 func 函數
var name = 'globalName';
var age = 'globalAge';
var person = {
name: '姓名',
age: '年齡',
foo: function() {
console.log('姓名：' + this.name + ' ' + '年齡：' + this.age);
}
}
var xiaoming = {
name: '小明',
age: 25
};
person.foo(); // 姓名：姓名 年齡：年齡
person.foo.apply(xiaoming); // 姓名：小明 年齡：25
person.foo.apply(null); // 姓名：globalName 年齡：globalAge （非嚴格模式）
person.foo.apply(undefined); // 姓名：globalName 年齡：globalAge （非嚴格模式）
person.foo.apply({}); // 姓名：undefined 年齡：undefined
var foo = person.foo;
foo(); // 姓名：globalName 年齡：globalAge （非嚴格模式）
foo.apply(person); // 姓名：姓名 年齡：年齡
foo.apply(xiaoming); // 姓名：小明 年齡：25
/* 傳參: 一個數組 */
var person = {
name: '姓名',
age: '年齡',
foo: function(a, b, c) {
console.log(a, b, c);
}
}
var xiaoming = {
name: '小明',
age: 25
};
person.foo(); // undefined undefined undefined
person.foo.apply(xiaoming, [1, 2, 3]); // 1 2 3
var foo = person.foo;
foo.apply(xiaoming, [1, 2, 3]); // 1 2 3
call() 的使用
語法：function.call(thisArg, arg1, arg2, ...)
thisArg: 可選的。在 function 函數運行時使用的 this 值
arg1, arg2, ...: 可選的。指定的參數列表
var name = 'globalName';
var age = 'globalAge';
var person = {
name: '姓名',
age: '年齡',
foo: function() {
console.log(this.name + ' ' + this.age);
}
}
var xiaoming = {
name: '小明',
age: 25
};
person.foo(); // 姓名 年齡
person.foo.call(xiaoming); // 小明 25
person.foo.call(null); // globalName globalAge (非嚴格模式)
person.foo.call(undefined); // globalName globalAge (非嚴格模式)
person.foo.call({}); // undefined undefined
var foo = person.foo;
foo(); // globalName globalAge (非嚴格模式)
foo.call(person); // 姓名 年齡
foo.call(xiaoming); // 小明 25
說明：不傳參，用法類似 apply()
/* 傳參: 列表 */
var person = {
name: '姓名',
age: '年齡',
foo: function(a, b, c) {
console.log(a, b, c);
}
}
var xiaoming = {
name: '小明',
age: 25
};
person.foo(); // undefined undefined undefined
person.foo.call(xiaoming, 1, 2, 3); // 1 2 3
var foo = person.foo;
foo.call(xiaoming, 1, 2, 3); // 1 2 3
bind() 的使用
語法： function.bind(thisArg[, arg1[, arg2[, ...]]])
參數
thisArg: 調用綁定函數時作為 this 參數傳遞給目標函數的值。 如果使用new運算符構造綁定函數，則忽略該值。
arg1, arg2, ...: 當目標函數被調用時，被預置入綁定函數的參數列表中的參數
返回值
返回一個原函數的拷貝，並擁有指定的 this 值和初始參數
var name = 'globalName';
var age = 'globalAge';
var person = {
name: '姓名',
age: '年齡',
foo: function() {
console.log(this.name + ' ' + this.age);
}
}
var xiaoming = {
name: '小明',
age: 25
};
person.foo(); // 姓名 年齡
person.foo.bind(xiaoming)(); // 小明 25
person.foo.bind(null)(); // globalName globalAge (非嚴格模式)
person.foo.bind(undefined)(); // globalName globalAge (非嚴格模式)
person.foo.bind({})(); // undefined undefined
var foo = person.foo;
foo(); // globalName globalAge (非嚴格模式)
foo.bind(person)(); // 姓名 年齡
var bar = foo.bind(xiaoming);
bar(); // 小明 25 (需要單獨調用執行)
說明：相比 apply()、call()會立即執行，bind 需要單獨調用執行 bind()()
/* 傳參: 列表 */
var person = {
name: '姓名',
age: '年齡',
foo: function(a, b, c) {
console.log(a, b, c);
}
}
var xiaoming = {
name: '小明',
age: 25
};
person.foo(); // undefined undefined undefined
person.foo.bind(xiaoming, 1, 2, 3)(); // 1 2 3
var foo = person.foo;
var bar = foo.bind(xiaoming, 1); // 返回原函數的拷貝
bar(2, 3); // 1 2 3
以上只是 apply()、call()、bind() 方法主要的一個用法，更多用法詳細請閱讀MDN相關文檔
