JavaScript中的this基本问题实例小结

当在JavaScript语言中使用关键字this时，它指向的是当前执行代码的对象。而谁才是当前执行代码的对象，这是本文要探讨的关键问题。

1. 全局上下文中的this

在全局上下文中，this关键字指向的是全局对象。在浏览器中，全局对象是window对象，故在浏览器中，this指向window对象。

console.log(this === window); // true

2. 函数上下文中的this

在函数上下文中，this指向的是函数的调用者。如果函数没有显式地绑定到一个对象上，则this指向的是window对象。使用箭头函数时，this继承自父级上下文。

示例1：函数调用时，this指向全局对象。

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

foo(); // true

示例2：函数在对象中调用时，this指向操作该函数的对象。

const obj = {
  name: "JavaScript",
  printName() {
    console.log(this.name);
  }
};

obj.printName(); // JavaScript

3. 事件处理函数中的this

事件处理函数中，this指向触发事件的元素。可以通过bind等方法将this绑定到其他对象上。

示例3：按钮被点击后，事件处理函数中的this指向该按钮元素。

<button id="myBtn">Click Me!</button>

const btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
  console.log(this === btn);
}); // true

以上是JavaScript中this的基本问题的实例小结，关于this还有很多需要深入研究的地方，比如使用call/apply/bind等方法显式地设置函数的上下文。在实际开发中要注意理解上下文的含义，正确使用this关键字。