没有返回值的this，它是好是坏？

普通函数

普通函数的使用方式分为两种：

• 函数声明：使用function来声明函数，例如：

function greet() {
  console.log("Hello world!");
}

• 函数表达式：使用箭头函数来定义函数，例如：

const greet = () => {
  console.log("Hello world!");
};

在这两种情况下，this的值都是指向window对象。这是因为普通函数和箭头函数都是全局作用域中的成员，而window对象是全局作用域的默认对象。

对象方法

对象方法是定义在对象内部的函数。当调用对象方法时，this的值指向该对象本身。例如：

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

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

在这个例子中，this的值指向person对象，因为greet方法是在person对象内部定义的。

事件处理函数

事件处理函数是当某个事件发生时被触发的函数。当事件处理函数被调用时，this的值指向触发该事件的元素。例如：

const button = document.getElementById("myButton");

button.addEventListener("click", function() {
  console.log(this); // 输出按钮元素
});

在这个例子中，当按钮被点击时，事件处理函数就会被触发，this的值指向按钮元素。

call、apply和bind方法

call、apply和bind方法可以用来改变函数的this值。

• call方法：call方法接收两个参数，第一个参数是this值，第二个参数是一个参数列表。当函数被调用时，this值将被设置为第一个参数，而函数的参数将被设置为第二个参数。例如：

const person = {
  name: "John Doe"
};

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

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

在这个例子中，greet函数被调用时，this值被设置为person对象，因此输出为"Hello, my name is John Doe"。

• apply方法：apply方法与call方法类似，但它接收一个参数数组作为第二个参数。例如：

const person = {
  name: "John Doe"
};

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

greet.apply(person, ["Jane Doe"]); // Hello, my name is Jane Doe

在这个例子中，greet函数被调用时，this值被设置为person对象，而函数的参数被设置为["Jane Doe"]数组。因此，输出为"Hello, my name is Jane Doe"。

• bind方法：bind方法返回一个新的函数，该函数的this值被绑定到第一个参数。例如：

const person = {
  name: "John Doe"
};

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

const boundGreet = greet.bind(person);

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

在这个例子中，boundGreet函数被调用时，this值被设置为person对象，因此输出为"Hello, my name is John Doe"。

在类中使用this

在类中，this关键字指向类的实例。例如：

class Person {
  constructor(name) {
    this.name = name;
  }

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

const person = new Person("John Doe");

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

在这个例子中，当Person类被实例化时，this值被设置为person对象。因此，当greet方法被调用时，this值指向person对象，输出为"Hello, my name is John Doe"。

总结

this关键字是JavaScript中一个非常重要的概念，它表示当前执行的函数或方法所属的对象。this的值根据不同的执行环境而变化。在普通函数和箭头函数中，this的值指向window对象。在对象方法中，this的值指向该对象本身。在事件处理函数中，this的值指向触发该事件的元素。call、apply和bind方法可以用来改变函数的this值。在类中，this关键字指向类的实例。

希望这篇博文对大家理解this关键字有所帮助。如果您有任何疑问，请随时留言提问。