在 Javascript 中，"this" 关键字用于引用当前执行上下文的对象。在对象字面量中，"this" 通常用于引用正在创建的对象本身。但是，由于对象字面量与函数定义之间的差异，"this" 的行为可能会有所不同。
在对象字面量中使用 "this"
在对象字面量中，"this" 关键字指向正在创建的对象本身。下面是一个简单的示例：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- ---
------- -
------------------- -- ---- -- ------------ --- - -- ----------- ----- -------
-
--
--------------- -- --------- -- ---- -- ---- --- - -- -- ----- ----在这个例子中，我们定义了一个名为 "person" 的对象，并添加了两个属性 "name" 和 "age"，以及一个方法 "greet"。在 "greet" 方法中，我们使用 "this" 关键字来引用正在创建的对象 "person"，并在控制台中输出一条消息。
使用箭头函数时注意事项
需要注意的是，在使用箭头函数作为对象字面量方法时，"this" 关键字将不再指向对象本身，而会继承自外部作用域。下面是一个示例：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- ---
------ -- -- -
------------------- -- ---- -- ------------ --- - -- ----------- ----- -------
-
--
--------------- -- --------- -- ---- -- --------- --- - -- --------- ----- ----在这个例子中，我们定义了一个名为 "person" 的对象，并添加了两个属性 "name" 和 "age"，以及一个箭头函数 "greet"。由于箭头函数继承自外部作用域，"this" 关键字将不再指向对象本身，而是指向全局作用域中的 "window" 对象。因此，在控制台中输出的消息中，"name" 和 "age" 属性的值均为 "undefined"。
如何避免 "this" 关键字问题
为了避免 "this" 关键字的问题，在对象字面量中使用普通函数而非箭头函数是一个简单有效的方法。下面是一个修改后的示例：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- ---
------ ---------- -
------------------- -- ---- -- ------------ --- - -- ----------- ----- -------
-
--
--------------- -- --------- -- ---- -- ---- --- - -- -- ----- ----在这个例子中，我们将箭头函数改为普通函数，并在其中使用 "this" 关键字引用对象本身。现在，在控制台中输出的消息中，"name" 和 "age" 属性的值均正确显示为 "John" 和 "30"。
结论
在对象字面量中，"this" 关键字通常用于引用正在创建的对象本身。由于箭头函数继承自外部作用域而不是当前对象，因此在对象字面量中使用箭头函数时需要特别注意 "this" 关键字的行为。为了避免 "this" 关键字的问题，我们可以使用普通函数来代替箭头函数，并在其中使用 "this" 关键字引用对象本身。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29351