《现代JavaScript高级教程》JavaScript函数上下文和this关键字

╰半夏微凉° 2023-10-13 21:22 14阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">点击在线阅读，体验更好</a></th> 
   <th><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">链接</a></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">现代JavaScript高级小册</a></strong></td> 
   <td><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">深入浅出Dart</a></strong></td> 
   <td><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">现代TypeScript高级小册</a></strong></td> 
   <td><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
 </tbody> 
</table>

## 函数上下文和this关键字 ##

函数是 JavaScript 中最重要的概念之一，理解函数的定义和调用方式涉及到多个知识点，特别是函数的上下文，即函数中的 `this` 关键字，是前端面试中必考的知识点。本文将介绍函数上下文、箭头函数以及修正 `this` 指向的方法。

### 1. 函数作为独立函数调用 ###

考虑以下脚本：

function printThis() {
      return this;
    }
    
    console.log(printThis() === window);

输出结果：

*  在严格模式下：`false`
 *  在非严格模式下：`true`

解析： 当函数被作为独立函数调用时，`this`指向不同，严格模式和非严格模式下有区别。在严格模式下，`this`指向`undefined`；在非严格模式下，`this`指向全局对象 `window`。

### 2. 函数作为对象方法调用 ###

考虑以下脚本：

function printThis() {
      return this;
    }
    
    const obj = { printThis };
    console.log(obj.printThis() === obj);

输出结果：`true`

解析： 当函数被作为对象的方法调用时，其中的 `this` 指向该对象本身。在上述代码中，`printThis` 函数被作为 `obj` 对象的一个方法调用，所以 `printThis` 中的 `this` 指向 `obj`，而不是全局对象 `window`。

### 3. 构造函数调用 ###

考虑以下脚本：

function Dog() {
      this.name = 'Puppy';
    }
    
    const dog = new Dog();
    console.log(dog.name);

输出结果：`Puppy`

解析： 在这段代码中，`Dog` 函数被当作构造函数调用，通过 `new` 关键字创建实例时，`this` 关键字会指向新创建的对象。因此，`this.name = 'Puppy'` 将在新创建的对象上设置 `name` 属性，最后打印出 `Puppy`。

### 4. 构造函数返回对象 ###

考虑以下脚本：

const puppet = {
      rules: false
    };
    
    function Emperor() {
      this.rules = true;
      return puppet;
    }
    
    const emperor = new Emperor();
    console.log(emperor.rules);

输出结果：`false`

解析： 尽管构造函数的 `this` 关键字指向通过构造函数构建的实例，但如果构造函数中使用 `return` 语句返回一个对象，则返回的对象将取代通过构造函数创建的实例。在上述代码中，`Emperor` 构造函数返回了 `puppet` 对象，因此 `emperor` 实例实际上就是 `puppet` 对象，其中

的 `rules` 属性值为 `false`。

### 5. 函数调用时使用 `call` 或 `apply` ###

考虑以下脚本：

输出结果：

*  使用 `call`：`Hello, Alice!`
 *  使用 `apply`：`Hello, Alice!`

解析： 通过使用函数的 `call` 或 `apply` 方法，可以显式地指定函数执行时的上下文，即 `this` 的值。在上述代码中，`greet.call(person)` 和 `greet.apply(person)` 中的 `this` 都被绑定到了 `person` 对象，所以打印出的结果都是 `Hello, Alice!`。

### 6. 箭头函数的上下文 ###

箭头函数的 `this` 绑定与常规函数不同，箭头函数没有自己的 `this` 值，而是捕获了封闭上下文的 `this` 值。考虑以下脚本：

输出结果：`Hello, Bob!`

解析： 在这段代码中，箭头函数 `arrowFunc` 没有自己的 `this` 值，而是捕获了封闭上下文 `greet` 函数中的 `this` 值，即 `obj` 对象。所以 `this.name` 实际上指向 `obj.name`，打印出 `Hello, Bob!`。

这就是 JavaScript 函数上下文和 `this` 关键字的一些重要概念和用法。