和this开启一场代码世界之旅

2023-09-24 18:31:15

this 简介

在 JavaScript 中，this 关键词代表当前执行代码的上下文对象，通常是一个对象。这个对象可以是全局对象、函数对象、或者构造函数创建的对象实例。this 的值在运行时被确定，并且在函数执行期间保持不变。

this 的值如何确定？

全局上下文中的 this ：在全局上下文中，this 指向全局对象（window 对象）。例如，在浏览器中，全局对象是 window 对象，因此在全局上下文中，this 等于 window。
函数上下文中的 this ：在函数上下文中，this 指向函数所属的对象。如果一个函数不是作为对象的方法被调用，则 this 指向全局对象（window 对象）。
构造函数上下文中的 this ：当使用 new 调用构造函数时，this 指向新创建的对象实例。

this 的用法

访问对象属性和方法 ：在对象的方法中，this 可以用来访问对象属性和方法。例如，以下代码中，this.name 指向对象 person 的 name 属性：

const person = {
  name: 'John',
  getName: function() {
    return this.name;
  }
};

person.getName(); // "John"

调用其他方法 ：在对象的方法中，this 可以用来调用其他方法。例如，以下代码中，this.greet() 方法调用了对象 person 的 greet() 方法：

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // "Hello, my name is John"

事件处理程序中的 this ：在事件处理程序中，this 指向触发事件的元素。例如，以下代码中，this 指向触发 click 事件的按钮元素：

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

button.addEventListener('click', function() {
  console.log(this); // <button>...</button>
});

this 的注意事项

箭头函数中的 this ：箭头函数没有自己的 this，它继承外层函数的 this。因此，在箭头函数中，this 的值与外层函数相同。
bind()、call() 和 apply() 方法 ：bind()、call() 和 apply() 方法可以改变函数的 this 值。例如，以下代码中，bind() 方法将函数 greet() 的 this 值绑定到对象 person：

const person = {
  name: 'John'
};

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

const boundGreet = greet.bind(person);

boundGreet(); // "Hello, my name is John"