JavaScript this指向绑定方式及不适用情况详解

在JavaScript中，this指向非常重要。它在不同的上下文环境中有不同的绑定方式。本篇文章将详细介绍this指向的各种绑定方式，以及this指向不适用的情况。

this的绑定方式

全局上下文中的this

在全局上下文中，this指向全局对象（如浏览器中的 window），因为函数的定义是在全局上下文中完成的。例如：

function logThis() {
  console.log(this);
}
logThis(); // 输出 window

函数调用中的this

当函数作为对象的属性被调用时，函数内的this指向该对象。例如：

const obj = {
  prop: 42,
  logProp() {
    console.log(this.prop);
  }
};
obj.logProp(); // 输出 42

当函数不作为对象的属性被调用时，函数内的this指向全局对象。例如：

function logThis() {
  console.log(this);
}
logThis(); // 输出 window

显示绑定的this

通过使用函数的 call、apply 或 bind 方法，可以显式地绑定函数内的 this 到指定的对象上。例如：

const objA = { prop: 'A' };
const objB = { prop: 'B' };
function logThis() {
  console.log(this.prop);
}
logThis.call(objA); // 输出 A
logThis.apply(objB); // 输出 B
const logPropFromObjA = logThis.bind(objA);
logPropFromObjA(); // 输出 A

构造函数中的this

当通过 new 关键字创建对象时，JavaScript 引擎会创建一个新的空对象并把 this 绑定到该对象。例如：

function MyObject(prop) {
  this.prop = prop;
}
const myObject = new MyObject('Hello, World!');
console.log(myObject.prop); // 输出 Hello, World!

箭头函数中的this

在箭头函数中，this用法与函数调用中的 this 相同，但箭头函数的 this 绑定是在函数定义时确定的，而不是在运行时确定的。例如：

const logThis = () => {
  console.log(this);
}
logThis(); // 输出 window

不适用情况

在事件处理程序中的this不适用

当在事件处理程序中使用 this，this 将指向触发事件的元素，而非绑定到事件处理程序的对象。例如：

<button id="my-button">Click me!</button>

const button = document.querySelector('#my-button');
button.addEventListener('click', function() {
  console.log(this); // 输出 <button>
});

在定时器中的this不适用

在定时器中使用 this，this 指向的是全局对象而不是定义时所在的对象。例如：

const myObject = {
  prop: 'Hello, World!',
  logProp() {
    setTimeout(function() {
      console.log(this.prop);
    }, 1000);
  }
};
myObject.logProp(); // 输出 undefined

解决该问题的办法是使用箭头函数：

const myObject = {
  prop: 'Hello, World!',
  logProp() {
    setTimeout(() => {
      console.log(this.prop);
    }, 1000);
  }
};
myObject.logProp(); // 输出 Hello, World!