揭秘 JavaScript 中的 this 及其伴侣：apply、call 和 bind

前端

2023-09-27 01:41:12

一、this 简介

在 JavaScript 中，this 代表当前正在执行的函数或方法所指向的对象。this 的值是由函数或方法的调用方式决定的，它可以是全局对象、函数对象或自定义对象。

例如，当我们在全局作用域中调用一个函数时，this 的值是全局对象 window。当我们在对象的方法中调用一个函数时，this 的值是该对象。

二、apply、call 和 bind

apply、call 和 bind 都是函数调用的方法，它们允许你指定函数的调用者，从而改变 this 的值。

1. apply()

apply() 方法接受两个参数：第一个参数是要调用的函数，第二个参数是一个数组，其中包含要传递给函数的参数。apply() 方法将数组中的参数逐个传递给函数，并设置函数的 this 值为第一个参数。

例如：

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

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

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

2. call()

call() 方法与 apply() 方法类似，但它接受的参数不是数组，而是单个参数。call() 方法将单个参数传递给函数，并设置函数的 this 值为第一个参数。

例如：

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

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

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

3. bind()

bind() 方法与 apply() 和 call() 方法不同，它不会立即调用函数，而是返回一个新的函数。这个新函数的 this 值被绑定为 bind() 方法的第一个参数，并且可以传递任何数量的参数给新函数。

例如：

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

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

const greetJohn = greet.bind(person);

greetJohn('Jane Doe'); // 输出：Hello, Jane Doe!