在不同的调用上下文中，this 的值是如何变化的？

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

在 JavaScript 中， this 是一个非常重要的关键字，它的值依赖于函数被调用的上下文。理解 this 的行为对于编写清晰和可预测的代码至关重要。以下是对 this 的详细解析。

1. this 的基本概念

this 是一个上下文相关的关键字，代表函数执行时的上下文环境。它指向调用该函数的对象。在不同的情况下，this 的指向可能会有所不同。

1.1 this 的指向

this 的值在以下几种情况下有所不同：

• 全局上下文：在全局范围内，this 指向全局对象（在浏览器中为 window，在 Node.js 中为 global）。

  console.log(this === window); // 输出: true (在浏览器环境中)
  

• 函数调用：在一个普通函数中调用 this，指向全局对象（非严格模式下）。在严格模式下，this 是 undefined。

  function show() {
    console.log(this);
  }
  
  show(); // 在非严格模式下输出: global object (window)
  

• 对象方法：当一个函数作为对象的方法调用时，this 指向调用该方法的对象。

  const obj = {
    name: 'Alice',
    greet: function() {
      console.log(`Hello, ${this.name}`);
    }
  };
  
  obj.greet(); // 输出: Hello, Alice
  

• 构造函数：在构造函数中，this 会指向新创建的对象。

  function Person(name) {
    this.name = name;
  }
  
  const person = new Person('Bob');
  console.log(person.name); // 输出: Bob
  

• call、apply 和 bind 方法：可以显式地改变 this 的指向。

  function show() {
    console.log(this.name);
  }
  
  const obj = { name: 'Charlie' };
  
  show.call(obj); // 输出: Charlie
  show.apply(obj); // 输出: Charlie
  
  const boundShow = show.bind(obj);
  boundShow(); // 输出: Charlie
  

2. 箭头函数中的 this

箭头函数不绑定自己的 this，它会从外部（词法）作用域中获取 this。这使得在回调函数或者嵌套函数中使用 this 时可以避免混淆。

示例代码

const obj = {
  name: 'David',
  greet: function() {
    console.log(`Hello, ${this.name}`);
    
    const innerFunction = () => {
      console.log(`Hi again, ${this.name}`);
    };
    
    innerFunction();
  }
};

obj.greet();
// 输出:
// Hello, David
// Hi again, David

在这个例子中，内部的箭头函数 innerFunction 使用了外部函数 greet 的 this 值，因此 this.name 始终指向 David。

3. 严格模式与 this

在严格模式下，this 的行为与非严格模式有所不同：

• 在普通函数中，this 将是 undefined。
• 在对象方法中，this 仍然指向调用该方法的对象。

示例代码

'use strict';

function show() {
  console.log(this);
}

show(); // 输出: undefined

4. 总结

• this 是上下文相关的关键字，其值依赖于函数调用的方式。
• 在全局范围内，this 指向全局对象；在普通函数中，它指向调用该函数的对象，而在构造函数中，它指向新创建的对象。
• 箭头函数不绑定自己的 this，而是继承外部上下文的 this。
• 在严格模式下，this 的行为会变得更加严格，普通函数内部会指向 undefined。

理解并掌握 this 的用法是 JavaScript 编程的重要部分，可以帮助开发者编写出更清晰、更可预测的代码。