为什么 JavaScript 中的'this”与其他 OOP 语言不同

JavaScript 的 this 关键字经常会引起混乱，特别是对于来自 C#、Java 或 Python 等语言的开发人员来说，其中 self 始终指代当前对象实例。 与这些语言不同，JavaScript 的 this 是动态的，其值由函数的调用上下文决定。本指南总结了影响 this 行为的各种场景。

1。全球范围：

• 非严格模式： this 指向全局对象（浏览器中为 window，Node.js 中为 global）。

<code class="language-javascript">console.log(this); // window or global</code>

• 严格模式： this 是 undefined。

<code class="language-javascript">"use strict";
console.log(this); // undefined</code>

2。内部函数：

• 常规函数：非严格模式下，this指的是全局对象；在严格模式下，它是undefined。

<code class="language-javascript">function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)</code>

3。对象方法：

• 当函数作为对象方法调用时，this 引用该对象。

<code class="language-javascript">const myObj = {
  name: "JavaScript",
  greet() {
    console.log(this.name); // this refers to myObj
  }
};
myObj.greet(); // Output: JavaScript</code>

4。箭头功能：

• 箭头函数缺少自己的this。它们从词法范围（周围上下文）继承 this。

<code class="language-javascript">const myObj = {
  name: "JavaScript",
  arrowFunc: () => {
    console.log(this.name); // Inherits this from the global scope
  }
};
myObj.arrowFunc(); // undefined (in browsers, this is window)</code>

5。构造函数：

• 在构造函数或类中，this 指的是新创建的实例。

<code class="language-javascript">class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

const person = new Person("Alice");
person.greet(); // Output: Hello, Alice</code>

6。显式绑定（call、apply、bind）：

JavaScript 函数是具有方法 (call、apply、bind) 的对象，用于显式设置 this.

• call 和 apply 使用指定的 this 值调用函数。 call 使用逗号分隔的参数； apply 接受一个数组。

<code class="language-javascript">function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user = { name: "Alice" };
greet.call(user, "Hello"); // Output: Hello, Alice
greet.apply(user, ["Hi"]); // Output: Hi, Alice</code>

• bind 返回一个与 this 永久绑定的新函数。

<code class="language-javascript">const boundGreet = greet.bind(user);
boundGreet("Hello"); // Output: Hello, Alice</code>

7。事件监听器：

• 常规函数： this 指触发事件的元素。

<code class="language-javascript">const btn = document.querySelector("button");
btn.addEventListener("click", function() {
  console.log(this); // The button element
});</code>

• 箭头函数： this 继承自周围范围，而不是元素。

<code class="language-javascript">btn.addEventListener("click", () => {
  console.log(this); // this depends on the arrow function's definition context
});</code>

8。 setTimeout / setInterval:

• 常规函数： this 默认为全局对象。

<code class="language-javascript">setTimeout(function() {
  console.log(this); // window in browsers
}, 1000);</code>

• 箭头函数： this 按词法继承。

<code class="language-javascript">setTimeout(() => {
  console.log(this); // Inherits this from surrounding context
}, 1000);</code>

9。班级：

• 在类方法中，this 指的是类实例。

<code class="language-javascript">console.log(this); // window or global</code>

10。上下文丢失（方法提取）：

将方法分配给变量或将其作为回调传递可能会导致this绑定丢失。

<code class="language-javascript">"use strict";
console.log(this); // undefined</code>

解决方案：使用.bind(obj)或箭头函数来维护上下文。

11。 new 关键字：

将 new 与函数一起使用会创建一个新对象，并且 this 引用该对象。

<code class="language-javascript">function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)</code>

汇总表：

上下文

Context	this Refers To
Global (non-strict)	Global object (window/global)
Global (strict)	undefined
Object Method	The object owning the method
Arrow Function	Lexical scope (surrounding context)
Constructor/Class	The instance being created
call, apply, bind	Explicitly defined value
Event Listener	The element triggering the event
setTimeout/setInterval	Global object (regular function), lexical scope (arrow function)
new Keyword	The newly created object

指的是 标题> 全局（非严格） 全局对象（窗口/全局） 全局（严格） 未定义 对象方法 拥有该方法的对象 箭头函数 词法范围（周围上下文） 构造函数/类 正在创建的实例 调用、应用、绑定 明确定义的值 事件监听器 触发事件的元素 setTimeout/setInterval 全局对象（常规函数）、词法作用域（箭头函数）

关键字

新创建的对象 表> this理解这些场景对于编写正确且可预测的 JavaScript 代码至关重要。 请记住在必要时使用显式绑定等技术以避免意外的行为。

以上是为什么 JavaScript 中的'this”与其他 OOP 语言不同的详细内容。更多信息请关注PHP中文网其他相关文章！