“this”关键字如何工作？

灰太狼版星星

我注意到this网站上似乎没有明确解释关键词是什么，它是如何解释的 JavaScript 正确使用(和错误)。
我目睹了它的一些非常奇怪的行为，不明白它为什么会发生。
如何this什么时候工作应该用？

解决方案:
                                                            this是 JavaScript 中的关键字是执行上下文的属性。其主要用途是函数和构造函数。
我建议先读Mike West的文章JavaScript 作用域(存档)。这是对的thisJavaScript 优秀友好地介绍了作用域链和作用域链的概念。this很简单(如果你坚持最好的练习)。
this规范中的技术说明的ECMAScript标准定义this抽象操作(缩写)AO）ResolveThisBinding：
[AO] ResolveThisBinding […]this上下文使用正在运行的 LexicalEnvironment 确定关键词的绑定。[步骤]：
[ol]令envRec为GetThisEnvironment ()。
返回？envRec .GetThisBinding()。[/ol]全球环境记录、模块环境记录和函数环境记录都有自己的 GetThisBinding 方法。
所述GetThisEnvironment AO找到目前正在运行的上下文执行情况LexicalEnvironment和查找最接近方兴未艾环境记录（通过迭代地访问他们的[[OuterEnv]]特性)，它有这种结合（即HasThisBinding返回真）。这一过程以三种环境记录类型之一结束。
的值this这通常取决于代码是否严格。
GetThisBinding 反映了返回值this目前执行上下文的值，所以无论何时建立新的执行上下文，都会this分析是一个不同的值。这也可能发生在修改当前执行的上下文时。以下部分列出了可能发生的五种情况。
您可以在代码示例中放置代码示例AST 资源管理器遵循规范的详细信息。
1. 脚本中的全局执行上下文这是顶层评估的脚本代码，比如直接在 a 中[/code]在上下文中对脚本的初始全局进行评估时this会导致GetThisBinding采取以下步骤：
全局环境记录envRec […] GetThisBinding 具体方法:
[ol]返回envRec .[[GlobalThisValue]]。[/ol]全局环境记录[[GlobalThisValue]] 属性总是设置为主机定义的全局对象，可以通过globalThis（window在 Web 上，global在 Node.js 上；MDN访问文档)访问对象。InitializeHostDefinedRealm了解的步骤[[GlobalThisValue]] 属性是如何形成的。
2.模块中的全局执行如下模块已在 ECMAScript 引入2015 。
这适用于模块，如直接在 a 内部时，而不是简单.
在模块的初始全局实施中，求值this会导致GetThisBinding采取以下步骤：
记录模块环境GetThisBinding 具体方法 […] [这样做]：
[ol]返回undefined。[/ol]在模块中，值this总是undefined全局上下文。模块隐式严格。
3. 输入评估码有两种eval调用:直接调用和间接调用。这种区别自 ECMAScript 第 5 版存在。
直接eval调用通常看起来像eval(……);或(eval)(…… );（或((eval))(……);等等。直接的。2
间接eval调用涉及eval以任何其他方式调用函数引用。这可能是eval?.(… )，(… ,eval)(… )，window.eval(… )，eval.call(… ,…)等。考虑const aliasEval1 = eval; window.aliasEval2 = eval;，它也将是aliasEval1(… )，aliasEval2(… )。另外，给定const originalEval = eval; window.eval = (x) => originalEval(x);，调用eval(…)也会间接。请参阅chuckj 对“) JavaScript 中的](1,eval)(‘this’) vs eval(‘this’)”的回答？和Dmitry Soshnikov 的 ECMA-262-5 详细信息-第 2 章:严格模式(已存档)，知道何时间接使用eval()调用。
PerformEval执行eval代码。它创建了一个新的声明环境记录作为 LexicalEnvironment，这是GetThisEnvironment 从中获取this值的地方。
然后，如果this出现在eval环境记录在代码中GetThisBinding方法发现GetThisEnvironment它被称为返回值。
声明环境记录的创建取决于eval调用是直接还是间接:
在直接 eval 中，它将基于当前操作的上下文LexicalEnvironment。
在间接评估中，它将记录在基于间接评估的领域[[GlobalEnv]] 属性(全局环境记录)。意思是：
在直接 eval 中，this值不会改变；它自称是eval.
在间接 eval 中，this ( )globalThis)。怎么样new Function？?—?new Function类似于eval，但它不会立即调用代码；它创建了一个函数。本除非函数被调用，否则任何地方都不适用于装订，如下一节解释其正常工作。
4. 输入功能码调用输入函数代码将出现在函数中。
调用函数有四种语法。
该EvaluateCall
AO这三种执行：
3
调用普通函数
可选链接调用
标记模板
并为此执行
EvaluateNew
：
3
调用结构函数实际函数调用发生在Call AO 处，调用时使用根据上下文确定的thisValue；该参数在与调用相关的长串调用中传递。Call调用函数的[[Call]]内槽。这将被调用PrepareForOrdinaryCall，创建了新的函数环境记录：
甲功能环境记录如果函数不是，则声明环境记录用于表示功能的顶层范围和ArrowFunction，提供了一种this如果函数不是ArrowFunction函数并引用super，还包括函数环境记录super调用函数内部执行方法的状态。
另外，在函数 Environment Record 中有 [[ThisValue]] 字段：
这是this用于此函数调用的值。
该NewFunctionEnvironment通话还设置了功能环境[[ThisBindingStatus]]属性。
[[Call]]还调用OrdinaryCallBindThis，其中适当的thisArgument基于以下因素：
原始参考，
函数的类型，以及
代码是否严格。一旦确定，新创建的函数 Environment Record的BindThisValue实际上，方法的最终调用会 [[ThisValue]] 字段设置为thisArgument。
最后，这个字段是函数 Environment Record 的 GetThisBinding AOthis从以下位置获取值：
函数 Environment Record envRec […] GetThisBinding 具体方法:
[…]
\3. 返回envRec .[[ThisValue]]。
同样，该确定值的方法取决于许多因素；这只是一个总体概述。有了这个技术背景，让我们检查一下所有具体的例子。
箭头函数在评估箭头函数时，函数对象 [[ThisMode]] 内部槽在OrdinaryFunctionCreate 中设置为“词法”。
在OrdinaryCallBindThis，它接受函数F：
[ol]令thisMode为F .[[ThisMode]]。
如果thisMode是词法的，则返回 NormalCompletion( undefined)。[…][/ol]这只意味着跳过绑定this的算法的其余部分。箭头函数不绑定自己的this值。
那么，this箭头函数内部是什么？ResolveThisBinding和GetThisEnvironment，HasThisBinding 方法显式返回false。
HasThisBinding 函数的具体方法 Environment Record envRec […] [这样做]：
[ol]如果envRec .[[ThisBindingStatus]] 是lexical，则返回false；否则，返回true。[/ol]因此，外部环境被迭代地发现。这个过程将有this三个环境之一的绑定结束了。
这只是意味着，在箭头函数体中，this箭头函数的词法范围，或者换句话说(箭头函数和函数声明/表达式:它们等效/可交换吗？
箭头函数没有自己的this[…] 绑定。相反，[此标识符]在词法范围内像任何其他变量一样进行分析。这意味着在箭头函数中，this[引用] 到定义this在箭头函数的环境中[值] (即箭头函数的外部)。
功能属性在正常功能（function，方法），this来确定如何调用所述函数？。
这些语法变体派上用场。
考虑包含函数的对象：

const refObj = func: function(){ console.log(this); } }code]或者：- y% R L. Q6 r- A7 h
[code]const refObj = func(){ console.log(this); } }code]在以下任何函数调用中，this里面的值func都是refObj. 1+ \* x x/ L" S4 x, p5 e; ]
; _% h& m+ I& A P) b* {
refObj.func()5 d9 Y' n+ ~ M9 H9 k
refObj["func"]()
; L. W& v. k- u) Z- | M6 H
refObj?.func()
9 y9 R' Q% Y! l- w3 ]
refObj.func?.()6 A/ v, h( {( @* O' l
`refObj.func```如果被调用的函数在语法上是一个基对象的属性，那么这个基将是调用的“引用”，在通常情况下，它是的值this。解释了上述链接的评估步骤；例如，在refObj.func()（或refObj["func"]()）中，CallMemberExpression是整个表达式refObj.func()，它由MemberExpression refObj.func和Arguments 组成 ()。
9 ]' Z: @" y- `8 J
而且，refObj.func并refObj扮演三个角色，每个角色：
* `6 P: k/ d3 B9 f! S& G" u' m
3 K9 s/ c( |3 v' V: b2 t% q( f
都是表达，8 J# J% V9 l1 y) A5 V0 g/ p
而且都是参考
% Z" S' ~5 F* Y9 C4 e+ q! `7 z1 Z! i
都是价值观。refObj.func作为值可调函数对象；相应的参考用于确定this绑定。
% I6 u3 G6 X! H3 Z5 _0 n5 }
可选链接的工作方式与标记模板示例非常相似：基本上，引用是在？.()，之前```或以前的所有内容()`。
! X8 @7 @+ Y; v8 k0 ?/ a' w+ v3 i" n
EvaluateCall使用此引用IsPropertyReference确定它是否是语法上的对象属性。它试图获得引用 [[Base]] 属性(例如refObj，当应用于refObj.func; 或foo.bar应用于时foo.bar.baz）。假如把它写成属性，那么GetThisValue将获取此 [[Base]] 属性并将其用作此值。* H7 e- V+ R1 a, t
注意：关于.getter/setter 的工作方式和方法相同this。例如，简单的属性不会影响上下文的执行this在全局范围内：
1 j8 m0 b' l$ |3 L j3 Y
[code]const o = { a: 1, b: this.a,// Is `globalThis.a`. [this.a]: 2 // Refers to `globalThis.a`. }code]没有基本引用，模式严格， with没有基引的调用通常是不作为属性调用的函数。[code]func(); // As opposed to `refObj.func();`.
8 O, V/ u: n' T

这种情况也发生在传输或分配方法或使用逗号操作符时。这是参考记录和值之间的差异。

EvaluateCall电话呼叫与thisValue的不确定这里。这在OrdinaryCallBindThis（F：函数对象；thisArgument：传递给Call的thisValue）不同：
[ol]令thisMode为F .[[ThisMode]]。[/ol][…]
[ol]如果thisMode是严格的，则让thisValue为thisArgument。
别的，
如果
thisArgument
为
undefined
或
null
，则
[ol]令globalEnv为calleeRealm .[[GlobalEnv]]。
[…]
令thisValue为globalEnv .[[GlobalThisValue]]。[/ol]
别的，
[ol]让thisValue成为！ToObject (thisArgument)。
注意：ToObject生成包装对象 […]。[/ol][/ol][…]
注：第 5 步在严格模式下设置的实际值this为提供的thisArgument -?undefined在这种情况下。在草率模式中，模式thisArgument导致this成为全局this值。
如果IsPropertyReference返回false，则EvaluateCall采取以下步骤：
[ol]让refEnv为ref .[[Base]]。
断言：refEnv是环境记录。
让thisValue为refEnv .WithBaseObject()。[/ol]这是未定义的thisValue可能来自：refEnv。WithBaseObject（）总是不确定的，除了在with声明。在这种情况下，thisValue将是绑定对象。
还有Symbol.unscopables（MDN控制文档)with绑定行为。
综上所述，到目前为止：

和：

评估时应注意this，它并不重要*，其中*函数定义正常。
.call,.apply,.bind,thisArg和原语OrdinaryCallBindThis第 5 步和第 6步.2 步（规范中的 6.b）另一的另一个结果是，仅在草率模式下才将原始this值强制转换为对象。
为了检查这一点，让我们this价值引入的另一个来源覆盖this三种绑定方法：4
Function.prototype.apply(thisArg,argArray)
Function.prototype.{ call,bind}(thisArg,...args).bind创建绑定函数this绑定设置为thisArg而且不能再改了。.call并.apply立即调用函数并将其调用this绑定设置为thisArg。
.call`并使用指定的*thisArg*`.apply`直接映射到[Call](https://tc39.es/ecma262/#sec-call)。使用[BoundFunctionCreate](https://tc39.es/ecma262/#sec-boundfunctioncreate)创建绑定函数。*自己的*[[[Call\]] 方法](https://tc39.es/ecma262/#sec-bound-function-exotic-objects-call-thisargument-argumentslist)，用于搜索函数对象[[BoundThis]] 内部插槽。`.bind设置自定义this值的示例：

在严格模式和非严格模式下，对象是一样的。
试着提供一个原始值：

在非严格模式下，原语被迫转换为其对象包装形式。它正在调用你Object("s")or获得相同类型的对象new String("s")。在严格的模式下，你可以使用原语：

如 jQuery 设置 this 在这里选择DOM 元素：

构造函数，类和new当使用new当运算符调用函数作为构造函数时，EvaluateNew调用Construct，后者调用[[Construct]] 方法。如果函数是基本结构(即，不是class extends… {… }，它的设置thisArgument从构造函数的原型创建新对象。this构造函数中设置的属性最终会出现在生成的实例对象上。this隐式返回，除非你显式返回自己的非原始值。
Aclass在 ECMAScript 引入2015 。

严格模式中隐含类定义：

super行为的例外new是class extends… {… }，如上所述。调用时不会立即设置衍生类this值；他们只在super调用后这样做(在没有自己的情况下隐式发生constructor）。使用this呼叫之前super不允许。
调用使用super调用词法范围(函数环境记录)this值调用超级结构函数。GetThisValue有一个特别的super调用规则。使用它BindThisValue设置this记录环境。

5. 评价字段ECMAScript实例字段和静态字段引入 2022 。
当class评估 a 时，执行ClassDefinitionEvaluation，修改正在运行的上下文。对于每个人ClassElement：
若字段静态，则this指类本身，
若字段不静态，则this引用实例。私有字段(例如#x）添加到的方法PrivateEnvironment。
目前静态块是TC39 第 3 阶段提案。静态块的工作方式与静态字段和方法相同：this它们内部是指类本身。
方法和请注意getter/setter 中，this就像在普通函数属性中一样工作。

1

o.f)()相当于o.f(); (f)()相当于f()。这篇文章 2ality 文章存档)解释。特别是查看ParenthesizedExpression如何计算。
2：它必须是MemberExpression，不能是属性，必须有 [[ReferencedName]] 正好是“eval”，必须是 %eval% 内在对象。
三、每当规范说“让ref成为对X求值的结果。”，那么X是一些表达式，你需要找到求值步骤。例如，评估MemberExpression或CallExpression结果是这些算法之一。其中一些导致参考记录。
4:还允许提供其他本地和主机方法这个值，特别是Array.prototype.map，Array.prototype.forEach等接受一个thisArg作为他们的第二个参数。任何人都可以用自己的方法来改变this一样(func,thisArg) => func.bind(thisArg)，(func,thisArg) => func.call(thisArg)像往常一样，MDN提供巨大的文档。
只是为了好玩，用一些例子来测试你的理解回答每个代码片段的问题：“this标记行的值是多少？为什么？ .
单击灰色框以显示答案。
[ol]js if(true){    console.log(this); // What is `this` here? }[/ol]``
[ol][/ol]```js
         const obj = {};
function myFun(){
                  return { // What is this here?
                        “is obj”: this === obj,
                        “is globalThis”: this === globalThis
                  ；
         }
obj.method = myFun;
console.log(obj.method());
```
Run code snippetExpand snippet
``````
[ol][/ol]``js const obj = {    myMethod: function()()()(){                               return { // What isthis` here?
                                          “is obj”: this === obj,
                                          “is globalThis”: this === globalThis



                  myFun = obj.myMethod;
console.log(myFun());
```
Run code snippetExpand snippet
``````````
[ol][/ol]``js const obj =       myFun: () => ({ / What isthis` here?
                                 “is obj”: this === obj,
                                 “is globalThis”: this === globalThis

                  ；
console.log(obj.myFun());
```
Run code snippetExpand snippet
``````
[ol]``js function myFun(){    console.log(this); // What isthis` here?
         }[/ol]const obj = {
                        myMethod: function(){
                                 eval(“myFun()”);

                  ；
obj.myMethod();
         ```
````````
[ol][/ol]``js function myFun()()(){    / / / / What isthis` here?
                  return {
                        “is obj”: this === obj,
                        “is globalThis”: this === globalThis
                  };
         }
const obj = {};
console.log(myFun.call(obj));
```
Run code snippetExpand snippet
````````
[ol][/ol]``js class MyCls{    arrow = () => ({ / What isthis` here?
                        “is MyCls”: this === MyCls,
                        “is globalThis”: this === globalThis,
                        “is instance”: this instanceof MyCls
                  }；
         }
console.log(new MyCls().arrow());
```

“this”关键字如何工作？

灰太狼版星星 LV1