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也不存在了

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