JavaScript中的call, apply, bind函数：巧妙实现函数上下文切换！

前端

2023-08-09 19:22:26

函数上下文：操纵JavaScript中的this对象

什么是函数上下文？

在JavaScript中，函数的上下文决定了this 的指向。this 表示当前函数调用的对象，它可以是全局对象、对象实例或其他值。

为什么要操纵函数上下文？

操纵函数上下文非常有用，因为它允许我们：

改变函数的this 值
将函数作为参数传递给其他函数
创建新的函数，其this 值已绑定到指定的this 值

call()、apply()和bind()函数

JavaScript提供了三个函数来操纵函数上下文：

1. call()函数

call() 函数允许我们显式设置函数的上下文。它接受两个参数：

要设置上下文的this 值的对象
要传递给函数的参数列表

示例：

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = {
  name: 'John Doe'
};

greet.call(person); // 输出: "Hello, John Doe!"

2. apply()函数

apply() 函数类似于call() 函数，但它接受一个数组作为第二个参数，而不是参数列表。

示例：

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = {
  name: 'John Doe'
};

greet.apply(person, ['Jane Doe']); // 输出: "Hello, Jane Doe!"

3. bind()函数

bind() 函数与call() 和apply() 函数不同，它不立即调用函数，而是返回一个新函数，该函数的上下文已绑定到指定的this 值。

示例：

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = {
  name: 'John Doe'
};

const boundGreet = greet.bind(person);

boundGreet(); // 输出: "Hello, John Doe!"

简单的实现

以下是call() 、apply() 和bind() 函数的简单实现：

Function.prototype.myCall = function (context, ...args) {
  context.fn = this;
  context.fn(...args);
  delete context.fn;
};

Function.prototype.myApply = function (context, args) {
  context.fn = this;
  context.fn(...args);
  delete context.fn;
};

Function.prototype.myBind = function (context, ...args) {
  return (...bindArgs) => {
    context.fn = this;
    context.fn(...args, ...bindArgs);
    delete context.fn;
  };
};