javascript Class中的箭头函数和普通函数

前言

本篇文章记录ES6 class类中的箭头函数方法和普通函数方法的区别，以及proposal-class-fields提案带来的一些变化。

ES6的Class中 箭头函数方法和普通函数方法的区别

class DemoClass {
    constructor() {
        this.name = 'yrPang';
        this.getNameArrow = () => {
            console.log(this.name);
        };
        this.getNameFunc = function() {
            console.log(this.name);
        };
    }

    getName() {
        console.log(this.name);
    }
}

let o = new DemoClass();
o.getNameArrow(); // 'yrPang'
o.getNameFunc(); // 'yrPang'
o.getName(); // 'yrPang'

let a = o.getNameArrow;
let b = o.getNameFunc;
let c = o.getName;
a(); // 'yrPang'
b(); // TypeError: Cannot read property 'name' of undefined
c(); // TypeError: Cannot read property 'name' of undefined

从上面的代码可以看出，箭头函数方法中的this不受调用时上下文的影响，而普通函数方法会收到影响。

原因理解

1. 箭头函数没有上下文，箭头函数内部的this指向箭头函数定义时所在函数的上下文；

2. 这可以很好的应用在类似 clc.addEventListener('click', button.click); 这样的场景下，免去使用 bind()的麻烦；

3. 另外箭头函数中的this指向的是实例而不是原型对象，因为在使用new进行实例化的时候会先将构造函数内的this指向新对象再执行构造函数内的代码。

其它

在上面的定义中，类块中的方法属于原型对象，构造函数中的方法属于实例。此外，不允许在类块中给原型添加原始值或对象，而下面的提案带来的变化。

proposal-class-fields提案带来的一些变化

class DemoClass {
    constructor() {
        this.name = 'yrPang';
    }

    // 新东西
    x;
    y = 22;
    getName = () => {
        console.log(this.name);
    }
}

这个提案中允许了像上面那样在类块中定义变量，这样也就允许了我们在类块中使用箭头函数定义方法。不过，这样定义的方法和属性依然是属于实例的，箭头函数中的this也和上文有同样的表现。

参考资料

1. JavaScript之class中的箭头函数和普通函数

2. ES6 Class Methods 定义方式的差异