ES5与ES6的继承

JavaScript本身是一种神马语言：

提到继承，我们常常会联想到C#、java等面向对象的高级语言(当然还有C++)，因为存在类的概念使得这些语言在实际的使用中抽象成为一个对象，即面向对象。JavaScript这门语言本身就是作为浏览器脚本语言的弱语言，伴随着没有类的概念，JavaScript就成为了一种基于对象的语言而不是面向对象的语言，面向对象就会存在继承，那么基于对象的JavaScript是如何继承的。

ES5规则

JavaScript的4种继承方式：

(1)原型继承

栗子：

 function Animal() {
     this.name = "Animal";
     this.actions = ['eat', 'drink']
     this.eat = function () {
         console.log('eat');
     };
 }
 
 Animal.prototype = {
     age: '6years',
     hobbies: []
 }
 
 function Dog() {
     //do someting
 }
 Dog.prototype = new Animal();
 
 function Cat() {
     //do someting
 }
 Cat.prototype = new Animal();
 
 var dog = new Dog();
 var cat = new Cat();

结果：

可以看到cat跟dog都继承了animal的实例对象，原型继承原型继承是最基础的继承方式，核心就是重写子类原型，是父类实例对象充当子类原型。

如果此时作如下操作会有什么情况发生

 dog.name = 'dog'
 dog.actions.push('look');
 dog.age = '7years';
 dog.hobbies.push('sleep');

cat的结果：

结果已经很明显了，原型上的引用类型会被共享。

原因就是操作数组时，首先会在对象下找当前数组，如果有就会更改对象下的数组，如果没有就会到原型里面找数组，由于dog跟cat的原型是同一个animal所以修改的就是同一个数组，如果是简单类型，查找对象内没有此属性，重新生成一个属性，并且不会继续使用原型内部的属性，即原型共享。

结论：优点：最基本的继承方式，简单；缺点：原型中的引用类型共享。

到这里是不是有一种原型链的感觉了呢~

(2)改变上下文的继承

 function Animal(name) {
     this.name = name;
     this.actions = ['eat', 'drink']
     this.eat = function () {
         console.log('eat');
     };
 }
 
 function Dog() {
     Animal.call(this, 'dog')
 }
 
 function Cat() {
     Animal.call(this, 'cat')
 }
 
 var dog = new Dog();
 var cat = new Cat();

结果：

利用call(apply,bind)方式改变了Animal函数内部this的指向，使this指向分别指向了Dog和Cat

优点：摒弃了原型，避免了原型共享；解决了向父类构造函数传参的问题。

缺点：没生成一个新对象，都会重新定义一次function，严重影响内存。

这里是不是有一种多态的感觉了呢~

(3)把前两种结合起来继承：

栗子：

 function Animal(name) {
     this.name = name;
     this.actions = ['eat', 'drink']
 }
 
 Animal.prototype = {
     eat: function () {
         console.log('eat');
     }
 }
 
 function Dog(name) {
     Animal.call(this, name)
 }
 Dog.prototype = new Animal();
 
 function Cat(name) {
     Animal.call(this, name)
 }
 Cat.prototype = new Animal();
 
 var dog = new Dog('dog');
 var cat = new Cat('cat');

结果：

优点：这种方式成功的避免了重复定义function的尴尬情况，同时解决了原型共享的问题。

缺点：如果有两个子类继承父类，但是父类的属性有一个子类不用，怎么搞？这个是没法避免的，而且父类的属性全部在子类的原型上，很不美观。

这里是不是又仿佛看见了new的原理了呢~

(4)寄生组合继承：

为了扣掉组合继承中原型中不需要的属性，看到为了满足这一点，可不可以介样：

 function Animal(name) {
     this.name = name;
     this.actions = ['eat', 'drink']
 }
 
 Animal.prototype = {
     eat: function () {
         console.log('eat');
     }
 }
 
 function Dog(name) {
     Animal.call(this, name)
 }
 Dog.prototype = Animal.prototype;
 
 function Cat(name) {
     Animal.call(this, name)
 }
 Cat.prototype = Animal.prototype;
 
 var dog = new Dog('dog');
 var cat = new Cat('cat');

结果：

是不是达到了原型中的属性被消灭的效果了呢。这里我们可以联想到什么呢，那就是js的new关键字

回顾一下：

 var
     Demo = function () {
         var
             self = this;
     };
 
 var demo = {};
 demo.__proto__ = Demo.prototype;
 Demo.call(demo);

区别在于将Demo.prototype是给对象的原型赋值，一个是给方法的原型赋值。

接着上面的栗子来，乍一看好像对，实际Child中的__proto__为Object，并不是Parent，已经背离了Child继承Parent的目的。为啥呢？因为prototype就是Object，js里一切皆为对象。

我们可以自己控制对象的原型

改进：

 function Animal(name) {
     this.name = name;
     this.actions = ['eat', 'drink']
 }
 
 Animal.prototype.eat = function () {
     console.log('eat');
 }
 
 function Dog(name) {
     Animal.call(this, name)
 }
 
 function Cat(name) {
     Animal.call(this, name)
 }
 
 function initObject(obj) {
     var
         F = function () { };
     F.prototype = obj;
     return new F();
 }
 
 var
     dogPrototype = initObject(Animal.prototype),
     catPrototype = initObject(Animal.prototype);
 dogPrototype.constructor = Dog;
 catPrototype.constructor = Cat;
 Dog.prototype = dogPrototype;
 Cat.prototype = catPrototype;
 var dog = new Dog('dog');
 var cat = new Cat('cat');

结果：

可以看到cat与dog的原型已经是Animal了。ES5 over~

ES6规则

 class Animal {
     constructor(name) {
         this.name = name;
     };
 
     eat() {
         console.log('eat')
     };
 }
 
 class Dog extends Animal {
     constructor() {
         super();
     };
 
     eat() {
         super.eat();
     };
 }
 var dog = new Dog();

ES6很大程度优化了ES5的继承方式，而且constructor也暴露出来，利用super可以直接调用父级函数以及属性，相当地方便。