Base Class 慎用箭头函数

在项目中，child继承base的时候，需要重新修改base.fun的逻辑，但是有些情况下面并不是简单的覆盖，而是在base.fun的逻辑基础上进行加工处理。

刚开始接触es6的时候也许都遇到过，child重写了base的fun函数，就是不起作用

      先来段正常的代码，看下面的逻辑，这段代码在chrome中可以直接运行

     

class Base {
    static classMethod() {
        console.log('Base classMethod')
    }
    constructor() {
        this.key = 'Base';
        console.log('Base constructor')
    }
    fun() {
        console.log('Base fun')
    }
}
class Child extends Base {
    static classMethod() {
        super.classMethod();
        console.log('Child classMethod')
    }
    constructor() {
        super();
        this.key = 'Child';
        console.log('Child constructor')
    }
    fun() {
        super.fun();
        console.log('Child fun')
    }
}
new Child().fun();

 　　运行结果：

　　

       但是我们常常会遇到,设计base的时候，fun是给组件事件使用的，需要通过箭头函数进行this绑定，所以就给base.fun加了个箭头函数。

       这个写法chrome不支持，需要借助babel转义，通过在线的https://babeljs.cn/repl/进行在线转下，在chrome进行运行

 　　

       运行结果：

　　

        神奇的事情发生了，只打印了Base fun，那我们就需要仔细看下转义的代码。

　　

　　发现Base.fun在constructor的时候变成了this.fun，Child.fun在obj.__proto__.fun在原型链上，所以Base.fun的优先寻找到

      执行new Child().__proto__.fun()的时候也报错了，Base.prototype.fun也不存在了

　　所以在写业务的时候，不需要考虑这些问题，如果说是写的基础类，组件类，就要慎用箭头函数了