编辑-堆栈溢出

你不是已登录。您的编辑将被放置在队列中，直到同行评审.

我们欢迎编辑，使文章更容易理解，对读者更有价值。由于社区成员审阅了编辑内容，请尝试使帖子比您发现的更好，例如，通过修改语法或添加其他资源和超链接。

利润

“this”关键字是如何工作的，应该在什么时候使用？

我正在寻找一个关于“this”关键字的作用以及如何正确使用它的清晰解释。

它的行为似乎很奇怪，我不完全理解为什么。

如何这工作以及何时使用？

答案

<trans data-src="[`this`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this) is a keyword in JavaScript that is a property of an execution context. ">[`this`]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this）是JavaScript中的关键字，是执行上下文的属性。</trans><trans data-src="Its main use is in functions and constructors.">它主要用于函数和构造函数。</trans><trans data-src="The rules for `this` are quite simple (if you stick to best practices).">“这”的规则很简单（如果你坚持最佳实践）。</trans><trans data-src="## Technical description of `this` in the specification">##规范中“this”的技术说明</trans><trans data-src="The [ECMAScript standard](//tc39.es/ecma262) defines [`this`](//tc39.es/ecma262/#sec-this-keyword) via the abstract operation (abbreviated _AO_) [ResolveThisBinding]:">[ECMAScript标准]（//tc39.es/ecma262）通过抽象操作（缩写为_AO_）[ResolveThisBinding]定义了[`this`]（//tc39.es/ecma262/#sec-this-keyword）：</trans><trans data-src="> The [AO] ResolveThisBinding […] determines the binding of the keyword `this` using the LexicalEnvironment of the [running execution context]. ">>[AO]ResolveThisBinding[…]使用[running execution context]的LexicalEnvironment确定关键字`this`的绑定。</trans><trans data-src="[Steps]:">[步骤]：</trans><trans data-src=">">></trans><trans data-src="> 1. ">> 1. </trans><trans data-src="Let _envRec_ be [GetThisEnvironment]\().">让_envRec_成为[GetThisEnvironment]\（）。</trans><trans data-src="> 2. ">> 2. </trans><trans data-src="Return ? _">返回_</trans><trans data-src="envRec_.">环境记录_。</trans><trans data-src="GetThisBinding().">GetThisBinding（）。</trans><trans data-src="[Global Environment Records][gER], [module Environment Records](//tc39.es/ecma262/#sec-module-environment-records), and [function Environment Records][fER] each have their own GetThisBinding method.">[Global Environment Records][gER]、[module Environmental Records]（//tc39.es/ecma262/#sec-module-Environment-Records）和[function Environment-Records][fER]都有自己的GetThisBinding方法。</trans><trans data-src="The [GetThisEnvironment] AO finds the current [running execution context]’s LexicalEnvironment and finds the closest ascendant Environment Record (by iteratively accessing their [[OuterEnv]] properties) which has a _this_ binding (i.e. HasThisBinding returns **true**). ">[GetThisEnvironment]AO找到当前[正在运行的执行上下文]的LexicalEnvironment，并找到最近的具有_this_绑定的上行环境记录（通过迭代访问它们的[[OuterEnv]]属性）（即HasThisBinding返回**true**）。</trans><trans data-src="This process ends in one of the three Environment Record types.">此过程以三种环境记录类型之一结束。</trans><trans data-src="The value of `this` often depends on whether code is in [strict mode](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Strict_mode).">“this”的值通常取决于代码是否处于[严格模式]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/strict_mode）。</trans><trans data-src="The return value of GetThisBinding reflects the value of `this` of the current execution context, so whenever a new execution context is established, `this` resolves to a distinct value. ">GetThisBinding的返回值反映了当前执行上下文的“this”的值，因此无论何时建立新的执行上下文，“this”都会解析为一个不同的值。</trans><trans data-src="This can also happen when the current execution context is modified. ">修改当前执行上下文时也可能发生这种情况。</trans><trans data-src="The following subsections list the five cases where this can happen.">以下小节列出了可能发生这种情况的五种情况。</trans><trans data-src="You can put the code samples in the [AST explorer](//astexplorer.net/) to follow along with specification details.">您可以将代码示例放在[AST资源管理器]（//astexplorer.net/）中，以了解规范详细信息。</trans><trans data-src="### 1. ">### 1. </trans><trans data-src="Global execution context in scripts">脚本中的全局执行上下文</trans><trans data-src="This is script code evaluated at the top level, e.g. directly inside a `<script>`:">这是在顶层评估的脚本代码，例如直接在`<script>`中：</trans><trans data-src="```html">```html格式</trans><trans data-src="<script>"><脚本></trans><trans data-src="// Global context">//全球背景</trans><trans data-src="console.log(this); // ">console.log（this）；//</trans><trans data-src="Logs global object.">记录全局对象。</trans><trans data-src="setTimeout(function(){">setTimeout（函数（）{</trans><trans data-src="console.log("Not global context");">console.log（“非全局上下文”）；</trans><trans data-src="});">});</trans><trans data-src="</script>"></script></trans><trans data-src="```">```</trans><trans data-src="When in the initial global execution context of a script, evaluating `this` causes [GetThisBinding](//tc39.es/ecma262/#sec-global-environment-records-getthisbinding) to take the following steps:">在脚本的初始全局执行上下文中，计算“this”会导致[GetThisBinding]（//tc39.es/ecma262/#sec-global-environment-records-GetThisBinding）采取以下步骤：</trans><trans data-src="> The GetThisBinding concrete method of a global Environment Record _envRec_ […] [does this]:">>全局环境记录_envRec_[…][的GetThisBinding具体方法是这样做的]：</trans><trans data-src=">">></trans><trans data-src="> 1. ">> 1. </trans><trans data-src="Return _envRec_.">返回_envRec_。</trans><trans data-src="[[GlobalThisValue]].">[[GlobalThisValue]]。</trans><trans data-src="The [[GlobalThisValue]] property of a global Environment Record is always set to the host-defined [global object](//tc39.es/ecma262/#sec-global-object), which is reachable via [`globalThis`](//tc39.es/ecma262/#sec-globalthis) (`window` on Web, `global` on Node.js; [Docs on MDN]">全局环境记录的[[GlobalThisValue]]属性始终设置为主机定义的[global object]（//tc39.es/ecma262/#sec-global-object），可以通过[`globalThis`]（//tc39.es/ecma262/#sec-glabalthis）（Web上的`window`，Node.js上的`global；MDN上的Docs）访问该对象</trans><trans data-src="(//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/globalThis)). ">（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/globalThis）。</trans><trans data-src="Follow the steps of [InitializeHostDefinedRealm](//tc39.es/ecma262/#sec-initializehostdefinedrealm) to learn how the [[GlobalThisValue]] property comes to be.">按照[InitializeHostDefinedRealm]（//tc39.es/ecma262/#sec-InitializeHostDefinedRealm）的步骤了解[[GlobalThisValue]]属性是如何形成的。</trans><trans data-src="### 2. ">### 2. </trans><trans data-src="Global execution context in [modules](//developer.mozilla.org/en/docs/Web/JavaScript/Guide/Modules)">[模块]中的全局执行上下文（//developer.mozilla.org/en/docs/Web/JavaScript/Guide/modules）</trans><trans data-src="Modules have been introduced in ECMAScript 2015.">ECMAScript 2015中引入了模块。</trans><trans data-src="This applies to modules, e.g. when directly inside a `<script type="module">`, as opposed to a simple `<script>`.">这适用于模块，例如直接在`<script type=“module”>`中，而不是简单的`<script>`。</trans><trans data-src="When in the initial global execution context of a module, evaluating `this` causes [GetThisBinding](//tc39.es/ecma262/#sec-module-environment-records-getthisbinding) to take the following steps:">在模块的初始全局执行上下文中，计算“this”会导致[GetThisBinding]（//tc39.es/ecma262/#sec-module-environment-records-GetThisBinding）执行以下步骤：</trans><trans data-src="> The GetThisBinding concrete method of a module Environment Record […] [does this]:">>模块Environment Record[…][的GetThisBinding具体方法是这样做的]：</trans><trans data-src=">">></trans><trans data-src="> 1. ">> 1. </trans><trans data-src="Return **undefined**.">返回**未定义**。</trans><trans data-src="In modules, the value of `this` is always `undefined` in the global context. ">在模块中，“this”的值在全局上下文中总是“undefined”。</trans><trans data-src="Modules are implicitly in [strict mode].">模块隐式处于[strict模式]。</trans><trans data-src="### 3. ">### 3. </trans><trans data-src="Entering [eval](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/eval) code">输入[eval]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/eval）代码</trans><trans data-src="There are two kinds of `eval` calls: [direct](//tc39.es/ecma262/#sec-function-calls-runtime-semantics-evaluation) and [indirect](//tc39.es/ecma262/#sec-eval-x). ">有两种“eval”调用：[direct]（//tc39.es/ecma262/#sec-function-calls-runtime-semantics-evaluation）和[indirect]（//tc39.es/ecma262/#sec-eval-x）。</trans><trans data-src="This distinction exists since the ECMAScript 5th edition.">这种区别自ECMAScript第五版以来就一直存在。</trans><trans data-src="* A direct `eval` call usually looks like `eval(`…`);` ">*直接的“eval”调用通常类似于“eval（`…`）；`</trans><trans data-src="or `(eval)(`…`);` ">或`（eval）（`…`）；`</trans><trans data-src="(or `((eval))(`…`);`, ">（或`（（eval））（`…`）；`，</trans><trans data-src="etc.).<">等）<</trans><trans data-src="sup>1</sup> It’s only _direct_ if the call expression fits a narrow pattern.<">sup>1</sup>只有当调用表达式符合窄模式时才是_direct_<</trans><trans data-src="sup>2</sup>">sup>2</trans><trans data-src="* An indirect `eval` call involves calling the function reference `eval` in any other way. ">*间接的“eval”调用包括以任何其他方式调用函数引用“eval”。</trans><trans data-src="It could be `eval?.">可能是“eval？”？。</trans><trans data-src="(`…`)`, `(`…`, eval)(`…`)`, `window.eval(`…`)`, `eval.call(`…`,`…`)`, etc. Given `const aliasEval1 = eval; ">（`…`）`，`（`…'，eval）（`…..）`，`window.eval；</trans><trans data-src="window.aliasEval2 = eval;`, ">window.aliasVal2=eval；`，</trans><trans data-src="it would also be `aliasEval1(`…`)`, `aliasEval2(`…`)`. ">它也可以是“aliasEval1（`…`）”、“aliasEval2（`…'）”。</trans><trans data-src="Separately, given `const originalEval = eval; ">另外，给定`const originalEval=eval；</trans><trans data-src="window.eval = (x) => originalEval(x);`, ">window.eval=（x）=>原始评估（x）；`，</trans><trans data-src="calling `eval(`…`)` would also be indirect.">调用`eval（`…`）`也是间接的。</trans><trans data-src="See [chuckj’s answer to _“(1, eval)('this') vs eval('this') in JavaScript?”_](//stackoverflow.com/a/9107491/196844) and [Dmitry Soshnikov’s ECMA-262-5 in detail – Chapter 2: Strict Mode](//dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode#indirect-eval-call) ([archived](//web.archive.org/web/20210530120958/">请参阅[chuckj对_“（1，eval）（'this'）vs JavaScript中的eval（'sis'）？”_]（//stackoverflow.com/a/9107491/196844）和[Dmitry Soshnikov的ECMA-262-5详细信息-第2章：严格模式]（//dmitrysoshnikov.com/ecmascript/es5-Chapter-2-Strict-Mode#indirect-eval-call）（[存档]（//web.archive.org/web/20210530120958/</trans><trans data-src="https://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode#indirect">https://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode#间接</trans><trans data-src="-eval-call)) for when you might use an indirect `eval()` call.">-eval-call））用于可能使用间接“eval（）”调用的情况。</trans><trans data-src="[PerformEval](//tc39.es/ecma262/#sec-performeval) executes the `eval` code. ">[PerformEval]（//tc39.es/ecma262/#sec-PerformEval）执行“eval”代码。</trans><trans data-src="It creates a new [declarative Environment Record][declarative ER] as its LexicalEnvironment, which is where [GetThisEnvironment] gets the `this` value from.">它创建了一个新的[declarative Environment Record][declatative ER]作为其LexicalEnvironment]，[GetThisEnvironmental]就是从这里获得“this”值的。</trans><trans data-src="Then, if `this` appears in `eval` code, the GetThisBinding method of the Environment Record found by [GetThisEnvironment] is called and its value returned.">然后，如果“this”出现在“eval”代码中，则调用[GetThisEnvironment]找到的Environment Record的GetThisBinding方法并返回其值。</trans><trans data-src="And the created [declarative Environment Record][declarative ER] depends on whether the `eval` call was direct or indirect:">创建的[declarative Environment Record][declaritive ER]取决于“eval”调用是直接调用还是间接调用：</trans><trans data-src="* In a direct eval, it will be based on the current [running execution context]’s LexicalEnvironment.">*在直接eval中，它将基于当前[running execution context]的LexicalEnvironment。</trans><trans data-src="* In an indirect eval, it will be based on the [[GlobalEnv]] property (a [global Environment Record][gER]) of the [Realm Record](//tc39.es/ecma262/#sec-code-realms) which executed the indirect eval.">*在间接评估中，它将基于执行间接评估的[Realm Record]（//tc39.es/ecma262/#sec-code-realms）的[[GlobalEnv]]属性（[global Environment Record][gER]）。</trans><trans data-src="Which means:">这意味着：</trans><trans data-src="* In a direct eval, the `this` value doesn’t change; ">*在直接评估中，“this”值不变；</trans><trans data-src="it’s taken from the lexical scope that called `eval`.">它取自名为eval的词法范围。</trans><trans data-src="* In an indirect eval, the `this` value is the global object (`globalThis`).">*在间接eval中，`this`值是全局对象（`globalThis`）。</trans><trans data-src="_What about `new Function`?_">_“新函数”怎么样_</trans><trans data-src=" — "> — </trans><trans data-src="[`new Function`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/Function) is similar to `eval`, but it doesn’t call the code immediately; ">[`new Function`]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/Function）类似于`eval`，但它不会立即调用代码；</trans><trans data-src="it creates a function. ">它创建了一个函数。</trans><trans data-src="A _this_ binding doesn’t apply anywhere here, except when the function is called, which works normally, as explained in the next subsection.">这里的任何地方都不适用_this_绑定，除非调用函数时，该函数正常工作，如下一小节所述。</trans><trans data-src="### 4. ">### 4. </trans><trans data-src="Entering [function](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions) code">输入[函数]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions）代码</trans><trans data-src="Entering function code occurs when _calling_ a function.">调用函数时会输入函数代码。</trans><trans data-src="There are four categories of syntax to invoke a function.">调用函数有四类语法。</trans><trans data-src="* The [EvaluateCall] AO is performed for these three:<sup>3</sup>">*[EvaluateCall]AO针对这三个对象执行：<sup>3</sup></trans><trans data-src="* [Normal function calls](//tc39.es/ecma262/#sec-function-calls-runtime-semantics-evaluation)">*[普通函数调用]（//tc39.es/ecma262/#sec-function-calls-runtime-semantics-evaluation）</trans><trans data-src="* [Optional chaining calls](//tc39.es/ecma262/#sec-optional-chaining-evaluation)">*[可选链接调用]（//tc39.es/ecma262/#sec-Optional-chaining-evaluation）</trans><trans data-src="* [Tagged templates](//tc39.es/ecma262/#sec-tagged-templates-runtime-semantics-evaluation)">*[标记的模板]（//tc39.es/ecma262/#sec-Tagged-templates-runtime-semantics-evaluation）</trans><trans data-src="* And [EvaluateNew] is performed for this one:<sup>3</sup>">*并且对此执行[EvaluateNew]：<sup>3</sup></trans><trans data-src="* [Constructor invocations](//tc39.es/ecma262/#sec-new-operator-runtime-semantics-evaluation)">*[构造函数调用]（//tc39.es/ecma262/#sec-new-operator-runtime-semantics-evaluation）</trans><trans data-src="The actual function call happens at the [Call] AO, which is called with a _thisValue_ determined from context; ">实际的函数调用发生在[call]AO，它是通过上下文确定的_thisValue_进行调用的；</trans><trans data-src="this argument is passed along in a long chain of call-related calls. ">这个参数通过一长串与调用相关的调用传递。</trans><trans data-src="[Call] calls the [\[\[Call\]\]][Call-c] internal slot of the function. ">[Call]调用函数的[\[\[Call\]\]][Call-c]内部插槽。</trans><trans data-src="This calls [PrepareForOrdinaryCall](//tc39.es/ecma262/#sec-prepareforordinarycall) where a new [function Environment Record][fER] is created:">这将调用[PrepareForOrdinaryCall]（//tc39.es/ecma262/#sec-preparefordinarycall），其中创建了新的[function Environment Record][fER]：</trans><trans data-src="> A _function Environment Record_ is a declarative Environment Record that is used to represent the top-level scope of a function and, if the function is not an _ArrowFunction_, provides a `this` binding. ">>_function Environment Record_是一个声明性环境记录，用于表示函数的顶级范围，如果函数不是_ArrowFunction_，则提供“this”绑定。</trans><trans data-src="If a function is not an _ArrowFunction_ function and references `super`, its function Environment Record also contains the state that is used to perform `super` method invocations from within the function.">如果函数不是_ArrowFunction_函数并引用“super”，则其函数Environment Record还包含用于从函数内执行“super“方法调用的状态。</trans><trans data-src="In addition, there is the [[ThisValue]] field in a function Environment Record:">此外，函数Environment Record:</trans><trans data-src="> This is the `this` value used for this invocation of the function.">>这是用于此函数调用的“This”值。</trans><trans data-src="The [NewFunctionEnvironment](//tc39.es/ecma262/#sec-newfunctionenvironment) call also sets the function environment’s [[ThisBindingStatus]] property.">[NewFunctionEnvironment]（//tc39.es/ecma262/#sec-NewFunctionEnvironment）调用还设置函数环境的[[ThisBindingStatus]]属性。</trans><trans data-src="[\[\[Call\]\]][Call-c] also calls [OrdinaryCallBindThis], where the appropriate _thisArgument_ is determined based on:">[\[\[Call\]\]][Call-c]还调用[OrdinaryCallBindThis]，其中适当的_thisArgument_是根据以下内容确定的：</trans><trans data-src="* the original reference,">*原始参考文献，</trans><trans data-src="* the kind of the function, and">*函数的类型，以及</trans><trans data-src="* whether or not the code is in [strict mode].">*无论代码是否处于[严格模式]。</trans><trans data-src="Once determined, a final call to the [BindThisValue] method of the newly created function Environment Record actually sets the [[ThisValue]] field to the _thisArgument_.">一旦确定，对新创建的函数Environment Record的[BindThisValue]方法的最后调用实际上会将[[ThisValue]]字段设置为_thisArgument_。</trans><trans data-src="Finally, this very field is where a [function Environment Record’s][fER] [GetThisBinding](//tc39.es/ecma262/#sec-function-environment-records-getthisbinding) AO gets the value for `this` from:">最后，在这个字段中，[function Environment Record's][fER][GetThisBinding]（//tc39.es/ecma262/#sec-function-Environment-records-GetThisBinding）AO从以下位置获取“this”的值：</trans><trans data-src="> The GetThisBinding concrete method of a function Environment Record _envRec_ […] [does this]:">>Environment Record _envRec_[…][函数的GetThisBinding具体方法实现了这一点]：</trans><trans data-src=">">></trans><trans data-src="> […]  ">> […]  </trans><trans data-src="> 3. ">> 3. </trans><trans data-src="Return _envRec_.">返回_envRec_。</trans><trans data-src="[[ThisValue]].">[[ThisValue]]。</trans><trans data-src="Again, how exactly the _this_ value is determined depends on many factors; ">同样，如何准确地确定_this_值取决于许多因素；</trans><trans data-src="this was just a general overview. ">这只是一个概述。</trans><trans data-src="With this technical background, let’s examine all the concrete examples.">有了这样的技术背景，我们来看看所有具体的例子。</trans><trans data-src="#### [Arrow functions](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)">####[箭头函数]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/functions/Arrow_functions）</trans><trans data-src="When an [arrow function](//tc39.es/ecma262/#sec-runtime-semantics-instantiatearrowfunctionexpression) is evaluated, the [[ThisMode]] internal slot of the function object is set to _“lexical”_ in [OrdinaryFunctionCreate](//tc39.es/ecma262/#sec-ordinaryfunctioncreate).">当计算一个[arrow函数]（//tc39.es/ecma262/#sec-runtime-semantics-instancearrowfunctionexpression）时，函数对象的[[ThisMode]]内部插槽在[OrdinaryFunctionCreate]（//tc39.es/ecma262/#sec-OrdinaryFunctionCreate）中设置为_“词汇”_。</trans><trans data-src="At [OrdinaryCallBindThis], which takes a function _F_:">在[OrdinaryCallBindThis]，它接受一个函数_F_：</trans><trans data-src="> 1. ">>1。</trans><trans data-src="Let _thisMode_ be _F_.">让此模式为_F_。</trans><trans data-src="[[ThisMode]].">[[此模式]]。</trans><trans data-src="> 2. ">>2。</trans><trans data-src="If _thisMode_ is _lexical_, return NormalCompletion(`undefined`).">如果_thisMode_是_lexical_，则返回NormalCompletion（`undefined`）。</trans><trans data-src="> […]">> […]</trans><trans data-src="which just means that the rest of the algorithm which binds _this_ is skipped. ">这仅仅意味着绑定this的算法的其余部分被跳过。</trans><trans data-src="An arrow function does not bind its own _this_ value.">箭头函数不绑定自己的_this_值。</trans><trans data-src="So, what is `this` inside an arrow function, then? ">那么，箭头函数中的“this”是什么呢？</trans><trans data-src="Looking back at [ResolveThisBinding] and [GetThisEnvironment], the [HasThisBinding method explicitly returns **false**](//tc39.es/ecma262/#sec-function-environment-records-hasthisbinding).">回顾[ResolveThisBinding]和[GetThisEnvironment]，[HasThisBind方法显式返回**false**]（//tc39.es/ecma262/#sec-function-environment-records-hashisbinding）。</trans><trans data-src="> The HasThisBinding concrete method of a function Environment Record _envRec_ […] [does this]:">>Environment Record _envRec_[…]函数的HasThisBinding具体方法[这样做]：</trans><trans data-src=">">></trans><trans data-src="> 1. ">> 1. </trans><trans data-src="If _envRec_.">如果_envRec_。</trans><trans data-src="[[ThisBindingStatus]] is _lexical_, return **false**; ">[[ThisBindingStatus]]是_lexical_，返回**false**；</trans><trans data-src="otherwise, return **true**.">否则，返回**true**。</trans><trans data-src="So the outer environment is looked up instead, iteratively. ">因此，外部环境是以迭代方式查找的。</trans><trans data-src="The process will end in one of the three environments that have a _this_ binding.">该过程将在具有_this_绑定的三个环境中的一个环境中结束。</trans><trans data-src="This just means that, **in arrow function bodies, `this` comes from the lexical scope of the arrow function**, or in other words (from [Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?](//stackoverflow.com/a/34361380)):">这只是意味着，**在箭头函数体中，“This”来自箭头函数**的词汇范围，或者换句话说（来自[arrow function vs function declaration/expressions:they Are equivalent/exchangeable？]（//stackoverflow.com/a/34361380））：</trans><trans data-src="> Arrow functions don’t have their own `this` […] binding. ">>箭头函数没有自己的`this`[…]绑定。</trans><trans data-src="Instead, [this identifier is] resolved in the lexical scope like any other variable. ">相反，像任何其他变量一样，[this identifier]在词法范围中解析。</trans><trans data-src="That means that inside an arrow function, `this` [refers] to the [value of `this`] in the environment the arrow function is _defined_ in (i.e. “outside” the arrow function).">这意味着在一个箭头函数中，`this`[指的是]环境中箭头函数的[value of `this`]是_defined_in（即箭头函数的“外部”）。</trans><trans data-src="#### Function [properties](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Property_Accessors)">####函数[属性]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Property_Accessors）</trans><trans data-src="In normal functions (`function`, [methods](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Method_definitions)), `this` is determined **by how the function is called**.">在普通函数（`function`，[methods]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/functions/Method_definitions）中，`this`由函数的调用方式**决定。</trans><trans data-src="This is where these “syntax variants” come in handy.">这就是这些“语法变体”派上用场的地方。</trans><trans data-src="Consider this object containing a function:">考虑此对象包含一个函数：</trans><trans data-src="```js">```js型</trans><trans data-src="const refObj = {">常量refObj={</trans><trans data-src="func: function(){">func:函数（）{</trans><trans data-src="console.log(this);">console.log（this）；</trans><trans data-src="}">}</trans><trans data-src="};">};</trans><trans data-src="```">```</trans><trans data-src="Alternatively:">或者：</trans><trans data-src="```js">```js型</trans><trans data-src="const refObj = {">常量refObj={</trans><trans data-src="func(){">func（）{</trans><trans data-src="console.log(this);">console.log（this）；</trans><trans data-src="}">}</trans><trans data-src="};">};</trans><trans data-src="```">```</trans><trans data-src="In any of the following function calls, the `this` value inside `func` will be `refObj`.<">在以下任何函数调用中，`func`中的`this`值将为`refObj`<</trans><trans data-src="sup>1</sup>">sup>1</sup></trans><trans data-src="* `refObj.func()`">*`refObj.func（）`</trans><trans data-src="* `refObj["func"]()`">*`refObj[“func”]（）`</trans><trans data-src="* `refObj?.">*“引用对象？”？。</trans><trans data-src="func()`">func（）`</trans><trans data-src="* `refObj.func?.">*`refObj.func？。</trans><trans data-src="()`">()`</trans><trans data-src="* ` refObj.func`` `">*`refObj.func```</trans><trans data-src="If the called function is syntactically a property of a base object, then this base will be the “reference” of the call, which, in usual cases, will be the value of `this`. ">如果被调用的函数在语法上是基对象的属性，那么这个基将是调用的“引用”，在通常情况下，它将是`this`的值。</trans><trans data-src="This is explained by the evaluation steps linked above; ">上述评估步骤对此进行了解释；</trans><trans data-src="for example, in `refObj.func()` (or `refObj["func"]()`), the [_CallMemberExpression_](//tc39.es/ecma262/#prod-CallMemberExpression) is the entire expression `refObj.func()`, which consists of the _[MemberExpression]_ `refObj.func` and the [_Arguments_](//tc39.es/ecma262/#prod-Arguments) `()`.">例如，在`refObj.func（）`（或`refObj[“func”]（）`）中，[_CallMemberExpression_]（//tc39.es/ecma262/#prod-CallMemberExpress）是整个表达式`refOvj.funct（）`，它由_[MemberExportion]_`refOb2.func`和[_Arguments_]（//tc39.ec/ecma262/#prod-Arguments）`（）`组成。</trans><trans data-src="But also, `refObj.func` and `refObj` play three roles, each:">此外，`refObj.func`和`refObj`分别扮演三个角色：</trans><trans data-src="* they’re both expressions,">*它们都是表达，</trans><trans data-src="* they’re both references, and">*他们都是推荐人，而且</trans><trans data-src="* they’re both values.">*它们都是价值观。</trans><trans data-src="`refObj.func` as a _value_ is the callable function object; ">`refObj.func`作为_value_是可调用的函数对象；</trans><trans data-src="the corresponding _reference_ is used to determine the `this` binding.">相应的reference用于确定this绑定。</trans><trans data-src="The optional chaining and tagged template examples work very similarly: basically, the reference is everything before the `?.">可选的链接和标记的模板示例的工作原理非常相似：基本上，引用是`？之前的所有内容？。</trans><trans data-src="()`, before the ` `` `, or before the `()`.">（）`、在```之前或在`（）`之前。</trans><trans data-src="[EvaluateCall] uses [IsPropertyReference] of that reference to determine if it is a property of an object, syntactically. ">[EvaluateCall]使用该引用的[IsPropertyReference]从语法上确定它是否是对象的属性。</trans><trans data-src="It’s trying to get the [[Base]] property of the reference (which is e.g. `refObj`, when applied to `refObj.func`; or `foo.bar` when applied to `foo.bar.baz`). ">它试图获取引用的[[Base]]属性（例如，应用于`refObj.func`时为`refObj`；应用于`foo.bar.baz`时为` foo.bar `）。</trans><trans data-src="If it is written as a property, then [GetThisValue] will get this [[Base]] property and use it as the _this_ value.">如果它是作为属性写入的，那么[GetThisValue]将获取这个[[Base]]属性并将其用作_this_值。</trans><trans data-src="Note: [Getters / Setters](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/get) work the same way as methods, regarding `this`. ">注意：[Getters/Setters]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/get）在“this”方面与方法的工作方式相同。</trans><trans data-src="Simple properties don’t affect the execution context, e.g. here, `this` is in global scope:">简单属性不影响执行上下文，例如，此处“this”位于全局范围内：</trans><trans data-src="```js">```js型</trans><trans data-src="const o = {">常数o={</trans><trans data-src="a: 1,">a： 1中，</trans><trans data-src="b: this.a, // Is `globalThis.a`.">b： this.a，//是`globalThis.a`。</trans><trans data-src="[this.a]: 2 // Refers to `globalThis.a`.">[this.a]：2//表示`globalThis.a`。</trans><trans data-src="};">};</trans><trans data-src="```">```</trans><trans data-src="#### Calls without base reference, strict mode, and [`with`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/with)">####没有基本引用、严格模式和[`with`]（//developer.mozilla.org/en/docs/Web/JavaScript/reference/Statements/with）的调用</trans><trans data-src="A call without a base reference is usually a function that isn’t called as a property. ">没有基引用的调用通常是不作为属性调用的函数。</trans><trans data-src="For example:">例如：</trans><trans data-src="```js">```js型</trans><trans data-src="func(); // ">func（）；//</trans><trans data-src="As opposed to `refObj.func();`.">与`refObj.func（）；`相反。</trans><trans data-src="```">```</trans><trans data-src="This also happens when [passing or assigning methods](/q/30486345), or using the [comma operator](/q/35522560). ">当[传递或分配方法]（/q/30486345）或使用[逗号运算符]（/q/35522560）时也会发生这种情况。</trans><trans data-src="This is where the difference between Reference Record and Value is relevant.">这与参考记录和值之间的差异有关。</trans><trans data-src="Note function `j`: following the specification, you will notice that `j` can only return the function object (Value) itself, but not a Reference Record. ">注意函数`j`：按照规范，您会注意到`j`只能返回函数对象（Value）本身，而不能返回Reference Record。</trans><trans data-src="Therefore the base reference `refObj` is lost.">因此，基引用“refObj”将丢失。</trans><trans data-src="```js">```js型</trans><trans data-src="const g = (f) => f(); // ">常数g=（f）=>f（）；//</trans><trans data-src="No base ref.">无基准参考。</trans><trans data-src="const h = refObj.func;">常数h=refObj.func；</trans><trans data-src="const j = () => refObj.func;">常量j=（）=>参考对象.func；</trans><trans data-src="g(refObj.func);">g（参考对象函数）；</trans><trans data-src="h(); // ">h（）；//</trans><trans data-src="No base ref.">无基准参考。</trans><trans data-src="j()(); // ">j（）（）；//</trans><trans data-src="No base ref.">无基准参考。</trans><trans data-src="(0, refObj.func)(); // ">（0，引用对象函数）（）；//</trans><trans data-src="Another common pattern to remove the base ref.">另一个常见的模式是删除基础引用。</trans><trans data-src="```">```</trans><trans data-src="[EvaluateCall] calls [Call] with a _thisValue_ of **undefined** here. ">[EvaluateCall]使用此处未定义**的_thisValue_调用[Call]。</trans><trans data-src="This makes a difference in [OrdinaryCallBindThis] (_F_: the function object; _thisArgument_: the _thisValue_ passed to [Call]):">这使得[OrdinaryCallBindThis]（_F_：函数对象；_thisArgument_：传递给[Call]的_thisValue_）有所不同：</trans><trans data-src="> 1. ">> 1. </trans><trans data-src="Let _thisMode_ be _F_.">让此模式为_F_。</trans><trans data-src="[[ThisMode]].">[[此模式]]。</trans><trans data-src=">">></trans><trans data-src="> […]">> […]</trans><trans data-src=">">></trans><trans data-src="> 5. ">>5。</trans><trans data-src="If _thisMode_ is _strict_, let _thisValue_ be _thisArgument_.">如果_thisMode_为_strict_，则设_thisValue_为_thisArgument_。</trans><trans data-src="> 6. ">> 6. </trans><trans data-src="Else,">否则，</trans><trans data-src=">    1. ">>1。</trans><trans data-src="If _thisArgument_ is **undefined** or **null**, then">如果_thisArgument_是**未定义**或**空**，则</trans><trans data-src=">       1. ">>       1. </trans><trans data-src="Let _globalEnv_ be _calleeRealm_.">让_globalEnv_成为_calleeRealm_。</trans><trans data-src="[[GlobalEnv]].">[[GlobalEnv]]。</trans><trans data-src=">       2. ">>       2. </trans><trans data-src="[…]">[…]</trans><trans data-src=">       3. ">>       3. </trans><trans data-src="Let _thisValue_ be _globalEnv_.">让该值为全局环境。</trans><trans data-src="[[GlobalThisValue]].">[[GlobalThisValue]]。</trans><trans data-src=">    2. ">>    2. </trans><trans data-src="Else,">否则，</trans><trans data-src=">       1. ">>       1. </trans><trans data-src="Let _thisValue_ be ! ">让它成为价值！</trans><trans data-src="[ToObject]\(thisArgument).">[ToObject]\（thisArgument）。</trans><trans data-src=">       2. ">>       2. </trans><trans data-src="NOTE: [ToObject] produces wrapper objects […].">注意：[ToObject]生成包装器对象[…]。</trans><trans data-src=">">></trans><trans data-src="> […]">>[…]</trans><trans data-src="Note: step 5 sets the actual value of `this` to the supplied _thisArgument_ in strict mode — `undefined` in this case. ">注意：步骤5将“this”的实际值设置为严格模式下提供的_thisArgument_，在本例中为“undefined”。</trans><trans data-src="In “sloppy mode”, an undefined or null _thisArgument_ results in `this` being the global _this_ value.">在“sloppy mode”中，未定义或null的_thisArgument_会导致`this`成为全局_this_值。</trans><trans data-src="If [IsPropertyReference] returns **false**, then [EvaluateCall] takes these steps:">如果[IsPropertyReference]返回**false**，则[EvaluateCall]执行以下步骤：</trans><trans data-src="> 1. ">> 1. </trans><trans data-src="Let _refEnv_ be _ref_.">让_refEnv_成为_ref。</trans><trans data-src="[[Base]].">[[基础]]。</trans><trans data-src="> 2. ">> 2. </trans><trans data-src="Assert: _refEnv_ is an Environment Record.">断言：_refEnv_是一个环境记录。</trans><trans data-src="> 3. ">> 3. </trans><trans data-src="Let _thisValue_ be _refEnv_.">设_thisValue_为_refEnv_。</trans><trans data-src="WithBaseObject().">使用BaseObject（）。</trans><trans data-src="This is where an undefined _thisValue_ may come from: _refEnv_.">这是未定义的_thisValue_可能来自于：_refEnv_。</trans><trans data-src="[WithBaseObject](//tc39.es/ecma262/#sec-object-environment-records-withbaseobject)() is always **undefined**, _except_ in [`with`](//tc39.es/ecma262/#sec-with-statement-runtime-semantics-evaluation) statements. ">[WithBaseObject]（//tc39.es/ecma262/#sec-object-environment-records-WithBaseObject）（）总是**未定义**，_except_ in[` with`]（//tc39.es/ecma262/#sec-with-statement-runtime-semantics-evaluation）语句。</trans><trans data-src="In this case, _thisValue_ will be the binding object.">在这种情况下，_thisValue_将是绑定对象。</trans><trans data-src="There’s also [`Symbol.unscopables`](//tc39.es/ecma262/#sec-symbol.unscopables) ([Docs on MDN](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Symbol/unscopables)) to control the `with` binding behavior.">还有[`Symbol.unscopables`]（//tc39.es/ecma262/#sec-Symbol.unscopales）（[MDN上的文档]（//developer.mozilla.org/en/Docs/Web/JavaScript/Reference/Global_Objects/Symbol/unscopable））来控制“with”绑定行为。</trans><trans data-src="To summarize, so far:">总结一下，到目前为止：</trans><trans data-src="```js">```js型</trans><trans data-src="function f1(){">函数f1（）{</trans><trans data-src="console.log(this);">console.log（this）；</trans><trans data-src="}">}</trans><trans data-src="function f2(){">函数f2（）{</trans><trans data-src="console.log(this);">console.log（this）；</trans><trans data-src="}">}</trans><trans data-src="function f3(){">函数f3（）{</trans><trans data-src="console.log(this);">console.log（this）；</trans><trans data-src="}">}</trans><trans data-src="const o = {">常数o={</trans><trans data-src="f1,">f1，</trans><trans data-src="f2,">f2，</trans><trans data-src="[Symbol.unscopables]: {">[符号.不透明度]：{</trans><trans data-src="f2: true">f2：正确</trans><trans data-src="}">}</trans><trans data-src="};">};</trans><trans data-src="f1(); // ">f1（）；//</trans><trans data-src="Logs `globalThis`.">日志`globalThis`。</trans><trans data-src="with(o){">带（o）{</trans><trans data-src="f1(); // ">f1（）；//</trans><trans data-src="Logs `o`.">日志`o`。</trans><trans data-src="f2(); // `">f2（）；//`</trans><trans data-src="f2` is unscopable, so this logs `globalThis`.">f2`是不可操作的，因此它记录了`globalThis`。</trans><trans data-src="f3(); // `">f3（）；//`</trans><trans data-src="f3` is not on `o`, so this logs `globalThis`.">f3`不在`o`上，因此记录`globalThis`。</trans><trans data-src="}">}</trans><trans data-src="```">```</trans><trans data-src="and:">和：</trans><trans data-src="```js">```js型</trans><trans data-src=""use strict";">“使用严格”；</trans><trans data-src="function f(){">函数f（）{</trans><trans data-src="console.log(this);">console.log（this）；</trans><trans data-src="}">}</trans><trans data-src="f(); // ">f（）；//</trans><trans data-src="Logs `undefined`.">日志“未定义”。</trans><trans data-src="// `with` statements are not allowed in strict-mode code.">//严格模式代码中不允许使用`with`语句。</trans><trans data-src="```">```</trans><trans data-src="Note that when evaluating `this`, **it doesn’t matter _where_ a normal function is defined**.">请注意，在计算`this`时，**在哪里定义正规函数并不重要**。</trans><trans data-src="#### [`.call`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/call), [`.apply`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/apply), [`.bind`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/bind), _thisArg_, and primitives">####[`.call`]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/call）、[`.apply`]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/G洛bal_Objects/Functional/apply）、[`绑定`]（[/developer.miozillaorg/en/docs/Web/Java/Reference/Global _Objects/Function/bind）、_thisArg_和原语</trans><trans data-src="Another consequence of step 5 of [OrdinaryCallBindThis], in conjunction with step 6.2 (6.b in the spec), is that a primitive _this_ value is coerced to an object _only_ in “sloppy” mode.">[OrdinaryCallBindThis]的第5步与第6.2步（规范中的6.b）相结合的另一个结果是，在“sloppy”模式下，primitive_this_值被强制为object_only_。</trans><trans data-src="To examine this, let’s introduce another source for the _this_ value: the three methods that override the _this_ binding:<sup>4</sup>">为了研究这一点，让我们介绍_this_值的另一个来源：覆盖_this_绑定的三个方法：<sup>4</sup></trans><trans data-src="* `Function.prototype.apply(thisArg, argArray)`">*`Function.prototype.apply（thisArg，argArray）`</trans><trans data-src="* `Function.prototype.` ">*“函数.原型。”</trans><trans data-src="{`call`, `bind`} `(thisArg, ...args)`">{`调用`，`绑定`}`（thisArg，…args）`</trans><trans data-src="[`.bind`](//tc39.es/ecma262/#sec-function.prototype.bind) creates a bound function, whose _this_ binding is set to _thisArg_ and cannot change again. ">[`.bind`]（//tc39.es/ecma262/#sec-function.prototype.bind）创建了一个绑定函数，其_this_binding设置为_thisArg_，并且不能再次更改。</trans><trans data-src="[`.call`](//tc39.es/ecma262/#sec-function.prototype.call) and [`.apply`](//tc39.es/ecma262/#sec-function.prototype.apply) call the function immediately, with the _this_ binding set to _thisArg_.">[`.call`]（//tc39.es/ecma262/#sec-function.prototype.call）和[`.apply`]（//tc39.es/ecma262/#sec-function.trototype.apply）立即调用函数，将_this_绑定设置为_thisArg_。</trans><trans data-src="`.call` and `.apply` map directly to [Call], using the specified _thisArg_. `.">`.call`和`.apply`使用指定的_thisArg_.`直接映射到[call]。</trans><trans data-src="bind` creates a bound function with [BoundFunctionCreate](//tc39.es/ecma262/#sec-boundfunctioncreate). ">bind`使用[BoundFunctionCreate]（//tc39.es/ecma262/#sec-BoundFunctionCreate）创建绑定函数。</trans><trans data-src="These have _their own_ [\[\[Call\]\] method](//tc39.es/ecma262/#sec-bound-function-exotic-objects-call-thisargument-argumentslist) which looks up the function object’s [[BoundThis]] internal slot.">它们具有_their自己的_[\[\[Call\]\]方法]（//tc39.es/ecma262/#sec-bound-function-exotic-objects-Call-thisagument-argumentslist），用于查找函数对象的[[BoundThis]]内部插槽。</trans><trans data-src="Examples of setting a custom _this_ value:">设置自定义this_值的示例：</trans><trans data-src="```js">```js型</trans><trans data-src="function f(){">函数f（）{</trans><trans data-src="console.log(this);">console.log（this）；</trans><trans data-src="}">}</trans><trans data-src="const myObj = {},">const myObj＝｛｝，</trans><trans data-src="g = f.bind(myObj),">g=f.bind（myObj），</trans><trans data-src="h = (m) => m();">h=（m）=>m（）；</trans><trans data-src="// All of these log `myObj`.">//所有这些日志`myObj`。</trans><trans data-src="g();">g（）；</trans><trans data-src="f.bind(myObj)();">f.bind（myObj）（）；</trans><trans data-src="f.call(myObj);">f.调用（myObj）；</trans><trans data-src="h(g);">h（g）；</trans><trans data-src="```">```</trans><trans data-src="For objects, this is the same in strict and non-strict mode.">对于对象，这在严格模式和非严格模式下是相同的。</trans><trans data-src="Now, try to supply a primitive value:">现在，尝试提供原语值：</trans><trans data-src="```js">```js型</trans><trans data-src="function f(){">函数f（）{</trans><trans data-src="console.log(this);">console.log（this）；</trans><trans data-src="}">}</trans><trans data-src="const myString = "s",">const myString=“s”，</trans><trans data-src="g = f.bind(myString);">g=f.bind（myString）；</trans><trans data-src="g();              // ">g（）；//</trans><trans data-src="Logs `String { "s" }`.">日志`String{“s”}`。</trans><trans data-src="f.call(myString); // ">f.call（myString）；//</trans><trans data-src="Logs `String { "s" }`.">日志`String{“s”}`。</trans><trans data-src="```">```</trans><trans data-src="In non-strict mode, primitives are coerced to their object-wrapped form. It’s the same kind of object you get when calling `Object("s")` or `new String("s")`. ">在非限定模式下，原语被强制为对象映射形式。它与调用“object（“s”）”或“new String（“s）”时获得的对象类型相同。</trans><trans data-src="In strict mode, you _can_ use primitives:">在严格模式下，可以使用基本体（_C）：</trans><trans data-src="```js">```js型</trans><trans data-src=""use strict";">“使用严格”；</trans><trans data-src="function f(){">函数f（）{</trans><trans data-src="console.log(this);">console.log（this）；</trans><trans data-src="}">}</trans><trans data-src="const myString = "s",">const myString=“s”，</trans><trans data-src="g = f.bind(myString);">g=f.bind（myString）；</trans><trans data-src="g();              // ">g（）；//</trans><trans data-src="Logs `"s"`.">日志“s”。</trans><trans data-src="f.call(myString); // ">f.call（myString）；//</trans><trans data-src="Logs `"s"`.">日志“s”。</trans><trans data-src="```">```</trans><trans data-src="Libraries make use of these methods, e.g. jQuery sets the `this` to the DOM element selected here:">库使用这些方法，例如jQuery将“this”设置为此处选择的DOM元素：</trans><trans data-src="```js">```js型</trans><trans data-src="$("button").click(function(){">$（“按钮”）.点击（函数（）{</trans><trans data-src="console.log(this); // ">console.log（this）；//</trans><trans data-src="Logs the clicked button.">记录单击的按钮。</trans><trans data-src="});">});</trans><trans data-src="```">```</trans><trans data-src="#### Constructors, [classes](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), and [`new`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/new)">####构造函数、[classes]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/classes）和[`new`]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/new）</trans><trans data-src="When calling a function as a constructor using the `new` operator, [EvaluateNew] calls [Construct](//tc39.es/ecma262/#sec-construct), which calls the [\[\[Construct\]\] method](//tc39.es/ecma262/#sec-ecmascript-function-objects-construct-argumentslist-newtarget). ">当使用`new`操作符将函数作为构造函数调用时，[EvaluateNew]调用[Construct]（//tc39.es/ecma262/#sec-Construct），后者调用[\[Construct\]\]方法]（//tc39.es/ecma262/#sec-ecmascript-function-objects-Construct-argumentslist-newtarget）。</trans><trans data-src="If the function is a base constructor (i.e. not a `class extends`…`{`…`}`), it sets _thisArgument_ to a new object created from the constructor’s prototype. ">如果函数是基构造函数（即不是`class extends`…`{`…`}`），它会将_thisArgument_设置为从构造函数的原型创建的新对象。</trans><trans data-src="Properties set on `this` in the constructor will end up on the resulting instance object. `">在构造函数中对“this”设置的属性将在结果实例对象上结束`</trans><trans data-src="this` is implicitly returned, unless you explicitly return your own non-primitive value.">这是隐含的返回，除非你明确地返回你自己的非原物价值。</trans><trans data-src="A [`class`](//tc39.es/ecma262/#sec-class-definitions) is a new way of creating constructor functions, introduced in ECMAScript 2015.">[`class`]（//tc39.es/ecma262/#sec-class-definitions）是ECMAScript 2015中引入的创建构造函数的新方法。</trans><trans data-src="```js">```js型</trans><trans data-src="function Old(a){">函数旧（a）{</trans><trans data-src="this.p = a;">这.p=a；</trans><trans data-src="}">}</trans><trans data-src="const o = new Old(1);">const o=新旧（1）；</trans><trans data-src="console.log(o);  // ">控制台.log（o）；//</trans><trans data-src="Logs `Old { p: 1 }`.">日志`Old{p:1}`。</trans><trans data-src="class New{">类新建{</trans><trans data-src="constructor(a){">建造师（a）{</trans><trans data-src="this.p = a;">这.p=a；</trans><trans data-src="}">}</trans><trans data-src="}">}</trans><trans data-src="const n = new New(1);">const n=新建（1）；</trans><trans data-src="console.log(n); // ">控制台.log（n）；//</trans><trans data-src="Logs `New { p: 1 }`.">日志`New{p:1}`。</trans><trans data-src="```">```</trans><trans data-src="Class definitions are implicitly in [strict mode]:">类定义隐式地处于[严格模式]：</trans><trans data-src="```js">```js型</trans><trans data-src="class A{">A级{</trans><trans data-src="m1(){">m1（）{</trans><trans data-src="return this;">返回此；</trans><trans data-src="}">}</trans><trans data-src="m2(){">m2（）{</trans><trans data-src="const m1 = this.m1;">常数m1=this.m1；</trans><trans data-src="console.log(m1());">console.log（m1（））；</trans><trans data-src="}">}</trans><trans data-src="}">}</trans><trans data-src="new A().m2(); // ">新A（）.m2（）；//</trans><trans data-src="Logs `undefined`.">日志“未定义”。</trans><trans data-src="```">```</trans><trans data-src="#### [`super`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/super)">####[`super`]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/super）</trans><trans data-src="The exception to the behavior with `new` is `class extends`…`{`…`}`, as mentioned above. ">如上所述，“new”行为的例外是“class extends”…“{”…“}”。</trans><trans data-src="Derived classes do not immediately set their _this_ value upon invocation; ">派生类在调用时不会立即设置其_this_值；</trans><trans data-src="they only do so once the base class is reached through a series of `super` calls (happens implicitly without an own `constructor`). ">只有通过一系列“super”调用（在没有自己的“constructor”的情况下隐式发生）到达基类时，它们才会这样做。</trans><trans data-src="Using `this` before calling `super` is not allowed.">不允许在调用“super”之前使用“this”。</trans><trans data-src="Calling [`super`](//tc39.es/ecma262/#sec-super-keyword-runtime-semantics-evaluation) calls the super constructor with the _this_ value of the lexical scope (the function Environment Record) of the call. ">调用[`super`]（//tc39.es/ecma262/#sec-super-keyword-runtime-semantics-evaluation）将调用的词法范围（函数Environment Record）的_this_值调用超级构造函数。</trans><trans data-src="[GetThisValue] has a special rule for `super` calls. ">[GetThisValue]对“超级”调用有一个特殊规则。</trans><trans data-src="It uses [BindThisValue] to set `this` to that Environment Record.">它使用[BindThisValue]将“this”设置为该环境记录。</trans><trans data-src="```js">```js型</trans><trans data-src="class DerivedNew extends New{">类DerivedNew扩展了New{</trans><trans data-src="constructor(a, a2){">构造函数（a，a2）{</trans><trans data-src="// Using `this` before `super` results in a ReferenceError.">//在“super”之前使用“this”会导致ReferenceError。</trans><trans data-src="super(a);">超级（a）；</trans><trans data-src="this.p2 = a2;">this.p2=a2；</trans><trans data-src="}">}</trans><trans data-src="}">}</trans><trans data-src="const n2 = new DerivedNew(1, 2);">const n2=新派生新（1,2）；</trans><trans data-src="console.log(n2); // ">控制台.log（n2）；//</trans><trans data-src="Logs `DerivedNew { p: 1, p2: 2 }`.">日志`DerivedNew{p:1，p2:2}`。</trans><trans data-src="```">```</trans><trans data-src="### 5. ">###5。</trans><trans data-src="Evaluating class fields">评估类字段</trans><trans data-src="Instance fields and static fields were introduced in ECMAScript 2022.">ECMAScript 2022中引入了实例字段和静态字段。</trans><trans data-src="When a `class` is evaluated, [ClassDefinitionEvaluation](//tc39.es/ecma262/#sec-runtime-semantics-classdefinitionevaluation) is performed, modifying the [running execution context]. ">计算“类”时，执行[ClassDefinitionEvaluation]（//tc39.es/ecma262/#sec-runtime-semantics-ClassDefinitionEvaluation），修改[running execution context]。</trans><trans data-src="For each [_ClassElement_](//tc39.es/ecma262/#prod-ClassElement):">对于每个[ClassElement_]（//tc39.es/ecm262/#prod ClassElement）：</trans><trans data-src="* if a field is static, then `this` refers to the class itself,">*如果字段是静态的，那么“this”指的是类本身，</trans><trans data-src="* if a field is not static, then `this` refers to the instance.">*如果一个字段不是静态的，那么“this”指的是该实例。</trans><trans data-src="Private fields (e.g. `#x`) and methods are added to a PrivateEnvironment.">私有字段（例如`#x`）和方法被添加到PrivateEnvironment中。</trans><trans data-src="[Static blocks](//github.com/tc39/proposal-class-static-block) are currently a [TC39 stage 3 proposal](//tc39.es/process-document/). ">[静态块]（//github.com/tc39/proposal-class-Static-block）目前是[tc39第3阶段提案]（//tc39.es/process-document/）。</trans><trans data-src="Static blocks work the same as static fields and methods: `this` inside them refers to the class itself.">静态块的工作方式与静态字段和方法相同：它们内部的“this”指的是类本身。</trans><trans data-src="Note that in methods and getters / setters, `this` works just like in normal function properties.">注意，在方法和getters/setter中，“this”的工作方式与普通函数属性中的类似。</trans><trans data-src="```js">```js型</trans><trans data-src="class Demo{">课堂演示{</trans><trans data-src="a = this;">a=此；</trans><trans data-src="b(){">b（）{</trans><trans data-src="return this;">返回此；</trans><trans data-src="}">}</trans><trans data-src="static c = this;">静态c=此；</trans><trans data-src="static d(){">静态d（）{</trans><trans data-src="return this;">返回此；</trans><trans data-src="}">}</trans><trans data-src="// Getters, setters, private modifiers are also possible.">//Getter、setter、private修饰符也是可能的。</trans><trans data-src="}">}</trans><trans data-src="const demo = new Demo;">const演示=新演示；</trans><trans data-src="console.log(demo.a, demo.b()); // ">console.log（demo.a，demo.b（））；//</trans><trans data-src="Both log `demo`.">两个日志都是“demo”。</trans><trans data-src="console.log(Demo.c, Demo.d()); // ">console.log（Demo.c，Demo.d（））；//</trans><trans data-src="Both log `Demo`.">两个日志都是“演示”。</trans><trans data-src="```">```</trans><trans data-src="---">---</trans><trans data-src="<sup>1</sup>: `(o.f)()` is equivalent to `o.f()`; `"><sup>1</sup>：`（o.f）（）`等价于`o.f（）``</trans><trans data-src="(f)()` is equivalent to `f()`. ">（f） （）`等同于`f（）`。</trans><trans data-src="This is explained in [this 2ality article](//2ality.com/2015/12/references.html) ([archived](//web.archive.org/web/20210201161804/">这一点在[这篇2ality文章]（//2ality.com/2015/12/references.html）（[存档]（//web.archive.org/web/2021020111804）中进行了解释/</trans><trans data-src="https://2ality.com/2015/12/references.html">https://2ality.com/2015/12/references.html</trans><trans data-src=")). ">)). </trans><trans data-src="Particularly see [how a _ParenthesizedExpression_ is evaluated](//tc39.es/ecma262/#sec-grouping-operator).">具体请参见[如何计算_ParenthesizedExpression_]（//tc39.es/ecma262/#sec-group-operator）。</trans><trans data-src="<sup>2</sup>: It must be a _[MemberExpression]_, must not be a property, must have a [[ReferencedName]] of exactly **"eval"**, and must be the %eval% intrinsic object."><sup>2</sup>：它必须是_[MemberExpression]_，不能是属性，必须具有正好为**“eval”**的[[ReferencedName]]，并且必须是%eval%内部对象。</trans><trans data-src="<sup>3</sup>: Whenever the specification says _“Let_ ref _be the result of evaluating_ X.”, then _X_ is some expression that you need to find the evaluation steps for. "><sup>3</sup>：每当规范说_“Let_ref_be the result of evaluating_X”时，_X_就是需要找到其求值步骤的一些表达式。</trans><trans data-src="For example, evaluating a _[MemberExpression]_ or [_CallExpression_](//tc39.es/ecma262/#prod-CallExpression) is the result of one of [these algorithms](//tc39.es/ecma262/#sec-property-accessors-runtime-semantics-evaluation). ">例如，计算_[MemberExpression]_或[_CallExpression_]（//tc39.es/ecma262/#prod-CallExpression）是其中一个[这些算法]（//tc39.es/ecma262/#sec-property-accessors-runtime-semantics-evaluation）的结果。</trans><trans data-src="Some of them result in a [Reference Record](//tc39.es/ecma262/#sec-reference-record-specification-type).">其中一些结果导致了一个[Reference Record]（//tc39.es/ecma262/#sec-Reference-Record-specification-type）。</trans><trans data-src="<sup>4</sup>: There are also several other native and host methods that allow providing a _this_ value, notably `Array.prototype.map`, `Array.prototype.forEach`, etc. that accept a _thisArg_ as their second argument. "><sup>4</sup>：还有其他几种本机和主机方法允许提供_this_值，特别是“Array.prototype.map”、“Array.prototype.forEach”等，它们接受_thisArg_作为第二个参数。</trans><trans data-src="Anyone can make their own methods to alter `this` like `(func, thisArg) => func.bind(thisArg)`, `(func, thisArg) => func.call(thisArg)`, etc. As always, [MDN](//developer.mozilla.org/en/docs/Web/JavaScript/Reference) offers great documentation.">任何人都可以使用自己的方法来修改`this`，比如`（func，thisArg）=>func.bind（thisArg`）`，`（funct，thisArg）=>func.call（thisAg）`等。一如既往，[MDN]（//developer.mozilla.org/en/docs/Web/JavaScript/Reference）提供了很好的文档。</trans><trans data-src="---">---</trans><trans data-src="## Just for fun, test your understanding with some examples">##为了好玩，用一些例子来测试你的理解力</trans><trans data-src="For each code snippet, answer the question: _“What is the value of `this` at the marked line? Why?”_.">对于每个代码片段，回答以下问题：_“在标记行处`this`的值是多少？为什么？”_。</trans><trans data-src="_To reveal the answers, click the gray boxes._">_要显示答案，请单击灰色框_</trans><trans data-src="1. ">1. </trans><trans data-src="```js">```js型</trans><trans data-src="if(true){">if（真）{</trans><trans data-src="console.log(this); // ">console.log（this）；//</trans><trans data-src="What is `this` here?">这是什么？</trans><trans data-src="}">}</trans><trans data-src="```">```</trans><trans data-src=">! `">>! `</trans><trans data-src="globalThis`. ">globalThis`。</trans><trans data-src="The marked line is evaluated in the initial global execution context.">标记行在初始全局执行上下文中求值。</trans><trans data-src="2. ">2</trans><trans data-src="">开始代码段：js-console:true--></trans><trans data-src="">语言：lang-js--></trans><trans data-src="const obj = {};">常量对象={}；</trans><trans data-src="function myFun(){">函数myFun（）{</trans><trans data-src="return { // What is `this` here?">return{//这里的`this`是什么？</trans><trans data-src=""is obj": this === obj,">“is obj”：这个===obj，</trans><trans data-src=""is globalThis": this === globalThis">“是全局this”：this===globalThis</trans><trans data-src="};">};</trans><trans data-src="}">}</trans><trans data-src="obj.method = myFun;">obj.method=myFun；</trans><trans data-src="console.log(obj.method());">console.log（obj.method（））；</trans><trans data-src="">结束代码段--></trans><trans data-src=">! `">>! `</trans><trans data-src="obj`. ">对象`。</trans><trans data-src="When calling a function as a property of an object, it is called with the _this_ binding set to the _base_ of the reference `obj.method`, i.e. `obj`.">当调用一个函数作为对象的属性时，它是通过将_this_绑定设置为引用`obj.method`（即`obj`）的_base_来调用的。</trans><trans data-src="3. ">三。</trans><trans data-src="">开始代码段：js-console:true--></trans><trans data-src="">语言：lang-js--></trans><trans data-src="const obj = {">常量对象={</trans><trans data-src="myMethod: function(){">myMethod:function（）{</trans><trans data-src="return { // What is `this` here?">return{//这里的`this`是什么？</trans><trans data-src=""is obj": this === obj,">“is obj”：这个===obj，</trans><trans data-src=""is globalThis": this === globalThis">“是全局this”：this===globalThis</trans><trans data-src="};">};</trans><trans data-src="}">}</trans><trans data-src="},">},</trans><trans data-src="myFun = obj.myMethod;">myFun=obj.myMethod；</trans><trans data-src="console.log(myFun());">console.log（myFun（））；</trans><trans data-src="">结束代码段--></trans><trans data-src=">! `">>! `</trans><trans data-src="globalThis`. ">globalThis`。</trans><trans data-src="Since the function value `myFun` / `obj.myMethod` is not called off of an object, as a property, the _this_ binding will be `globalThis`.">由于函数值“myFun”/“obj.myMethod”不是从对象中调用的，因此作为属性，_this_绑定将为“globalThis”。</trans><trans data-src=">!">>!</trans><trans data-src=">! ">>! </trans><trans data-src="This is different from Python, in which accessing a method (`obj.myMethod`) creates a [bound method object](//docs.python.org/3/library/stdtypes.html#methods).">这与Python不同，在Python中，访问方法（`obj.myMethod`）会创建一个[绑定方法对象]（//docs.Python.org/3/library/stdtypes.html#methods）。</trans><trans data-src="4. ">4</trans><trans data-src="">开始代码段：js-console:true--></trans><trans data-src="">语言：lang-js--></trans><trans data-src="const obj = {">常量对象={</trans><trans data-src="myFun: () => ({ // What is `this` here?">myFun:（）=>（{//这是什么？</trans><trans data-src=""is obj": this === obj,">“is obj”：这个===obj，</trans><trans data-src=""is globalThis": this === globalThis">“是全局this”：this===globalThis</trans><trans data-src="})">})</trans><trans data-src="};">};</trans><trans data-src="console.log(obj.myFun());">console.log（obj.myFun（））；</trans><trans data-src="">结束代码段--></trans><trans data-src=">! `">>! `</trans><trans data-src="globalThis`. ">globalThis`。</trans><trans data-src="Arrow functions don’t create their own _this_ binding. ">箭头函数不会创建自己的_this_绑定。</trans><trans data-src="The lexical scope is the same as the initial global scope, so `this` is `globalThis`.">词法范围与初始全局范围相同，因此`this`是`globalThis`。</trans><trans data-src="5. ">eval`在代码段中被阻止。--></trans><trans data-src="```js">```js型</trans><trans data-src="function myFun(){">函数myFun（）{</trans><trans data-src="console.log(this); // ">console.log（this）；//</trans><trans data-src="What is `this` here?">这是什么？</trans><trans data-src="}">}</trans><trans data-src="const obj = {">常量对象={</trans><trans data-src="myMethod: function(){">myMethod:function（）{</trans><trans data-src="eval("myFun()");">eval（“myFun（）”）；</trans><trans data-src="}">}</trans><trans data-src="};">};</trans><trans data-src="obj.myMethod();">对象myMethod（）；</trans><trans data-src="```">```</trans><trans data-src=">! `">>! `</trans><trans data-src="globalThis`. ">globalThis`。</trans><trans data-src="When evaluating the direct eval call, `this` is `obj`. ">在评估直接eval调用时，`this`是`obj`。</trans><trans data-src="However, in the eval code, `myFun` is not called off of an object, so the _this_ binding is set to the global object.">然而，在eval代码中，“myFun”不会从对象中调用，因此_this_绑定被设置为全局对象。</trans><trans data-src="6. ">6</trans><trans data-src="">开始片段：js-console:true--></trans><trans data-src="">语言：lang-js--></trans><trans data-src="function myFun() {">函数myFun（）{</trans><trans data-src="// What is `this` here?">//这是什么？</trans><trans data-src="return {">返回{</trans><trans data-src=""is obj": this === obj,">“is obj”：这个===obj，</trans><trans data-src=""is globalThis": this === globalThis">“是全局this”：this===globalThis</trans><trans data-src="};">};</trans><trans data-src="}">}</trans><trans data-src="const obj = {};">常量对象={}；</trans><trans data-src="console.log(myFun.call(obj));">console.log（myFun.call（obj））；</trans><trans data-src="">结束代码段--></trans><trans data-src=">! `">>! `</trans><trans data-src="obj`. ">对象`。</trans><trans data-src="The line `myFun.call(obj);` ">行`myFun.call（obj）；`</trans><trans data-src="is invoking the special built-in function `Function.prototype.call`, which accepts `thisArg` as the first argument.">正在调用特殊的内置函数“function.prototype.call`”，该函数接受“thisArg”作为第一个参数。</trans><trans data-src="7. ">7</trans><trans data-src="">开始代码段：js-console:true--></trans><trans data-src="">语言：lang-js--></trans><trans data-src="class MyCls{">类别MyCls{</trans><trans data-src="arrow = () => ({ // What is `this` here?">arrow=（）=>（{//这是什么？</trans><trans data-src=""is MyCls": this === MyCls,">“是MyCls”：这===MyCls，</trans><trans data-src=""is globalThis": this === globalThis,">“is globalThis”：this===全局this，</trans><trans data-src=""is instance": this instanceof MyCls">“is instance”：MyCls的这个实例</trans><trans data-src="});">});</trans><trans data-src="}">}</trans><trans data-src="console.log(new MyCls().arrow());">console.log（新MyCls（）.arrow（））；</trans><trans data-src="">结束代码段--></trans><trans data-src=">! ">>! </trans><trans data-src="It’s the instance of `MyCls`. ">这是“MyCls”的实例。</trans><trans data-src="Arrow functions don’t change the _this_ binding, so it comes from lexical scope. ">箭头函数不会更改_this_绑定，因此它来自词法范围。</trans><trans data-src="Therefore, this is _exactly the same_ as with the class fields mentioned above, like `a = this;`. ">因此，这与上面提到的类字段（如`a=this；`）完全相同。</trans><trans data-src="Try changing it to `static arrow`. ">尝试将其更改为“静态箭头”。</trans><trans data-src="Do you get the result you expect?">你得到你期望的结果了吗？</trans><trans data-src="[BindThisValue]: //tc39.es/ecma262/#sec-bindthisvalue">[绑定此值]：//tc39.es/ecma262/#sec-BindThisValue</trans><trans data-src="[Call]: //tc39.es/ecma262/#sec-call">[调用]：//tc39.es/ecm262/#sec调用</trans><trans data-src="[Call-c]: //tc39.es/ecma262/#sec-ecmascript-function-objects-call-thisargument-argumentslist">[调用-c]：//tc39.es/ecma262/#sec-ecmascript-function-objects-Call-this-argument-arguments列表</trans><trans data-src="[declarative ER]: //tc39.es/ecma262/#sec-declarative-environment-records">[声明性ER]：//tc39.es/ecma262/#sec-declarative-environment-records</trans><trans data-src="[EvaluateCall]: //tc39.es/ecma262/#sec-evaluatecall">[评估呼叫]：//tc39.es/ecma262/#sec-EvaluateCall</trans><trans data-src="[EvaluateNew]: //tc39.es/ecma262/#sec-evaluatenew">[评估新]：//tc39.es/ecm262/#sec评估新</trans><trans data-src="[fER]: //tc39.es/ecma262/#sec-function-environment-records">[fER]：//tc39.es/ecma262/#sec-function-environment-records</trans><trans data-src="[GetThisEnvironment]: //tc39.es/ecma262/#sec-getthisenvironment">[GetThisEnvironment]：//tc39.es/ecm262/#sec获取此环境</trans><trans data-src="[GetThisValue]: //tc39.es/ecma262/#sec-getthisvalue">[GetThisValue]：//tc39.es/ecma262/#sec-GetThisValue</trans><trans data-src="[gER]: //tc39.es/ecma262/#sec-global-environment-records">[gER]：//tc39.es/ecma262/#sec-global-environment-records</trans><trans data-src="[IsPropertyReference]: //tc39.es/ecma262/#sec-ispropertyreference">[IsPropertyReference]：//tc39.es/ecma262/#sec-IsPropertyReference</trans><trans data-src="[MemberExpression]: //tc39.es/ecma262/#prod-MemberExpression">[成员表达式]：//tc39.es/ecma262/#prod-MemberExpression</trans><trans data-src="[OrdinaryCallBindThis]: //tc39.es/ecma262/#sec-ordinarycallbindthis">[OrdinaryCallBindThis]：//tc39.es/ecma262/#sec-OrdinaryCallBindThis</trans><trans data-src="[ResolveThisBinding]: //tc39.es/ecma262/#sec-resolvethisbinding">[ResolveThisBinding]：//tc39.es/ecma262/#sec-ResolveThisBinding</trans><trans data-src="[running execution context]: //tc39.es/ecma262/#running-execution-context">[运行执行上下文]：//tc39.es/ecma262/#running-execution-context</trans><trans data-src="[strict mode]: //tc39.es/ecma262/#sec-strict-mode-code">[严格模式]：//tc39.es/ecma262/#sec-strict-mode-code</trans><trans data-src="[ToObject]: //tc39.es/ecma262/#sec-toobject">[ToObject]：//tc39.es/ecma262/#sec-ToObject</trans>

编辑摘要

取消

2

另一种常见情况：使用调用EventHandler这设置为当前目标事件。未来可以包括这三项提案：绑定运算符::,明确这一点,这论点反思.DOM 0事件属性，如onclick（单击）同样值得注意的是：JS代码被隐式包装在一个具有范围文件一个用于点击的元素，引起混乱;这是具有属性的元素。
——塞巴斯蒂安·西蒙
2021年11月21日7:32
三

@LRDPRDX这个答案包含了这但没有人真正需要这在全球范围内，具有已弃用，评估不鼓励，应在任何地方使用严格模式等。剩下的就是对象方法（）电话方法具有对象作为这如果方法是一个功能或方法；func（）电话函数没有任何这;.绑定,.调用、和.应用可用于绑定这明确地；箭头函数不获取这结合。类：在静态事物中，这指类本身，在非状态事物中指正在创建的实例。就是这样。
——塞巴斯蒂安·西蒙
2022年2月8日21:51

添加评论 |

更正小错误
在不改变含义的情况下阐明含义
添加相关资源或链接
始终尊重作者的意图
不使用编辑回复作者

使用反勾号或波浪线创建代码围栏~
```
像这样
```
添加语言标识符以突出显示代码
```蟒蛇
定义函数（foo）：
打印（foo）
```
在段落之间放置返回
对于换行符，在末尾添加2个空格
_斜体_或**粗体**
将代码缩进4个空格
反勾号逃逸`喜欢_so_`
通过在行首放置>进行报价
建立链接（尽可能使用https）
<https://example.com>
[示例](https://example.com)
<a href=“https://example.com“>示例</a>

格式帮助»
回答帮助»

堆栈溢出上的Collections™

“this”关键字是如何工作的，应该在什么时候使用？

答案