当我们在JavaScript中创建对象时，经常需要使用关键字this来引用当前对象。但是，对于初学者来说，this可能会有点棘手，并且有时候会出现奇怪的行为。
本文将深入探讨this在对象中的应用，并提供一些示例代码以帮助您更好地理解。我们还将介绍如何正确使用this以及避免常见的陷阱。
什么是“this”？
在JavaScript中，this是一个关键字，它用于引用当前执行上下文中的对象。这个对象可以是函数、类或对象本身。在不同的上下文中，this的值不同。
简单说，你可以把this看作是指向当前对象的指针。
“this”的值取决于上下文
大多数情况下，this的值是根据调用位置和调用方式来确定的。这意味着，当我们在不同的上下文中使用相同的函数或方法时，this的值可能会发生变化。
在全局范围内使用this会返回全局对象（通常是window或global）。在函数内部使用this时，它将返回调用该函数的对象。在构造函数中使用this时，它将引用正在创建的新对象。
考虑以下示例代码：
let person = {
name: 'Alice',
greet() {
console.log(`Hello, my name is ${this.name}.`);
}
}
person.greet(); // 输出 "Hello, my name is Alice."在这个例子中，我们定义了一个名为person的对象，并给它添加了一个greet()方法。当我们调用person.greet()时，this的值将指向person对象本身。
避免“this”陷阱
在使用this时，有几个常见的陷阱需要警惕。其中一些问题可能会导致代码错误或不安全。以下是一些避免这些陷阱的建议。
1.使用bind()方法明确设置this
bind()方法可以用于明确设置函数内部的this值。例如，我们可以使用bind()方法来创建一个新函数，该函数将始终使用特定对象作为其上下文。
-- -------------------- ---- -------
--- ------ - -
----- --------
------- -
------------------- -- ---- -- ----------------
-
-
--- ---------- - --------------------------
------------- -- -- ------- -- ---- -- -------在这个例子中，我们使用bind()方法来创建一个新函数aliceGreet，当我们调用它时，它将始终使用person对象作为其上下文。
2.使用箭头函数
箭头函数具有不同的this行为。在箭头函数中，this的值由外部（包含）函数决定。
let person = {
name: 'Alice',
greet: () => {
console.log(`Hello, my name is ${this.name}.`);
}
}
person.greet(); // 输出 "Hello, my name is undefined."在这个例子中，我们定义了一个箭头函数作为greet()方法。由于箭头函数的上下文是它所在的函数的上下文，因此this的值将指向全局对象，而不是person对象。
注意：尽管使用箭头函数可以避免特定的this问题，但也有可能导致其他问题。请谨慎使用箭头函数，并确保了解其行为。
3.使用类
使用类可以更好地管理对象和方法，并且通常能够避免一些`
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30561