JavaScript 的 this 指向 - JavaScript 编程网

在JavaScript中，this关键字的指向是一个经常引起混淆的概念，因为它会根据函数的调用方式和上下文环境的不同而变化。以下是决定this值的主要规则：

全局上下文或非严格模式下的函数：

在全局执行环境中（不在任何函数内），this指向全局对象。在浏览器中，全局对象是window；在Node.js中，是global。

非严格模式下，普通函数调用中的this也指向全局对象。但在严格模式(use strict)下，它会被设置为undefined。

函数调用：

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

const obj = {
  func: function() {
    console.log(this); // 这里的this指向obj
  }
};
obj.func();

如果函数是独立调用或者通过函数引用调用（非对象方法），this在非严格模式下指向全局对象，在严格模式下是undefined。

function standaloneFunc() {
  console.log(this);
}
standaloneFunc(); // 非严格模式下输出window或global，严格模式下输出undefined

构造函数： 使用new关键字调用的函数（即构造函数），this指向新创建的实例对象。

function Person(name) {
  this.name = name;
}
const person = new Person('Alice');
console.log(person.name); // 输出"Alice"

箭头函数： 箭头函数不绑定自己的this，它会捕获其所在上下文的this值，并且不可被修改。这意味着箭头函数中的this总是与其定义时所在的作用域保持一致。

const obj = {
  normalFunc: function() {
    setTimeout(function() {
      console.log(this); // 这里的this不再指向obj，而是全局对象或undefined
    }, 100);
  },
  arrowFunc: function() {
    setTimeout(() => {
      console.log(this); // 这里的this仍指向obj，因为箭头函数不绑定自己的this
    }, 100);
  }
};
obj.normalFunc(); // 输出全局对象或undefined
obj.arrowFunc(); // 输出obj

.call(), .apply(), 和 .bind()方法：这些方法可以显式地设置函数调用时this的值。

function greet() {
  console.log(this.name);
}

const person = { name: 'Bob' };
greet.call(person); // 输出"Bob"

理解this的这些规则对于编写JavaScript代码至关重要，尤其是在处理对象和函数时。

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。

真诚赞赏，手留余香

赞赏