• JavaScript对象 继承


    JavaScript继承主要依靠原型链实现。

    原型链

    利用原型让一个引用类型继承另一个引用类型水位属性和方法。

    每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

                        
            function SuperType(){
                this.property = true;
            }
            
            SuperType.prototype.getSuperValue = function(){
                return this.property;
            };
            
            function SubType(){
                this.subproperty = false;
            }
            
            //inherit from SuperType
            SubType.prototype = new SuperType();
            
            //new method
            SubType.prototype.getSubValue = function (){
                return this.subproperty;
            };
            
            //override existing method
            SubType.prototype.getSuperValue = function (){
                return false;
            };
            
            var instance = new SubType();
            alert(instance.getSuperValue());   //false

    原型链的问题:1 原型对象包含引用类型值得属性;2 不能向超类型的构造函数中传递参数。

    使用构造函数

    在子类型的构造函数的内部调用超类型的构造函数。

            function Person(name, age, job){
                this.name = name;
                this.age = age;
                this.job = job;
                this.sayName = function(){
                    alert(this.name);
                };
            }
            
            var person = new Person("Nicholas", 29, "Software Engineer");
            person.sayName();   //"Nicholas"
            
            Person("Greg", 27, "Doctor");  //adds to window
            window.sayName();   //"Greg"
            
            var o = new Object();
            Person.call(o, "Kristen", 25, "Nurse");
            o.sayName();    //"Kristen"

    使用构造函数的问题:方法都要在构造函数中定义。

    组合继承

    使用原型链和构造函数组合

            function SuperType(name){
                this.name = name;
                this.colors = ["red", "blue", "green"];
            }
            
            SuperType.prototype.sayName = function(){
                alert(this.name);
            };
    
            function SubType(name, age){  
                SuperType.call(this, name);
                
                this.age = age;
            }
    
            SubType.prototype = new SuperType();        
            SubType.prototype.constructor = SubType; 
    SubType.prototype.sayAge
    = function(){ alert(this.age); }; var instance1 = new SubType("Nicholas", 29); instance1.colors.push("black"); alert(instance1.colors); //"red,blue,green,black" instance1.sayName(); //"Nicholas"; instance1.sayAge(); //29 var instance2 = new SubType("Greg", 27); alert(instance2.colors); //"red,blue,green" instance2.sayName(); //"Greg"; instance2.sayAge(); //27

     寄生组合式继承   

    在组合继承中,会两次调用超类型的构造函数(第1是在SubType.prototype = new SuperType();第2是在SuperType.call(this, name);),会生成两组属性,一组在实例上,一组在原型中。

    寄生组合式继承是实现基于类型继承最有效的方式

            function object(o){
                function F(){}
                F.prototype = o;
                return new F();
            }
        
            function inheritPrototype(subType, superType){
                var prototype = object(superType.prototype);   //create object
                prototype.constructor = subType;               //augment object
                subType.prototype = prototype;                 //assign object
            }
                                    
            function SuperType(name){
                this.name = name;
                this.colors = ["red", "blue", "green"];
            }
            
            SuperType.prototype.sayName = function(){
                alert(this.name);
            };
    
            function SubType(name, age){  
                SuperType.call(this, name);
                
                this.age = age;
            }
    
            inheritPrototype(SubType, SuperType);
            
            SubType.prototype.sayAge = function(){
                alert(this.age);
            };
            
            var instance1 = new SubType("Nicholas", 29);
            instance1.colors.push("black");
            alert(instance1.colors);  //"red,blue,green,black"
            instance1.sayName();      //"Nicholas";
            instance1.sayAge();       //29
            
           
            var instance2 = new SubType("Greg", 27);
            alert(instance2.colors);  //"red,blue,green"
            instance2.sayName();      //"Greg";
            instance2.sayAge();       //27

    --以上内容来自JavaScript高级程序设计

  • 相关阅读:
    Eclipse中的快捷键
    xml文件头文件生成策略以及导入约束条件
    HTTP协议状态代码和错误状态含义的解释
    水了一个前端面试 记下问的东西
    整理的一些PHP面试题目
    Magic Index 寻找数组中A[i]=i的位置(原题转自微信号待字闺中)
    【经典算法】寻找最长01字串(转自待字闺中)
    PHP中不用第三个变量交换两个变量的值
    已知一个数组a[N]来构造数组b[N]的有趣算法题
    MySQL安装后默认自带数据库的作用
  • 原文地址:https://www.cnblogs.com/YuanSong/p/3899058.html
Copyright © 2020-2023  润新知