三、函数上下文和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。

带你读《现代Javascript高级教程》三、函数上下文和this关键字（2）https://developer.aliyun.com/article/1349695?groupCode=tech_library