JavaScript this 学习笔记

this 是 JavaScript 中一个重要的关键字，它在不同的上下文中具有不同的含义。使用 this 关键字可以访问到当前对象的属性和方法。

作为对象的方法

当函数作为对象的方法被调用时，this 关键字指向该对象。

javascriptCopy Code
const person = {
  firstName: "John",
  lastName : "Doe",
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

console.log(person.fullName()); // 输出 "John Doe"

作为普通函数

当函数作为普通函数被调用时，this 关键字默认指向全局对象 Window。

javascriptCopy Code
function myFunction() {
  console.log(this); // 输出 Window 对象
}

myFunction();

在事件处理程序中

在事件处理程序中，this 关键字指向触发事件的元素。

htmlCopy Code
<button onclick="console.log(this)">点击我</button>

使用 call() 或 apply()

可以使用 call() 或 apply() 方法显式地设置函数调用时的 this 关键字所指向的对象。

javascriptCopy Code
const person1 = {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const person2 = {
  firstName: "John",
  lastName : "Doe"
}

console.log(person1.fullName.call(person2)); // 输出 "John Doe"

箭头函数中的 this

在箭头函数中，this 关键字始终指向函数定义时的对象，而不是被调用时的对象。

javascriptCopy Code
const person = {
  firstName: "John",
  lastName : "Doe",
  fullName: () => {
    return `${this.firstName} ${this.lastName}`;
  }
}

console.log(person.fullName()); // 输出 "undefined undefined"

以上是 this 关键字在 JavaScript 中的一些常见用法和注意点。需要注意的是，在不同的情况下，this 关键字所指向的对象是不同的，因此需要根据上下文来灵活使用。