后浪：浅析箭头函数带来的坑

2024-02-14 23:48:20

后浪：浅析箭头函数带来的坑

箭头函数是ES6中新引入的一种语法糖，它可以简化函数的定义，使其更简洁。箭头函数的定义如下：

(parameters) => expression

其中，parameters是函数的参数，expression是函数的表达式。箭头函数的返回值由表达式决定，如果表达式为单行，则可以省略return。

箭头函数与普通函数的主要区别在于，箭头函数没有自己的this，它会继承外层函数的this。这在某些情况下可能会导致问题。

举个例子：

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

  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  sayName() {
    //箭头函数没有自己的this，它会继承外层函数的this
    const printName = () => {
      console.log(`My name is ${this.name}`);
    };
    printName();
  }
}

const dog = new Dog('旺财');
dog.sayName(); // My name is undefined

在上面的示例中，Dog类的sayName()方法使用了一个箭头函数printName()来打印狗的名字。由于箭头函数没有自己的this，它会继承外层函数的this，也就是Dog实例的this。然而，Dog实例的this并没有name属性，因此printName()方法打印出了undefined。

为了避免这个问题，我们可以使用普通函数来代替箭头函数。普通函数有自己的this，不会继承外层函数的this。

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  sayName() {
    //普通函数有自己的this，不会继承外层函数的this
    function printName() {
      console.log(`My name is ${this.name}`);
    }
    printName();
  }
}

const dog = new Dog('旺财');
dog.sayName(); // My name is 旺财