揭示JavaScript中的bind、call和apply的精髓
2023-09-25 21:17:09
在JavaScript中，bind、call和apply是三个非常有用的函数，它们可以改变函数执行时的上下文，即改变函数运行时的this指向。这在许多场景中非常有用，例如：
- 改变函数的执行上下文，使函数可以在其他对象上运行。
- 将函数绑定到特定的对象上，以便在以后调用时始终使用该对象作为函数的this值。
- 将函数作为另一个函数的参数传递，并指定该函数的执行上下文。
为了更好地理解bind、call和apply函数，我们先来了解一下JavaScript中的this。this关键字是指向当前执行函数的对象，它可以是全局对象、对象本身或其他对象。当函数被调用时，this的值会自动确定，并作为函数的参数传递给函数。
bind、call和apply函数都可以改变函数的执行上下文，从而改变this的值。下面分别介绍这三个函数的用法和区别：
- bind() 函数：bind()函数可以创建一个新的函数，该函数的执行上下文被绑定到指定的this值。也就是说，当使用bind()创建的新函数被调用时，this的值始终是指定的this值，而不是调用该函数的对象。bind()函数的语法如下：
Function.prototype.bind(thisArg, ...args)
其中：
-
thisArg ：要绑定的this值。
-
args ：要传递给新函数的参数。
-
call() 函数：call()函数可以立即调用一个函数，并指定该函数的执行上下文。也就是说，当使用call()函数调用一个函数时，this的值是指定的this值，而不是调用该函数的对象。call()函数的语法如下：
Function.prototype.call(thisArg, ...args)
其中：
-
thisArg ：要绑定的this值。
-
args ：要传递给函数的参数。
-
apply() 函数：apply()函数与call()函数类似，也可以立即调用一个函数，并指定该函数的执行上下文。但是，apply()函数的参数是以数组的形式传递的。apply()函数的语法如下：
Function.prototype.apply(thisArg, argsArray)
其中：
- thisArg ：要绑定的this值。
- argsArray ：要传递给函数的参数数组。
下面我们来看一个例子，演示如何使用bind、call和apply函数：
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name}.`);
};
const person1 = new Person('John');
const person2 = new Person('Mary');
// 使用bind()函数绑定this值
const greetJohn = person1.greet.bind(person1);
greetJohn(); // 输出：Hello, my name is John.
// 使用call()函数调用函数并指定this值
person2.greet.call(person1); // 输出：Hello, my name is John.
// 使用apply()函数调用函数并指定this值和参数数组
person2.greet.apply(person1, ['Jane']); // 输出：Hello, my name is Jane.
从上面的例子可以看出，bind、call和apply函数都可以改变函数的执行上下文，从而改变this的值。bind()函数可以创建一个新的函数，该函数的执行上下文被绑定到指定的this值。call()和apply()函数可以立即调用一个函数，并指定该函数的执行上下文。
现在，我们来实现一个自己的bind函数：
Function.prototype.myBind = function(thisArg, ...args) {
const fn = this;
return function(...args2) {
fn.apply(thisArg, args.concat(args2));
};
};
const person1 = new Person('John');
const person2 = new Person('Mary');
// 使用myBind()函数绑定this值
const greetJohn = person1.greet.myBind(person1);
greetJohn(); // 输出：Hello, my name is John.
// 使用call()函数调用函数并指定this值
person2.greet.call(person1); // 输出：Hello, my name is John.
// 使用apply()函数调用函数并指定this值和参数数组
person2.greet.apply(person1, ['Jane']); // 输出：Hello, my name is Jane.
从上面的例子可以看出，我们实现的myBind()函数与原生的bind()函数具有相同的功能。
总之，bind、call和apply函数都是非常有用的函数，它们可以改变函数的执行上下文，从而改变this的值。这在许多场景中非常有用，例如：改变函数的执行上下文，使函数可以在其他对象上运行；将函数绑定到特定的对象上，以便在以后调用时始终使用该对象作为函数的this值；将函数作为另一个函数的参数传递，并指定该函数的执行上下文。
