关于es5与es6的继承比较

ES5中的继承

原理：首先对于属性方面，一般是在子构造函数里面调用父构造函数，通过call改变执行上下文，Father.call(this, name); 完成属性继承。

 其次对原型上的方法继承，根据原型的向上查找规则，首先创建一个对象（该对象的__proto__指向父构造函数的原型）,然后将该对象赋给子构造函数的原型

Son.prototype=Object.create(Father.prototype);

或者Son.prototype=new Father();

经过上述操作（即连接了图中6操作+7操作+1操作）后，这时的Son.prototype.constcuctor指向的是Father()，而一般原型的constructor指向函数本身，

因此，需要操作Son.prototype.constcuctor=son;(图中2操作)让它重新指向Son()。

　　 function Father(name) {
        this.name = name;
    }

    function Son(name, age) {
        Father.call(this, name);
        this.age = age;
    }
    Father.prototype.getName = function() {
        console.log(this.name);
    }
    // 子类的原型是父类的一个实例,可以new一个出来，也可以create一个出来
    // Son.prototype = new Father;
    Son.prototype=Object.create(Father.prototype);
    // 修正构造器，这里注意要修改Son的构造器指向赋值为Son
    Son.prototype.constructor = Son;
    //子类自己的方法
    Son.prototype.getAge = function() {
        console.log(this.age);
    }
    var s1 = new Son('李四', 222);
    console.log(s1); // Son {name:'李四',age:22}
    s1.getName(); // 李四
    console.log(Son.prototype.constructor); // Son
    console.log(s1.constructor); // Son
    s1.getAge(); // 22
    //HACK:这里通过__proto__这个s1实例的属性找到了Son的prototype，并为其添加了say的方法
    s1.__proto__.say = function() {
        console.log('hhhhhhhhhhhhhhhhhhhhhhhh');
    }
    s1.say() //  打印 hhhhhhhhhhhhhhh
    // NOTE: __proto__这个属性是具体到某个实例化后的对象才有的属性，指向他所属的类的原型
    console.log(new Son('a',2).__proto__); //  为Son对象

 

ES6中的继承

原理：ES6封装了class，extends关键字来实现继承。

子类通过extends继承父类，然后通过在子类中构造函数 super(name); 完成属性继承。注意这句代码需要在构造函数中的第一行。

区别于ES5，这里不再需要修改子类的原型的构造函数指向。

　　class Father {
        constructor(name) {
            this.name = name;
        }
        getName() {
            console.log(this.name);
        }
        //  这里是父类的f方法
        f() {
            console.log('fffffffffffffffffffffff');
        }
    }
    class Son extends Father {
        constructor(name, age) {
            super(name); // HACK: 这里super()要在第一行
            this.age = age;
        }
        getAge() {
            console.log(this.age);
        }
        //  子类的f方法
        f() {
            console.log('sssssssssssssssssssssss');
        }
    }
    var s1 = new Son('张一', 12);
    s1.getName();
    s1.getAge();
    console.log(s1.__proto__.constructor); //  为Son，不用修正
    s1.f(); //  打印ssssssssssssss