JavaScript 中 this 指向详细分析(译)**

前端

2023-12-25 04:04:33

导语

在前端开发中，this 可谓是无处不在，它就像一个变幻莫测的精灵，时而指向对象，时而又指向函数，甚至还能指向 window 对象。要想成为一名合格的前端开发人员，深入理解 this 的指向规则是必不可少的。

this 的指向规则

this 的指向规则看似复杂，但其实只要掌握了基本原则，就能轻松驾驭。

默认情况下，this 指向全局对象 window。
当 this 出现在一个对象的方法中时，this 指向该对象。
当 this 出现在一个函数中时，this 指向该函数所属的对象。
当 this 出现在一个类中时，this 指向该类的实例。
箭头函数中的 this 始终指向定义它的对象。

this 的指向实例

为了更好地理解 this 的指向规则，我们来看几个实际的例子：

函数中的 this

function sayHello() {
  console.log(this); // 输出 window 对象
}

sayHello();

在这个例子中，sayHello() 函数中的 this 指向 window 对象，因为没有其他对象来调用它。

对象方法中的 this

const person = {
  name: 'John Doe',
  sayName: function() {
    console.log(this.name); // 输出 'John Doe'
  }
};

person.sayName();

在这个例子中，person.sayName() 方法中的 this 指向 person 对象，因为该方法是由 person 对象调用的。

类中的 this

class Person {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name); // 输出 'John Doe'
  }
}

const person = new Person('John Doe');
person.sayName();

在这个例子中，Person 类中的 this 指向 person 对象，因为 person 对象是通过 new Person('John Doe') 创建的。

箭头函数中的 this

const person = {
  name: 'John Doe',
  sayName: () => {
    console.log(this.name); // 输出 undefined
  }
};

person.sayName();

在这个例子中，person.sayName() 箭头函数中的 this 指向 undefined，因为箭头函数没有自己的 this 指向，它继承了定义它的对象 person 的 this 指向。

this 的绑定

在某些情况下，我们需要改变 this 的指向，这就需要用到 this 的绑定。this 的绑定有两种常见的方法：

call() 和 apply() 方法

call() 和 apply() 方法可以显式地绑定 this 的指向。语法如下：

function.call(thisArg, arg1, arg2, ...)
function.apply(thisArg, [args])

例如：

function sayHello() {
  console.log(this.name);
}

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

sayHello.call(person); // 输出 'John Doe'

在这个例子中，我们使用 call() 方法将 sayHello() 函数的 this 指向绑定到 person 对象，因此输出结果为 'John Doe'。

bind() 方法

bind() 方法可以创建新的函数，该函数的 this 指向绑定到指定的 this 值。语法如下：

function.bind(thisArg)

例如：

function sayHello() {
  console.log(this.name);
}

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

const sayHelloBound = sayHello.bind(person);
sayHelloBound(); // 输出 'John Doe'