[JavaScript] this 关键字

全局作用域

在浏览器中,如果在全局作用域下使用 this,它将指向 window 对象;在 Node.js 环境中,则指向 global 对象。

方法调用

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

const obj = {
  name: "Alice",
  greet: function () {
    console.log(`Hello, ${this.name}`);
  }
};
obj.greet(); // Hello, Alice

构造函数

使用 new 关键字调用函数创建新实例时,this 会指向新创建的对象。

function Person(name) {
  this.name = name;
}
const alice = new Person("Alice");
console.log(alice.name); // Alice

箭头函数

箭头函数没有自己的 this 绑定,它会从父作用域继承 this 值。

const obj = {
  name: "Alice",
  greet: () => {
    console.log(`Hello, ${this.name}`); // undefined, 因为箭头函数的 this 指向全局对象
  }
};
obj.greet();

绑定方法

.call(), .apply(), .bind() 这些方法可以显式地设置函数执行时 this 的值

const person = {
  name: "Alice"
};

function greet() {
  console.log(`Hello, ${this.name}`);
}

greet.call(person); // Hello, Alice

总结

this 关键字的值取决于函数如何被调用,而不是如何被定义。掌握 this 的行为可以帮助你更好地控制代码中的上下文,并避免常见的陷阱。

posted @ 2024-10-03 22:03  Himmelbleu  阅读(5)  评论(0编辑  收藏  举报