FE技能进阶：掌握call/apply/bind，操控函数执行环境
2023-11-05 18:32:23
引言
在前端开发中，函数是至关重要的构建块。它们封装了代码逻辑，允许我们在程序中执行特定任务。但是，有时我们需要更精细地控制函数的执行环境，例如调整this指向或传递参数。此时，call、apply和bind这三个函数方法就派上用场了。
函数执行环境
在JavaScript中，每个函数都有一个this对象，它指向函数被调用的对象。this对象决定了函数内部的this的值。通常情况下，this指向函数被调用的对象，但有时我们需要改变this指向，以满足特定场景的需求。
call和apply
call和apply方法允许我们指定函数的this对象和参数。它们的语法如下：
call(thisArg, arg1, arg2, ...)
apply(thisArg, [arg1, arg2, ...])
其中，thisArg是指定的this对象，arg1、arg2等是传递给函数的参数。
call方法将参数逐个传递给函数，而apply方法将参数作为数组传递。
bind
bind方法与call和apply类似，但它不立即调用函数，而是返回一个新的函数，这个新的函数具有指定的this对象和参数。bind方法的语法如下：
bind(thisArg, arg1, arg2, ...)
与call和apply不同，bind返回一个新的函数，这个新函数的this对象和参数已绑定，但不会立即调用。
实战案例
为了更好地理解call、apply和bind的使用，我们来看几个实战案例：
- 改变this指向
有时我们需要改变函数的this指向，例如，在一个对象的方法中调用另一个对象的方法。此时，我们可以使用call或apply方法来指定this对象。
const obj1 = {
name: 'obj1'
};
const obj2 = {
name: 'obj2'
};
function getName() {
console.log(this.name);
}
getName.call(obj1); // 输出：obj1
getName.apply(obj2); // 输出：obj2
- 传递参数
如果我们需要向函数传递参数，我们可以使用call或apply方法将参数逐个传递，或使用apply方法将参数作为数组传递。
function sum(a, b) {
console.log(a + b);
}
sum.call(null, 1, 2); // 输出：3
sum.apply(null, [1, 2]); // 输出：3
- 创建新的函数
bind方法可以用来创建新的函数，这个新的函数具有指定的this对象和参数。
const boundGetName = getName.bind(obj1);
boundGetName(); // 输出：obj1
总结
call、apply和bind是JavaScript中强大的函数方法，它们允许我们控制函数的执行环境，调整this指向和传递参数。通过熟练掌握这三个方法，我们可以提升代码复用性，编写更灵活、更健壮的代码。
