Javascript高级程序设计_7_继承

• 通过原型链来体现继承的思想，如下面两个对象a和b:

        function a(){
            this.aProperty=true;
        }
        function b(){
            this.bProperty=false;
        }
        a.prototype.getAvalue=function(){
            return this.aProperty;
        }
        b.prototype.getBvalue=function(){
            return this.bProperty;
        }
        b.prototype.myFunction=function(){
            return "B_function";
        }
        a.prototype.myFunction=function(){
            return "A_function";
        }

        b.prototype=new a();//一旦将b的原型指向a的实例
        var instance=new b();//构建一个b的实例
        console.log(instance.getAvalue());//true, 返回a的属性
        // console.log(instance.getBvalue());//Error
        console.log(instance.myFunction());//B_function

　　　　按照书上所说 “换句话说，原来存在于SuperType （a）的实例中的所有属性和方法，现在也存在于SubType.prototype (b.prototype)中了。在确立了继承关系之后，我们给SubType.prototype(b.prototype) 添加了一个方法（即getBvalue），这样就在继承了SuperType(a) 的属性和方法的基础上又添加了一个新方法”

　　　　其实经过尝试，虽然就算给b的prototype添加了新的方法，只要b的prototype指向a的实例，那么这个instance始终无法调用自身原型内的方法，即：

        console.log(instance.getBvalue());//Error

　　　　始终无法调用getBvalue()方法。

　　　　所以我又尝试分别在a和b的原型中定义两个方法，果然不出所料

        a.prototype.myFunction=function(){
            return "A_function";
        }
        b.prototype.myFunction=function(){
            return "B_function";
        }
        console.log(instance.myFunction());//A_function

　　　　　返回的是A原型的方法。

• 所有的对象，其默认原型都指向Object.prototype。相当于: obj.prototype=new Object()  。所以说，所有自定义的类型，都继承了Object原型内的方法，如toString(), valueOf()之类的。

　　　　那么问题就是，如果我在b或者a原型或者本身属性中覆写了toString 方法，那么调用谁的呢？　

        //原型中，覆写toString
        a.prototype.toString=function(){
            return "over-write A_toString in prototype";
        }
        b.prototype.toString=function(){
            return "over-write B_toString in prototyp";
        }
        //本身属性中，覆写toString
        a.toString=function(){
            return "over-write A_toString";
        }
        b.toString=function(){
            return "over-write B_toString";
        }
        //尝试调用一下toString 看返回什么
        console.log(instance.toString())//over-write A_toString in prototype

　　发现是可以覆写Object中的toString,并通过实例来调用的。

• instanceof和isPrototypeOf()来判断原型和实例的关系
• 父类中的getAvalue可以在b的prototype中覆写

        //覆写父类中的getAvalue
        b.prototype.getAvalue=function(){
            return "over-write getAvalue";
        }
        console.log(instance.getAvalue());//over-write getAvalue

　　与上述类似，是可以通过b的原型沿着原型链向上查找到getAvalue，并覆写的。但如果通过a的实例来调用，则不会使用被覆写的方法

        console.log(new a().getAvalue());//true

• 关于调用getBvalue方法的调用问题：

　　　　之前一直以为自己想不到方法调用getBvalue了，因为总是出现Error，后来发现问题出在代码顺序上！！！！

　　　　如果在实现继承之前，定义了b的getBvalue，那么是无法调用的。但是如果在继承之后，再定义b的getBvalue，相当于添加一个新方法，这时候是可以调用的

        b.prototype.getBvalue=function(){
            return this.bProperty;
        }
        console.log(instance.getBvalue());//false

　　　　添加的新方法，一定要在继承完成之后！

• 原型链的问题主要出在：当使用引用类型定义新的实例的时候，对一个实例的更改，会导致该引用类型内部字段的更改

        function A(){
            this.color=['red','yellow','blue'];
        }
        function B(){

        }
        B.prototype=new A()//继承
        var f1=new B();
        f1.color.push('brown');
        console.log(f1.color);//["red", "yellow", "blue", "brown"]
        var f2=new B();
        console.log(f2.color);// ["red", "yellow", "blue", "brown"]

　　　　所以我们定义属性的时候，一定要在构造函数中定义，不要在原型对象里面定义。这里因为B的原型中通过继承得到了A的color属性，结果就悲剧了

• 解决方法1是通过call和apply方法来借用构造函数（伪继承）

        //solution 1
        function A_1(){
            this.color=['red','yellow','blue'];
        }
        function B_1(){
            A_1.call(this);//伪继承，借用call来调用父类构造函数
        }
        //B_1.prototype=new A_1()//这个继承可以不用写了
        var f_1=new B_1();
        f_1.color.push('brown');
        console.log(f1.color);//["red", "yellow", "blue", "brown"]
        var f_2=new B_1();
        console.log(f_2.color);//["red", "yellow", "blue"]

　　　　相当于借用call来调用父类的构造函数

• 解决方法2是借助组合的方法，将构造函数和显式继承组合在一起实现继承

        //组合继承
        function flower_A(name){
            this.colors=['red','yellow'];
            this.name=name
        }
        flower_A.prototype.sayName=function(){
            return this.name;
        }
        function flower_B(name,age){
            flower_A.call(this,"Jasmine");//通过call调用A，伪继承
            this.age=age;
        }
　　　　　　　//显式继承
        flower_B.prototype=new flower_A();
        flower_B.prototype.constructor=flower_B;//这里要将它的constructor改成flower_B

        flower_B.prototype.sayAge=function(){
            return this.age;
        }
        var instace=new flower_B("Violet",20);
        instace.colors.push('black');
        console.log(instace.colors)//["red", "yellow", "black"]
        console.log(instace.sayAge());20//
        var instace_2=new flower_B("Rose",18);
        console.log(instace_2.colors)//["red", "yellow"]
        console.log(instace_2.sayAge())//18 可以改成instance_age

• 解决方法3，不！是原型式继承，这个方法就像原型模式一样，新建一个实例并添加字段属性，会修改原字段。还有一个create方法，这里大致说一下，第一个参数是对象，第二个参数是其属性，属性包括value, enumerable, writable, configurable,get,set

        //原型式继承，但并没什么卵用
        function object(o){
            function f(){};//临时的构造函数f
            f.prototype=o;//传入对象为构造函数的原型
            return new f();//返回这个构造函数的实例
        }
        //该如何使用呢？
        var person={
            name:'Jonathan',
            age:20,
            friends:['Emily',"Jing"]
        }
        //传统的创建对象
        var somebody=new object(person);
        somebody.name="Grey";
        somebody.friends.push('Van');
        //用ECAMScript5的方法
        var somebody2=Object.create(person,{
            name:{
                value:"Alice"
            }
        })

        console.log(somebody.friends);//["Emily", "Jing", "Van", "Mike"]
        console.log(somebody2.friends);//["Emily", "Jing", "Van", "Mike"]
        console.log(somebody2.name)//Alice

• 寄生式的继承，类似于原型模式继承，同样是要创建object函数，比较麻烦

        //寄生继承模式
        function createAnother(original){
            var clone=new object(original);
            clone.sayHi=function(){
                console.log("hi");
            }
            return clone;
        }
        var createPerson={
            name:"Cage",
            friends:['Emily',"Jing"]
        }
        var somebody3=new createAnother(createPerson);
        somebody3.sayHi();//hi

• 解决方法3来了，这个依靠寄生组合式的继承，仍然需要一个object函数，主要优势在于相比于组合继承，它只调用了superType的构造函数一次。

        //寄生组合继承
        function AA(name){
            this.name=name,
            this.colors=['red','yellow','brown']
        }
        AA.prototype.sayName=function(){
            console.log(this.name)
        }

        function BB(name,age){
            AA.call(this,name)
            this.age=age;
        }
        function inheritePrototype(superType, subType){
            var proto=object(superType.prototype);
            proto.constructor=subType;
            subType.prototype=proto
        }
        inheritePrototype(AA,BB);
        BB.prototype.sayAge=function(){
            console.log(this.age);
        }
        var instace_3=new BB("Bill",20);
        instace_3.sayAge();//20

 

["Emily", "Jing", "Van", "Mike"]