JavaScript 中的 this

雨点打透心脏的1/2处 2023-09-29 15:33 45阅读 0赞

JavaScript 中的**this**关键字通常是该语言初学者的困惑之源。这种混淆部分源于这样一个事实，即JavaScript 中的**this**与其他语言（如 Java 或 Python 中的 self）的处理方式不同。为了理解 JavaScript 中更高级的概念或读写 JavaScript 代码，  
理解**这一点是绝对必要的，这就是为什么我们将在本文中试图阐明这在 JavaScript 中的真正含义。**  
我们将在本文的大部分时间里参考 JavaScript 中的函数来学习**这**方面的知识，这就是为什么我们首先要了解一个关于 JavaScript 函数的事实，它可以帮助我们更好地做到这一点。

this 和函数

JavaScript 中的函数本质上是对象。像对象一样，它们可以分配给变量，传递给其他函数并从函数返回。就像对象一样，它们也有自己的属性。这些属性之一是**this**。**this**  
存储的值是 JavaScript 程序的当前执行上下文。因此，当在函数内部使用时，**this**的值将根据该函数的定义方式、调用方式和默认执行上下文而改变。**注意：****这**始终包含对**单个**对象的引用，该对象定义了当前代码行的执行上下文。  
  
在我们深入研究 this 在函数中的行为之前，让我们看看它在函数之外的行为：  
**全局上下文：**  
在函数外部编写的一行代码被称为属于**全局上下文**，并且在这个全局上下文中 this 的值是与全局对象相同。  
例如，如果您打开浏览器控制台并在其中输入以下行，然后按回车/回车键：  
console.log(this)  
您会看到 Window 对象正在登录到控制台。这是因为全局对象在浏览器运行时（例如 Chrome 的运行时）是 Window 对象。  
然而，在函数内部，全局上下文可能不再存在，函数可能有自己定义的上下文，因此 this 的值不同。为了理解这一点，让我们把注意力转向函数：  
函数，在 JavaScript 中可以通过多种方式调用：

1.函数调用

2.方法调用

3. 构造函数调用

#### this与函数调用： ####

函数调用是指使用函数名称或表达式调用函数的过程，该表达式计算为函数对象，后跟一组打开和关闭的第一个括号（包含括号表示我们正在要求 JavaScript 引擎立即执行该函数）。  
例如：

*  JavaScript

<table style="width:581.938px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;width:264.453px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;!DOCTYPE html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;script&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>doSomething() { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// do something here</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>// function invocation</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>doSomething();&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/script&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/html&gt;</code></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**doSomething函数里面的this**，如果是通过上面的函数调用来调用的话，它的值就是全局对象，也就是浏览器环境中的**window对象：**

*  JavaScript

<table style="width:581.938px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;width:470.016px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;!DOCTYPE html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;script&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>doSomething(a, b) { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// adds a propone property to the Window object</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.propone = </code><code>"test value"</code><code>;&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>// function invocation</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>doSomething();&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>document.write(window.propone);</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/script&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/html&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**输出：**

test value

然而，这并非总是如此。如果 doSomething() 函数在**严格**模式下运行，它将记录**undefined**而不是全局窗口对象。这是因为，在严格模式下（由行 : **'use strict';**表示）， this 的默认值，对于任何函数对象都设置为未定义而不是全局对象。  
例如 ：

*  JavaScript

<table style="width:581.938px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;width:544.016px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;!DOCTYPE html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;script&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>doSomething() { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// enable the strict mode</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'use strict'</code><code>;&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// logs undefined</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.write(</code><code>this</code> <code>+ </code><code>'&lt;br&gt;'</code><code>)&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>innerFunction() { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// Also logs undefined, indicating that&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// strict mode permeates to inner function scopes</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.write(</code><code>this</code><code>)&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>innerFunction();</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>// function invocation</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>doSomething();&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/script&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/html&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**输出：**

undefined
    undefined

#### this与方法调用： ####

函数，当定义为对象的字段或属性时，称为方法。

*  JavaScript

<table style="width:581.938px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;width:635.25px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;!DOCTYPE html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;script&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let person = { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name : </code><code>"John"</code><code>,</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>age : 31,</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>logInfo : </code><code>function</code><code>() { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.write(</code><code>this</code><code>.name + </code><code>" is "</code> <code>+ </code><code>this</code><code>.age + </code><code>" years old "</code><code>);</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// logs John is 31 years old</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>person.logInfo()&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/html&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**输出：**

John is 31 years old

在上面的代码示例中，**logInfo()**是**person 对象**的一个方法，我们使用对象调用模式来调用它。  
也就是说，我们使用[属性访问器][Link 1]来访问作为对象一部分的方法。  
这样的调用需要使用一个表达式来计算我们的方法所属的对象，以及一个属性访问器（例如：**person.logInfo()**），后跟一组左括号和右括号。  
了解函数调用和方法调用的不同之处至关重要。  
这反过来将帮助我们理解**this**上下文在任何给定函数中可能是什么，因为在每个调用中，**this**是不同的。  
在使用属性访问器调用的此类方法中，**this**将具有调用对象的值，即**this**将指向与属性访问器一起使用以进行调用的对象。  
例如 ：

*  JavaScript

<table style="width:581.938px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;width:347.453px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;!DOCTYPE html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;script&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let add = { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>num : 0,</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>calc : </code><code>function</code><code>() { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// logs the add object</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.write(</code><code>this</code> <code>+ </code><code>' '</code><code>)&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.num</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>+= 1;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.num;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>// logs 1</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>document.write(add.calc() + </code><code>'&lt;br&gt;'</code><code>);&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>// logs 2</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>document.write(add.calc());&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/script&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/html&gt;</code></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**输出：**

[object Object] 1
    [object Object] 2

在上面的例子中， calc() 是 add 对象的一个方法，因此使用第 9 行和第 10 行的方法调用规则来调用。  
我们知道，当使用方法调用模式时，**this**的值被设置为调用目的。  
在这个 calc() 方法中，this 的值被设置为调用对象，在我们的例子中是 add。因此我们可以成功访问 add 的 num 属性。  
然而，让我们看看一个主要的混淆点：在嵌套在对象方法中的函数中  
会发生什么**？**

*  JavaScript

<table style="width:581.938px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;width:338.453px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;!DOCTYPE html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;script&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let add = { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>num : 0,</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>calc : </code><code>function</code><code>() { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// logs the add object</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.write(</code><code>this</code> <code>+ </code><code>' '</code><code>)&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>innerfunc() { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.num += 1;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// logs the window object</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.write(</code><code>this</code> <code>+ </code><code>' '</code><code>);&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.num</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} </code><code>return</code> <code>innerfunc();</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>};</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>// logs NaN</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>document.write(add.calc() + </code><code>'&lt;br&gt;'</code><code>);&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>// logs NaN</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>document.write(add.calc());</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/script&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/html&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**输出：**

[object Object] [object Window] NaN
    [object Object] [object Window] NaN

让我们试着理解刚刚发生的事情。  
当我们在第 14 行和第 15 行调用 calc() 时，我们正在使用方法调用，它将**this**设置为添加到 calc() 中。这可以使用第 4 行中的 log 语句来验证。  
但是，使用简单的函数调用（第 11 行）从 calc() 方法中调用 innerfunc()。这意味着，在 innerfunc() 内部，this 被设置为没有 num 属性的全局对象，因此获得了 NaN 输出。  
我们如何解决这个问题？我们如何从嵌套函数内部的外部方法中保留 this 的值？  
一种解决方案是将外部函数的**this**值分配给要在嵌套函数中使用的变量，如下所示：

*  JavaScript

<table style="width:581.938px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;width:478.219px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;!DOCTYPE html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;script&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let add = { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>num : 0,</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>calc : </code><code>function</code><code>() { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// logs the add object</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.write(</code><code>this</code> <code>+ </code><code>' '</code><code>)&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// using thisreference variable to&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// store the value of this</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>thisreference = </code><code>this</code><code>;&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>innerfunc()</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// using the variable to access the</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// context of the outer function</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>thisreference.num += 1;&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// logs the add object</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.write(thisreference + </code><code>' '</code><code>);</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>thisreference.num;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>innerfunc();</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>// logs 1</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>document.write(add.calc() + </code><code>'&lt;br&gt;'</code><code>);&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>// logs 2</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>document.write(add.calc());&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/script&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/html&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**输出：**

[object Object] [object Object] 1
    [object Object] [object Object] 2

此问题的其他解决方案包括使用 bind()、call() 或 apply()，我们将很快研究这些方法。

#### this 与构造函数调用： ####

当 new 关键字后跟一个函数名和一组左括号和右括号（带或不带参数）时，将执行构造函数调用。  
例如： let person1= new People('John', 21);  
这里，person1 是新创建的对象，People 是用于创建该对象的构造函数。  
构造函数调用是在 JavaScript 中创建对象的几种方法之一。  
当我们将 new 关键字与函数名结合使用时，究竟会发生什么？  
通过这种方法创建对象基本上涉及五个步骤。让我们用下面的例子来研究它们：

*  JavaScript

<table style="width:581.938px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;!DOCTYPE html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;html&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;script&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>let people = </code><code>function</code><code>(name, age) { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.name = name;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.age = age;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.displayInfo = </code><code>function</code><code>() { </code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.write(</code><code>this</code><code>.name + </code><code>" is "</code> <code>+ </code><code>this</code><code>.age + </code><code>" years old"</code><code>);</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>let person1</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>= </code><code>new</code> <code>people(</code><code>'John'</code><code>, 21);</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&nbsp;</code>&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>// logs John is 21 years old</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>person1.displayInfo();</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/script&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/body&gt;</code></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#273239;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><code>&lt;/html&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**输出：**

John is 21 years old

*  首先，创建一个空对象，它是与 new 一起使用的函数名称的实例（即：people(name, age)）。换句话说，它将对象的构造函数属性设置为调用中使用的函数(people(name, age))。  
    
 *  然后，它将构造函数(people)的原型链接到新创建的对象，从而保证这个对象可以继承构造函数的所有属性和方法  
    
 *  然后，在这个新创建的对象上调用构造函数。如果我们回想方法调用，我们会看到类似。因此，在构造函数内部，**this**获取调用中使用的新创建对象的值。  
    
 *  最后，将创建的对象及其所有属性和方法集返回给 person1

[Link 1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors