JS基础之继承

相对于ES5继承，ES6继承就简单的多，关于继承机制的设计思想，请参见Javascript继承机制的设计思想

1. 在ES5中。我们可以用以下方法解决继承的问题

   function Super() {}
   Super.prototype.getNumer = function() {
       return 1
   }
   
   function Sub()
   let sub = new Sub()
   // Object.create方法接受传入一个作为新创建对象的原型的对象，创建一个拥有指定原型和若干个指定属性的对象
   Sub.prototype = Object.create(Super.prototype, {
       constructor: {
           value: Sub,
           enumerable: false,
           writable: true.
           configurable: true
       }
   })
   

   以上继承实现思路就是将子类的原型设置为父类的原型

2. 但在ES6中，我们可以简单的通过class语法（语法糖）解决这个问题：

   class MyDate extends Date {
       test() {
           return this.getTime()
       }
   }
   let myDate = new MyDate()
   myDate.test()
   

   但是 ES6 不是所有浏览器都兼容，所以我们使用 Babel 来编译这段代码。结果：
   

   这是因为 JS 底层有限制，如果不是由 Date 构建出来的实例的话，是不能调用 Date 里的函数的。所以这也侧面的说明来：ES6 中的class 继承与ES5 中的一般继承写法是不同的。

   既然，底层限制了实例必须由 Date 构建出来，那么我们可以改变下思路继承：

   function MyDate() {}
   
   MyDate.prototype.test = function() {
       return this.getTime()
   }
   let d = new Date()
   Object.setPrototypeOf(d, MyDate.prototype)
   Object.setPrototypeOf(MyDate.prototype, Date.prototype)
   

   以上继承实现的思路：先创建父类实例 => 改变实例原有的 __proto__ 转而连接到子类的 prototype => 子类的 prototype 的 __proto__ 改为父类的 prototype。

   通过以上方法实现的继承就可以完美解决 JS 底层的这个限制。
   本文转载自https://yuchengkai.cn/docs/zh/frontend/#继承