一文讲清楚js中的this指向

在JavaScript中,this 关键字是一个指向函数执行上下文的指针,它的值取决于函数是如何被调用的。理解this的行为是理解JavaScript中面向对象编程的关键。以下是this在不同情况下的表现:

  1. 全局上下文:在全局执行上下文中(任何函数体外部),this指向全局对象。在浏览器中,全局对象是window
console.log(this === window); // 在浏览器中,这将打印true
  1. 函数上下文
    • 普通函数调用:在非严格模式下,未绑定的函数中的this指向全局对象。在严格模式下,this的值是undefined
    • 方法调用:当函数作为对象的方法被调用时,this指向该对象。
    • 构造函数:在构造函数中,this指向新创建的对象实例。
    • 箭头函数:箭头函数没有自己的this,它会捕获其所在上下文的this值。
function foo() {
  console.log(this);
}

let obj = {
  bar: function() {
    console.log(this);
  }
};

foo(); // 非严格模式下,打印全局对象;严格模式下,打印undefined
obj.bar(); // 打印对象obj

let arrowFunc = () => console.log(this);
arrowFunc(); // 箭头函数中的this与其定义时的上下文相同,在全局中定义,因此打印全局对象
  1. 显式绑定:可以使用callapplybind方法显式地设置this的值。
function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const person = { name: 'Alice' };

greet.call(person); // 显示 "Hello, my name is Alice"
  1. DOM事件处理器:当函数作为DOM事件处理程序时,this通常指向触发事件的元素。
button.addEventListener('click', function() {
  console.log(this); // this指向button元素
});