一遍就明白 this 指向，代码剧情化

前端

2023-12-05 01:05:09

这是一个关于 this 指向的教程，但它与其他教程不同。我们将用一种独特的方式来解释它——通过一个引人入胜的故事。准备好踏上这段充满代码和冒险的旅程了吗？

第一章：this 的神秘本质

在广阔的 JavaScript 王国中，this 是一个神秘的存在。它是一个特殊变量，指向调用它的对象。但究竟是如何工作的呢？它从哪里来？

第二章：四种绑定规则

this 的指向并不是任意的。它遵循四条严格的绑定规则，就像四位忠诚的骑士守护着公主。这些规则按优先级排列，从最高到最低：

显式绑定（call、apply、bind）： 国王般的规则，由开发人员明确指定 this 的指向。
隐式绑定： 灵活的规则，this 指向调用它的对象（通常是函数或方法）。
默认绑定： 朴实的规则，当函数不在对象上下文中调用时，this 指向全局对象（window）。
新绑定（new）： 特别的规则，创建新对象时，this 指向新对象。

第三章：代码剧情化

为了让 this 指向的故事变得更加生动，让我们用代码来演绎它：

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}

let john = new Person("John");
john.greet(); // "Hello, my name is John"

在这段代码中，this 指向调用它的对象，即 Person 实例 john。它可以访问 john 的 name 属性和 greet 方法，因为 this 指向 john。

第四章：优先级之争

当多个绑定规则争夺控制权时，优先级就派上用场了。显式绑定始终优先，其次是隐式绑定，然后是默认绑定，最后是新绑定。

let name = "Global";

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

let john = new Person();
john.greet = function() {
  console.log("Hello, my name is " + this.name);
};

john.greet(); // "Hello, my name is Instance"

Person.call(john); // 显式绑定，this 指向 john
john.greet(); // "Hello, my name is Global"