前端必备函数——call、apply、bind

2023-11-05 23:43:41

前言
在前端开发中，我们经常会遇到需要改变this指向的情况，例如：

在事件处理函数中，this指向当前元素
在构造函数中，this指向新创建的对象
在函数内部，this指向函数所属的对象

为了解决这些问题，JavaScript提供了call、apply、bind三个函数，它们都可以改变this指向。

call 和 apply

call和apply函数都是用来改变this指向的，但它们的使用方式略有不同。

call函数的用法是：

func.call(thisArg, arg1, arg2, ...);

其中，

func是需要改变this指向的函数。
thisArg是新this指向。
arg1、arg2、...是传给func函数的参数。

apply函数的用法是：

func.apply(thisArg, [arg1, arg2, ...]);

其中，

func是需要改变this指向的函数。
thisArg是新this指向。
[arg1, arg2, ...]是一个包含要传给func函数参数的数组。

call和apply函数的区别在于，call函数的参数是单独列出来的，而apply函数的参数是一个数组。

bind

bind函数也是用来改变this指向的，但它的用法与call和apply函数不同。

bind函数的用法是：

func.bind(thisArg, arg1, arg2, ...);

其中，

func是需要改变this指向的函数。
thisArg是新this指向。
arg1、arg2、...是预先绑定的参数。

bind函数与call和apply函数的区别在于，bind函数返回一个新的函数，这个新函数的this指向已经被绑定到thisArg，而call和apply函数直接调用函数。

实例

下面通过一个例子来说明call、apply和bind函数的用法。

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person = new Person('John');

// 使用call函数改变this指向
person.sayHello.call(person); // Hello, my name is John

// 使用apply函数改变this指向
person.sayHello.apply(person); // Hello, my name is John

// 使用bind函数改变this指向
const sayHello = person.sayHello.bind(person);
sayHello(); // Hello, my name is John