从零开始：轻松掌握 JavaScript this 绑定规则

2023-12-12 09:12:42

在 JavaScript 中，this 是一个非常重要的概念，它指向当前执行代码的对象。不同的执行上下文环境，this 的指向也不同。这篇文章将对 JavaScript 的 this 绑定规则进行详细介绍，帮助您深入理解 this 的工作机制，并学会在实际开发中正确使用 it。

JavaScript 中 this 的四种绑定规则

在 JavaScript 中，this 的绑定规则有四种，分别为默认绑定、隐式绑定、显式绑定和箭头函数绑定。不同的绑定规则，this 的指向也不同。

1. 默认绑定

默认绑定是 this 最基本的绑定规则，也是在非严格模式下最常用的绑定方式。在默认绑定下，this 指向全局对象。全局对象是 JavaScript 中的顶级对象，它包含所有全局变量和函数。因此，在非严格模式下，this 通常指向 window 对象。

例如，以下代码演示了默认绑定：

function foo() {
  console.log(this);
}

foo(); // 输出: Window {...}

在上面的代码中，foo() 函数没有指定任何参数，也没有使用箭头函数。因此，this 会按照默认绑定规则指向全局对象 window。

2. 隐式绑定

隐式绑定是指通过对象的方法或属性来调用函数，this 会指向该对象。隐式绑定是使用 most 广泛的绑定规则，它允许我们轻松地访问对象的方法和属性。

例如，以下代码演示了隐式绑定：

const person = {
  name: 'John Doe',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // 输出: Hello, my name is John Doe

在上面的代码中，greet() 方法是 person 对象的一个方法。当我们调用 person.greet() 时，this 会隐式地指向 person 对象。因此，我们可以通过 this.name 访问 person 对象的 name 属性。

3. 显式绑定

显式绑定是指通过使用 bind()、call() 和 apply() 方法来强制将 this 指向某个特定的对象。显式绑定允许我们手动控制 this 的指向，以便在不同的对象之间共享方法。

例如，以下代码演示了显式绑定：

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

const greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const boundGreet = greet.bind(person);

boundGreet(); // 输出: Hello, my name is John Doe

在上面的代码中，我们使用 bind() 方法将 greet() 函数绑定到 person 对象。这样，当我们调用 boundGreet() 时，this 会显式地指向 person 对象。

4. 箭头函数绑定

箭头函数是一个在 ES6 中引入的新语法。箭头函数没有自己的 this 绑定规则，它会继承其外层函数的 this 绑定。因此，箭头函数通常用于需要保持 this 指向不变的场景。

例如，以下代码演示了箭头函数绑定：

const person = {
  name: 'John Doe',
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // 输出: Hello, my name is John Doe

在上面的代码中，greet() 函数是一个箭头函数。箭头函数没有自己的 this 绑定规则，因此它会继承其外层函数的 this 绑定。在这种情况,下，this 指向 person 对象。