this，一个神奇的关键字

前端

2023-09-19 11:24:27

this: JavaScript 中的“幕后英雄”

在 JavaScript 的世界里，"this" 扮演着至关重要的角色，它就像舞台上的幕后英雄，在幕后默默地发挥着作用。理解 "this" 的本质对于 JavaScript 编程至关重要，它可以帮助你编写出清晰、高效的代码。

揭秘 "this" 的身份

在 JavaScript 中，"this" 是一个特殊的变量，它指向当前正在执行的代码块的作用域。作用域可以是：

全局作用域： "this" 指向 window 对象，即浏览器窗口。
函数作用域： "this" 指向正在调用的函数本身。
对象作用域： "this" 指向调用该方法的对象。

简单来说，"this" 就是代码执行环境中的当前上下文对象。

"this" 的多面应用

"this" 关键字有着广泛的用途，以下是它的主要用法：

访问对象属性和方法： 例如，const person = {name: "John Doe"}，我们可以使用 "this.name" 访问 person 对象的 name 属性。
调用函数： 例如，const greet = function() { console.log(this.name) }，我们可以使用 greet.call(person) 来调用 greet 函数，并将 person 对象作为 this 上下文。
创建对象： 例如，const person = new Person("John Doe")，我们可以使用 new 关键字创建一个 Person 对象，并使用 this 关键字设置对象的属性。
绑定 "this" 上下文： 我们可以使用 call(), apply() 和 bind() 方法来显式绑定函数的 "this" 上下文。

"this" 在箭头函数中的特立独行

ES6 中引入的箭头函数与传统函数在处理 "this" 方面略有不同。箭头函数没有自己的 "this" 值，它们会继承外层函数的 "this" 值。例如：

const person = {
  name: "John Doe",
  greet: () => { console.log(this.name) }
};

person.greet(); // "undefined"

在上面的示例中，箭头函数 greet 没有自己的 "this" 值，它继承了外层函数 person.greet 的 "this" 值。由于 person.greet 是在 person 对象上调用的，因此 "this" 指向 person 对象。但是，箭头函数 greet 没有自己的 "this" 值，因此当它尝试访问 this.name 时，会返回 undefined。

小技巧：巧用 call、apply 和 bind

在某些情况下，我们需要显式绑定函数的 "this" 上下文。这时，call(), apply() 和 bind() 方法就派上用场了：

call(): 将指定的对象作为函数的 "this" 上下文。
apply(): 与 call() 类似，但参数以数组的形式传入。
bind(): 返回一个新函数，其 "this" 上下文已绑定到指定的对象。

"this" 与对象创建

当我们使用 new 关键字创建对象时，"this" 指向新创建的对象。例如：

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

const person = new Person("John Doe");

console.log(person.name); // "John Doe"

原型对象的 "this"

每个对象都有一个原型对象。原型对象是所有对象的父对象。当我们访问对象的属性或方法时，JavaScript 会先在该对象中查找。如果找不到，它就会在该对象的原型对象中查找。以此类推，直到找到该属性或方法为止。

原型对象的 "this" 指向原型对象本身。例如：

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

console.log(person.hasOwnProperty("name")); // true
console.log(person.__proto__.hasOwnProperty("name")); // false