JS 函数的第三隻眼，深入理解Call, Apply和Bind

2023-09-17 04:35:40

函数的标准调用

在JavaScript中，函数的标准调用方式很简单，直接使用函数名后跟括号即可。例如：

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

greet('John'); // 输出: Hello, John!

函数的非标准调用

除了标准调用方式，JavaScript还提供了call, apply和bind这三个函数调用方法，它们允许我们以非标准的方式来调用函数，从而实现一些特殊的功能。

call方法

call方法允许我们指定函数的执行上下文，即this指向的对象。例如：

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

const person = {
  name: 'John'
};

greet.call(person, 'Jane'); // 输出: Hello, Jane!

在这个例子中，greet函数的执行上下文被设置为person对象，因此this指向person，而不是greet函数本身。这使得我们可以使用person对象的属性和方法来调用greet函数。

apply方法

apply方法与call方法类似，但它允许我们以数组的形式传递参数给函数。例如：

function greet(name, age) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

const person = {
  name: 'John',
  age: 30
};

const args = ['Jane', 25];

greet.apply(person, args); // 输出: Hello, Jane! You are 25 years old.

在这个例子中，greet函数的参数被存储在args数组中，apply方法将args数组作为参数传递给greet函数。这使得我们可以方便地将数据作为数组的形式传递给函数。

bind方法

bind方法与call和apply方法不同，它不会立即调用函数，而是返回一个新的函数，该函数的执行上下文被绑定到指定的this对象。例如：

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

const person = {
  name: 'John'
};

const greetJohn = greet.bind(person);

greetJohn(); // 输出: Hello, John!