JS中的this

在 JavaScript 中，this 的指向取决于函数的调用方式。不同的调用方式下，this 的指向也不同。

全局上下文中的 this

在全局作用域（非严格模式下），this 默认指向全局对象。浏览器中，全局对象是 window。

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

函数中的 this

非严格模式下的普通函数

在非严格模式下，普通函数中的 this 默认指向全局对象（window）。如果函数是作为对象的方法调用的，则 this 指向调用该方法的对象。

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

showThis();  // 非严格模式下输出: window

严格模式下的普通函数

在严格模式下，普通函数中的 this 会是 undefined，而不是全局对象。

'use strict';
function showThis() {
  console.log(this);
}

showThis();  // 严格模式下输出: undefined

方法中的 this

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

const obj = {
  name: 'AA',
  showThis: function() {
    console.log(this);
  }
};

obj.showThis();  // 输出: obj 对象本身

构造函数中的 this

当使用构造函数创建对象时，this 指向新创建的实例对象。

function Person(name) {
  this.name = name;
}

const person = new Person('AA');
console.log(person.name);  // 输出: AA

箭头函数中的 this

箭头函数中的 this 与普通函数不同，它会捕获上下文的 this 值（即定义箭头函数时所在的词法环境的 this），并不会自己绑定 this。

const obj = {
  name: 'AA',
  showThis: function() {
    const arrowFunc = () => {
      console.log(this);
    };
    arrowFunc();
  }
};

obj.showThis();  // 输出: obj 对象本身

arrowFunc 箭头函数中的 this 继承了 showThis 方法中的 this，所以指向 obj 对象。

DOM 事件处理程序中的 this

当作为 DOM 事件处理程序时，this 指向触发事件的 DOM 元素。

const button = document.querySelector('button');

button.addEventListener('click', function() {
  console.log(this);  // 输出: 触发点击事件的按钮元素
});

总结

• 全局上下文: this 默认指向全局对象（浏览器中是 window）。

• 普通函数: 非严格模式下，this 指向全局对象；严格模式下，this 为 undefined。

• 方法调用: this 指向调用方法的对象。

• 构造函数: this 指向新创建的实例对象。

• 箭头函数: this 继承自定义时所在的词法环境。

• DOM 事件处理程序: this 指向触发事件的 DOM 元素。