箭头函数

引用资料

平时在工作当中会经常使用箭头函数与，尤其是react全家桶的开发者。但是在某些情况下使用箭头函数是有问题的。

定义对象方法

const calculator = {
    array: [1, 2, 3],
    sum: () => {
        console.log(this === window); // => true
        return this.array.reduce((result, item) => result + item);
    }
};

console.log(this === window); // => true


// Throws "TypeError: Cannot read property 'reduce' of undefined"

calculator.sum();

定义原型方法

function Cat(name) {
    this.name = name;
}

Cat.prototype.sayCatName = () => {
    console.log(this === window); // => true
    return this.name;
};

const cat = new Cat('Mew');
cat.sayCatName(); // => undefined

定义事件回调函数

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    console.log(this === window); // => true
    this.innerHTML = 'Clicked button';
});

定义构造函数

const Message = (text) => {
    this.text = text;
};
// Throws "TypeError: Message is not a constructor"
const helloMessage = new Message('Hello World!');

总结：

箭头函数自己本身并没有this，而是直接使用定义箭头函数本身时的作用域所有的this，也就是在定义时直接.bind(this)

function a () {
  this.a = 3
  return () => {
    console.log(this.a)
  }
}

console.log(new a()()) // 3
console.log(a()()) // undefined