首页 > 代码库 > JavaScript对象 继承

JavaScript对象 继承

2024-07-16 11:11:31   229人阅读

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 = http://www.mamicode.com/function (){            return this.subproperty;        };                //override existing method        SubType.prototype.getSuperValue = http://www.mamicode.com/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高级程序设计


联系
我们