JavaScript this 绑定的理解（终极指南）

2023-09-13 17:36:37

导言

在 JavaScript 中，this 是一个特殊变量，它指向当前执行环境中的对象。理解 this 绑定对于编写清晰、可维护的代码至关重要。

绑定规则

this 的值在函数调用时确定，遵循以下五条绑定规则：

1. 默认绑定（隐式绑定）

如果函数作为对象的方法调用，this 绑定到该对象。

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

person.greet(); // "Hello, my name is John"

2. 显式绑定（call、apply、bind）

可以通过显式绑定方法修改 this 的默认绑定。

call(thisArg, ...args)：手动设置 this 并传入参数。
apply(thisArg, [args])：类似于 call，但参数以数组形式传入。
bind(thisArg, ...args)：返回一个新函数，该函数的 this 绑定到指定的 thisArg。

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

greet.call({ name: "Alice" }); // "Hello, my name is Alice"
greet.apply({ name: "Bob" }, []); // "Hello, my name is Bob"
const boundGreet = greet.bind({ name: "Carol" });
boundGreet(); // "Hello, my name is Carol"

3. 硬绑定（new）

当使用 new 运算符调用构造函数时，this 绑定到新创建的对象。

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

const person = new Person("Dave");
console.log(person.name); // "Dave"

4. 箭头函数

箭头函数没有自己的 this 绑定。它从封闭作用域继承 this。

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

person.greet(); // undefined (箭头函数的 this 指向全局对象)

5. 全局对象绑定

在严格模式下，当函数不在任何对象或函数中调用时，this 绑定到全局对象（window）。

"use strict";

const name = "Frank";

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

greet(); // undefined (在严格模式下， this 绑定到 undefined)