深入理解JavaScript中this关键字的工作机制

嘿，能看到你在深挖JavaScript里的this真的很棒——这玩意儿确实是前端新手（甚至不少老鸟）容易踩坑的点，但你已经get到不少核心逻辑了！我来帮你把这些知识点梳理得更清晰，再补充些关键场景：

1. this是动态绑定的：执行时才确定指向 #

你说得完全没错：每个函数在执行时，都会重新确定this的指向，它和函数定义的位置无关，只和调用方式挂钩。

• 最基础的规则：this指向调用该函数的对象。比如：
  • 普通函数直接调用（非严格模式下），this默认指向浏览器的window对象（Node.js环境里是global）；
  • 如果函数作为某个对象的方法被调用，this就指向这个对象本身。

举个直观的代码例子：

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

// 直接调用，this指向window
showThis(); 

const myObj = {
  title: "My Object",
  showThis: showThis
};
// 作为对象方法调用，this指向myObj
myObj.showThis(); 

2. 箭头函数：没有自己的this绑定 #

你提到的箭头函数特性非常关键：箭头函数不会重新定义自己的this，它的this是直接继承自定义时所在的外层作用域，而不是调用时的对象。

• 这意味着箭头函数没法通过call/apply/bind来修改this指向——因为它根本没有属于自己的this绑定。

对比普通函数和箭头函数的差异：

const team = {
  name: "Dev Team",
  regularSayName: function() {
    console.log(this.name); // this指向team，输出"Dev Team"
  },
  arrowSayName: () => {
    console.log(this.name); // this继承自外层作用域（window），无name属性则输出undefined
  }
};

team.regularSayName(); // Dev Team
team.arrowSayName(); // undefined（非严格模式下）

补充几个高频场景的this指向 #

构造函数中的this #

当用new关键字调用函数时，this会指向新创建的实例对象：

function Player(name) {
  this.name = name; // this指向新生成的Player实例
}

const lisa = new Player("Lisa");
console.log(lisa.name); // Lisa

用call/apply/bind强制绑定this #

这三个方法可以手动指定函数执行时的this指向，适合需要灵活切换上下文的场景：

function greet() {
  console.log(`Hi, ${this.username}`);
}

const user = { username: "Mike" };
greet.call(user); // Hi, Mike

内容的提问来源于stack exchange，提问作者Jay Jeong