JavaScript中的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相关文档
