ES5与ES6中的继承

ES5与ES6中的继承

原型链

1. 所有的函数对象中都有prototype属性，称为原型对象，这个对象中所有的属性和方法都会被构造函数所拥有。
2. 所有的普通对象中都有_proto_属性，称为为对象原型，指向的是构造函数的prototype。
3. prototype中有constructor属性指回构造函数本身，prototype中有_proto_属性指向上一级构造函数的prototype。
4. _proto_中也有constructor属性，其实这里的constructor是通过_proto_指向的原型对象中的constructor指回的构造函数。

由此可以形成一条原型链，如图

成员查找机制

当访问一个对象的属性或方法时，首先查找该对象自身有没有该属性和方法，若没有则查找该对象的原 型（也就是_proto_指向的prototype原型对象），即去构造函数的prototype对象中去查找，若还是没有则再查找原型对象的原型，直到查找到Object为止。

ES5

属性的继承：

通过Father.call(运行时Father构造函数中的this指向，传的参数)把父类的this改为子类的this。因为父类的this指向的时父类的实例对象，通过改变this指向，来让父类构造函数指向子类的实例对象，从而继承父类属性。

//通过借用父构造函数来继承属性
        //1。父构造函数
        function Father(uname, age) {
            //this指向父构造函数的对象实例
            this.uname = uname;
            this.age = age;
        }
        //2.子构造函数
        function Son(uname, age) {
            //this指向子构造函数的对象实例
            Father.call(this, uname, age);
        }
        var ldh = new Son('刘德华', 12);
        console.log(ldh);

方法的继承：

1. new一个父类的实例对象空间，将子类的prototype指向父类的实例对象
2. 由于此时父类的实例对象将子类的原型对象覆盖，所以要重新将子类的prototype指回子类构造函数
3. 在子类的prototype中添加子类的私有方法，当需要用到父类中的方法时，会通过父类的实例对象中的_proto_指向的prototype中去寻找，从而继承了父类方法。
   

		Son.prototype = new Father();
        Son.prototype.exam = function () {
            console.log('孩子要考试');
        }

ES6

先创建父类实例this 通过class丶extends丶super关键字定义子类，并改变this指向，super本身是指向父类的构造函数但做函数调用后返回的是子类的实例，实际上做了父类.prototype.constructor.call(this)，做对象调用时指向父类.prototype,从而实现继承

 class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        class Son extends Father {
            constructor(x, y) {
                super(x, y);
                this.x = x;
                this.y = y;
            }
            sub() {
                console.log(this.x - this.y);
            }
        }
        var son = new Son(3, 1);
        son.sum();
        son.sub();

使用类的注意事项

 		var that;
        class Father {
            //构造器里面的this指向实例对象
            constructor(uname, age) {
                that = this;
                this.uname = uname;
                this.age = age;
                // this.sing();
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing;
            }
            //这个方法里的this 指向的是btn 这个按钮，因为这个按钮调用了这个函数
            sing() {
                // console.log(this.uname);
                console.log(that.uname); //that 里面存储的是constructor里面的this
            }
        }
        var father = new Father('刘德华');