javascript - “ this”关键字如何工作？(How does the “this” keyword work?)

Question

I have noticed that there doesn't appear to be a clear explanation of what the this keyword is and how it is correctly (and incorrectly) used in JavaScript on the Stack Overflow site.

(我注意到，对于Stack Overflow网站上的JavaScript， this关键字是什么以及如何正确（以及错误地）使用this关键字似乎没有明确的解释。)

I have witnessed some very strange behaviour with it and have failed to understand why it has occurred.

(我目睹了它的一些非常奇怪的行为，并且未能理解为什么会发生它。)

How does this work and when should it be used?

(怎么this时候它应该被用来工作？)

  ask by Maxim Gershkovich translate from so

Answer 1

I recommend reading Mike West 's article Scope in JavaScript ( mirror ) first.

(我建议先阅读Mike West的文章Scope in JavaScript （ 镜像 ）。)

It is an excellent, friendly introduction to the concepts of this and scope chains in JavaScript.

(这是一个很好的，友好的介绍的概念， this在JavaScript和范围链。)

Once you start getting used to this , the rules are actually pretty simple.

(一旦你开始习惯this的规则实际上是相当简单的。)

The ECMAScript 5.1 Standard defines this :

(ECMAScript 5.1标准 this定义：)

§11.1.1 The this keyword (§11.1.1的this关键字)

The this keyword evaluates to the value of the ThisBinding of the current execution context

(this关键字的值为当前执行上下文的ThisBinding的值)

ThisBinding is something that the JavaScript interpreter maintains as it evaluates JavaScript code, like a special CPU register which holds a reference to an object.

(JavaScript解释器在评估JavaScript代码时会维护ThisBinding，例如特殊的CPU寄存器，其中包含对对象的引用。)

The interpreter updates the ThisBinding whenever establishing an execution context in one of only three different cases:

(每当仅在以下三种情况之一中建立执行上下文时，解释器就会更新ThisBinding：)

1. Initial global execution context (1.初始全局执行上下文)

This is the case for JavaScript code that is evaluated at the top-level, eg when directly inside a <script> :

(在顶级代码中评估的JavaScript代码就是这种情况，例如，直接在<script>内部时：)

<script>
  alert("I'm evaluated in the initial global execution context!");

  setTimeout(function () {
      alert("I'm NOT evaluated in the initial global execution context.");
  }, 1);
</script>

When evaluating code in the initial global execution context, ThisBinding is set to the global object, window ( §10.4.1.1 ).

(在初始的全局执行上下文中评估代码时，ThisBinding设置为全局对象window （第10.0.4.1.1节 ）。)

Entering eval code (输入评估码)

• …by a direct call to eval() ThisBinding is left unchanged;

  (…直接调用eval() Binding保持不变；)

  it is the same value as the ThisBinding of the calling execution context ( §10.4.2 (2)(a)).

  (它与调用执行上下文的ThisBinding （第10.4.2 （2）（a）节）的值相同。)

• …if not by a direct call to eval()

  (…如果不是通过直接调用eval())
  ThisBinding is set to the global object as if executing in the initial global execution context ( §10.4.2 (1)).

  (将这个Binding设置为全局对象，就像在初始全局执行上下文中执行一样（第10.4.2 （1）节）。)

§15.1.2.1.1 defines what a direct call to eval() is.

(§15.1.2.1.1定义了对eval()的直接调用。)

Basically, eval(...) is a direct call whereas something like (0, eval)(...) or var indirectEval = eval; indirectEval(...);

(基本上， eval(...)是直接调用，而类似(0, eval)(...)或var indirectEval = eval; indirectEval(...);) var indirectEval = eval; indirectEval(...); is an indirect call to eval() .

(是对eval()的间接调用。)

See chuckj's answer to (1, eval)('this') vs eval('this') in JavaScript?

(请参阅chuckj对JavaScript中的 （1，eval）（'this'）vs eval（'this'） 的回答 ？)

and Dmitry Soshnikov's ECMA-262-5 in detail.

(和Dmitry Soshnikov的ECMA-262-5详细信息。)

Chapter 2. Strict Mode.

(第2章严格模式。)

for when you might use an indirect eval() call.

(当您可能使用间接eval()调用时。)

Entering function code (输入功能码)

This occurs when calling a function.

(调用函数时会发生这种情况。)

If a function is called on an object, such as in obj.myMethod() or the equivalent obj["myMethod"]() , then ThisBinding is set to the object ( obj in the example; §13.2.1 ).

(如果在对象上调用了函数，例如obj.myMethod()或等效的obj["myMethod"]() ，则ThisBinding设置为对象（示例中为obj ；第13.2.1节 ）。)

In most other cases, ThisBinding is set to the global object ( §10.4.3 ).

(在大多数其他情况下，ThisBinding设置为全局对象（第10.4.3节 ）。)

The reason for writing "in most other cases" is because there are eight ECMAScript 5 built-in functions that allow ThisBinding to be specified in the arguments list.

(之所以写“在大多数情况下”，是因为有八个ECMAScript 5内置函数可以在参数列表中指定ThisBinding。)

These special functions take a so-called thisArg which becomes the ThisBinding when calling the function ( §10.4.3 ).

(这些特殊功能采用了一个所谓的thisArg ，当调用该函数时，它会成为ThisBinding（第10.4.3节 ）。)

These special built-in functions are:

(这些特殊的内置函数是：)

• Function.prototype.apply( thisArg, argArray )
• Function.prototype.call( thisArg [ , arg1 [ , arg2, ... ] ] )
• Function.prototype.bind( thisArg [ , arg1 [ , arg2, ... ] ] )
• Array.prototype.every( callbackfn [ , thisArg ] )
• Array.prototype.some( callbackfn [ , thisArg ] )
• Array.prototype.forEach( callbackfn [ , thisArg ] )
• Array.prototype.map( callbackfn [ , thisArg ] )
• Array.prototype.filter( callbackfn [ , thisArg ] )

In the case of the Function.prototype functions, they are called on a function object, but rather than setting ThisBinding to the function object, ThisBinding is set to the thisArg .

(对于Function.prototype函数，它们是在函数对象上调用的，而不是将ThisBinding设置为函数对象，而是将ThisBinding设置为thisArg 。)

In the case of the Array.prototype functions, the given callbackfn is called in an execution context where ThisBinding is set to thisArg if supplied;

(对于Array.prototype函数，将在执行上下文中调用给定的callbackfn ，其中，如果提供，则将ThisBinding设置为thisArg 。)

otherwise, to the global object.

(否则，转到全局对象。)

Those are the rules for plain JavaScript.

(这些是纯JavaScript的规则。)

When you begin using JavaScript libraries (eg jQuery), you may find that certain library functions manipulate the value of this .

(当您开始使用JavaScript库（例如jQuery）时，您可能会发现某些库函数会操纵this</code