深入理解javascript中的 “this”

在 JavaScript 中，"this" 是一个非常重要的概念，它决定了函数执行时的上下文。不同的使用方式会影响 this 的值，这也是 JavaScript 开发者常常混淆的一点。

什么是 "this"

"this" 关键字表示当前执行代码的上下文对象。它可以是全局对象（浏览器中为 window 对象），也可以是函数或对象本身。

"this" 的四种绑定方式

在 JavaScript 中，"this" 可以通过以下四种方式进行绑定：

1. 默认绑定：如果函数调用时没有任何前缀，"this" 绑定到全局对象。
2. 隐式绑定：当函数作为对象的方法调用时，"this" 绑定到该对象。
3. 显式绑定：通过 call()、apply() 或 bind() 方法，强制指定函数的 "this"。
4. new 绑定：当函数被 new 关键字调用时，"this" 绑定到新创建的对象上。

示例代码

默认绑定

function foo() {
  console.log(this);
}

foo(); // window

隐式绑定

const obj = {
  name: "Alice",
  sayName() {
    console.log(this.name);
  }
};

obj.sayName(); // Alice

显式绑定

-- -------------------- ---- -------
-------- ----- -
  -----------------------
-

----- --- - -
  ----- -------
--

-------------- -- -----

new 绑定

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

const alice = new Person("Alice");
console.log(alice.name); // Alice

如何正确使用 "this"

为了消除对 "this" 的混淆，我们需要遵循以下规则：

1. 在全局作用域、事件处理程序、setTimeout 和 setInterval 中不要使用 "this"。
2. 当函数作为对象的方法调用时，使用隐式绑定。
3. 当函数被 call()、apply() 或 bind() 调用时，使用显式绑定。
4. 当函数被用于构造器时，使用 new 绑定。

总之，在编写 JavaScript 代码时，深入理解 "this" 是非常重要的。掌握 "this" 的四种绑定方式，并根据情况选择正确的方式，可以使你的代码更加健壮和可维护。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1096