从另一个角度看 JS 中的 this

与众不同的视角：JS 中的 this 机制

引言

this 是 JavaScript 中一个经常让人困惑的概念。它可以指向不同的对象，具体取决于它所在的环境和调用的方式。这篇文章旨在从一个不同的角度来剖析 this，探索它的不同绑定类型，帮助你深入理解和掌握这个 JavaScript 的基本概念。

this 的默认绑定

当一个函数作为对象的方法调用时，它的 this 会默认绑定到该对象上。例如：

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

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

this 的隐式绑定

当一个函数作为一个独立的函数调用时，它的 this 会隐式地绑定到全局对象（在浏览器中为 window）。例如：

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

greet(); // 输出：Hello, my name is undefined

this 的显示绑定

显示绑定允许你显式地将 this 绑定到特定的对象。可以使用 bind() 方法或 call() 方法来实现。例如：

const greetJohn = greet.bind(person);
greetJohn(); // 输出：Hello, my name is John

greet.call(person); // 输出：Hello, my name is John

this 的 new 绑定

当使用 new 关键字创建对象时，它的 this 会绑定到新创建的对象上。例如：

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

const john = new Person('John');
console.log(john.name); // 输出：John

注意事项

• this 的绑定在函数调用时确定，之后就不能再改变。
• 箭头函数没有自己的 this 绑定，它会继承其外围作用域的 this 绑定。

结论

通过了解 this 关键字的不同绑定类型，你可以更有效地编写和理解 JavaScript 代码。this 机制是 JavaScript 中一个强大的概念，掌握它可以让你成为一名更熟练的开发人员。