在函数中使用“这个”关键字的工作原理

在JavaScript中，“this”关键字是一个常见且重要的概念。它通常用于访问对象的属性和方法，但具体的行为取决于如何使用它。在本文中，我们将深入探讨在函数中使用“this”关键字的工作原理。

什么是“this”？

在JavaScript中，“this”关键字引用了当前执行代码的上下文对象。如果代码处于全局环境，则“this”引用全局对象（即“window”对象）。但是，在函数中，“this”的值取决于调用该函数的方式。

函数调用方式

在JavaScript中，有四种不同的函数调用方式：

1. 作为函数调用
2. 作为方法调用
3. 作为构造函数调用
4. 使用“apply”或“call”方法调用

在下面的示例代码中，我们将演示每个调用方式对“this”关键字的影响：

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

------

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

----------

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

--- ------

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

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

“this”绑定规则

当函数被调用时，“this”的值由以下三个因素中的一个或多个决定：

1. 函数是如何被调用的（即函数调用方式）
2. 函数是否在严格模式下执行
3. 函数的位置是否在箭头函数内部

根据这些因素，JavaScript使用四种不同的“this”绑定规则来确定“this”的值。

默认绑定

如果函数作为普通函数调用，则“this”的值将默认绑定到全局对象（浏览器中为“window”）。例如：

function foo() {
  console.log(this); // 全局对象（浏览器中为"window"）
}

foo();

隐式绑定

如果函数作为对象的方法调用，则“this”的值将隐式绑定到该对象。例如：

var obj = {
  bar: function() {
    console.log(this); // "obj"对象
  }
};

obj.bar();

显式绑定

如果使用“apply”或“call”方法显式地指定“this”的值，则“this”的值将绑定到传入的对象。例如：

function qux() {
  console.log(this); // "obj"对象
}

qux.call(obj);

new绑定

如果函数作为构造函数调用，则“this”的值将绑定到新创建的对象。例如：

function Baz() {
  console.log(this); // "Baz"对象
}

new Baz();

箭头函数绑定

箭头函数是ES6中引入的新语法。与普通函数不同，箭头函数没有自己的“this”值，它们采用封闭词法作用域中的“this”值。例如：

var obj = {
  baz: function() {
    var arrowFunc = () => console.log(this);
    arrowFunc(); // "obj"对象
  }
};

obj.baz();

总结

在JavaScript中，“this”关键字引用了当前执行代码的上下文对象，并且其值取决于如何使用它。当函数被调用时，JavaScript使用四种不同的“this”绑定规则来确定“this”的值。了解这些规则可以帮

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