深入解析 JavaScript 中 this 指向的微妙之处，揭秘优先级背后的秘密

2023-11-20 09:44:22

详解 JavaScript 中 this 指向的优先级（三）

前言

在上篇文章《详解 JavaScript 中 this 指向的优先级（二）》中，我们通过 call、apply、bind 方式对 this 指向进行绑定，称为显式绑定，而根据调用关系确定 this 的指向称为隐式绑定。本篇文章将继续深入探究 JavaScript 中 this 指向的优先级，揭秘更多微妙之处。

箭头函数与 this 指向

箭头函数是 ES6 中引入的新语法，它没有自己的 this 指向，而是继承外层函数的 this 指向。这意味着，箭头函数中的 this 指向始终指向其定义时的 this 指向，不会受到调用关系的影响。

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

person.greet(); // Hello, my name is John Doe!
person.greetArrow(); // ReferenceError: Cannot access 'name' before initialization

在上面的代码中，greet 函数是一个普通函数，它的 this 指向指向 person 对象，因此可以访问 person 对象的 name 属性。而 greetArrow 函数是一个箭头函数，它的 this 指向继承自外层函数 greet，因此同样指向 person 对象。然而，当我们独立调用 greetArrow 函数时，由于箭头函数没有自己的 this 指向，因此会抛出 ReferenceError 异常。

构造函数与 this 指向

构造函数是用来创建对象的函数，它在创建对象时会被自动调用。构造函数中的 this 指向指向新创建的对象，因此可以访问对象的属性和方法。

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

const person1 = new Person('John Doe');
const person2 = new Person('Jane Doe');

person1.greet(); // Hello, my name is John Doe!
person2.greet(); // Hello, my name is Jane Doe!