JS箭头函数和普通函数中的this

2024-01-18 03:41:11

箭头函数中的this

箭头函数（又称lambda函数）是ES6中引入的一种新的函数语法。箭头函数没有自己的this，它总是继承其外层函数的this值。这使得箭头函数非常适合用于事件处理程序和回调函数，因为您可以轻松地访问外层函数的this值。

// 外层函数
const outerFunction = function() {
  console.log(this); // {name: "John Doe"}

  // 箭头函数作为事件处理程序
  const handleClick = () => {
    console.log(this); // {name: "John Doe"}
  };

  // 将箭头函数作为回调函数传递
  setTimeout(() => {
    console.log(this); // {name: "John Doe"}
  }, 1000);
};

// 创建一个对象并将其作为外层函数的this值
const object = {
  name: "John Doe"
};

// 调用外层函数
outerFunction.call(object);

在上面的示例中，箭头函数handleClick()和setTimeout()中的回调函数都继承了outerFunction的this值，因此它们都能够访问object对象的name属性。

普通函数中的this

普通函数（也称为传统函数）具有自己的this关键字。普通函数的this值取决于函数的调用方式。如果普通函数作为对象的方法调用，那么它的this值将指向该对象。如果普通函数作为独立函数调用，那么它的this值将指向window对象（在严格模式下，this的值为undefined）。

// 普通函数作为对象的方法
const person = {
  name: "John Doe",
  greet: function() {
    console.log(this.name); // "John Doe"
  }
};

// 调用普通函数作为对象的方法
person.greet();

// 普通函数作为独立函数
const greet = function() {
  console.log(this); // window对象或undefined（严格模式）
};

// 调用普通函数作为独立函数
greet();