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相關檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/126447.html
標籤：JavaScript
下一篇：React開發環境準備