类式继承

封面人物

继承

• 接口继承-只继承方法签名，属性，但是子类必须提供实现的能力；
• 实现继承-继承实际方法，直接使用基类的属性和方法而无需额外编码；

原型链

• 每个构造函数都有一个原型对象（prototype）
• 原型对象都包含一个指向构造函数的指针（constructor）
• 实例包含一个指向原型对象的内部指针（__proto__）

__proto__属性，它是对象所独有的，可以看到__proto__属性都是由一个对象指向一个对象，即指向它们的原型对象（也可以理解为父对象），那么这个属性的作用是什么呢？它的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（可以理解为父对象）里找，如果父对象也不存在这个属性，则继续往父对象的__proto__属性所指向的那个对象（可以理解为爷爷对象）里找，如果还没找到，则继续往上找….直到原型链顶端null（可以理解为原始人。。。），此时若还没找到，则返回undefined（可以理解为，再往上就已经不是“人”的范畴了，找不到了，到此为止），由以上这种通过__proto__属性来连接对象直到null的一条链即为我们所谓的原型链。

实现原型链

/**
            类式继承
            类式继承需要将父类的实例赋值给子类的的原型对象prototype

            类的原型对象作用是就是为了类的原型添加共有属性和方法，但是类本身不能不直接访问这些属性和方法，必须通过原型prototype来访问。

            实例化父类时，new关键字将父类的构造函数，属性和方法复制给了实例化对象，并且将实例化对象的__proto__指向了父类的原型对象。

            这样实例对象就拥有了父类原型对象上的属性和方法。

            并且，实例对象可以直接访问父类原型对象上的属性和方法。
        */

        //声明父类
        function SuperClass() {
            this.superValue = "我是父类";
        }

        //增加父类公共方法--类的原型对象作用是就是为了类的原型添加共有属性和方法
        SuperClass.prototype.getSuperValue = function () {
            //为父类原型对象上添加一个获取值的方法
            console.log(this.superValue)
        }
        //声明子类
        function SubClass() {
            this.subValue = "我是子类";
        }

        //继承父类--父类的实例赋值给子类的的原型对象prototype
        //new关键字将父类的构造函数，属性和方法复制给了实例化对象，并且将实例化对象的__proto__指向了父类的原型对象
        SubClass.prototype = new SuperClass();//在此处时重写原型对象

        //增加子类公共方法
        SubClass.prototype.getSubValue = function () {
            //为子类原型对象上添加一个获取值的方法
            console.log(this.subValue);
        }

        //实例化
        var instance = new SubClass();

        //使用
        instance.getSubValue(); //我是子类
        instance.getSuperValue(); //我是父类--实例对象可以直接访问父类原型对象上的属性和方法

//通过instanceof检测某个对象是否是某个类的实例
        //instanceof通过判断对象的prototype链来判断某个对象是否是某个类的实例
        console.log(instance instanceof SuperClass); //true
        console.log(instance instanceof SubClass); //true

        //instanceof是检测某个对象是否是某个类的实例，它并不表示两者的继承关系
        console.log(SubClass instanceof SuperClass); //false

        //实际继承SuperClass 是 SubClass.prototype ，所以
        console.log(SubClass.prototype instanceof SuperClass) //true

        //所有对象的都是Object 的实例
        console.log(instance instanceof Object) //true

//声明父类
        function SuperClass() {
            this.superValue = "我是父类";
        }

        SuperClass.prototype.getSuperValue = function () {

            console.log(this.superValue)
        }
        //声明子类
        function SubClass() {
            this.subValue = "我是子类";
        }

        //继承父类
        SubClass.prototype = new SuperClass();

        //使用字面量添加方法，会导致上一行无效
        SubClass.prototype={
           getSubValue : function () {
             console.log(this.subValue);
           },
           otherMethod:function(){
             //.....
           }
        }
        //实例化
        var instance = new SubClass();

        console.log(instance.getSuperValue());//error

• 引用类型值的误修改--原型属性中的引用类型属性会被所有实例共享-子类实例更改从父类原型继承来的引用类型共有属性会影响其他子类。
• 无法传递参数--由于子类的继承是靠其prototype对父类的实例化实现的，所以无法传递参数。

function Father() {
            this.base='base';
            this.books = ['1', 'js', 'php'];
        }

        function Son() {};

        Son.prototype = new Father();

        var instance1 = new Son();

        var instance2 = new Son();

        console.log(instance1.books)
        console.log(instance2.books)

        instance1.books.push("设计")
        console.log(instance2.books);
        //可以尝试修改实例属性base 查看另一个实例是否受影响

参考资料：