JavaScript实现继承总结

原型链
function SuperType(){
    this.property="SuperType_true";
}

SuperType.prototype.getSuperValue=function(){
    return this.property;
};

function SubType(){
    this.subproperty="SubType_false";
}

SubType.prototype=new SuperType();

SubType.prototype.getSubValue=function(){
    return this.subproperty;
};

var instance=new SubType();
alert(instance.getSuperValue());    //SuperType_true

使用原型链进行继承,对象继承的东西都是共享的。此时,使用对象修改继承的属性,即是直接修改父类原型里的属性,则其他对象的这个属性也会发生改变。

除非有特殊情况,不然原型链只可用于实现方法继承。

另外,现在instance.constructor 指向SuperType,因为instance的原型是SuperType的实例。

借用构造函数(也叫伪造对象或经典继承)
function SuperType(name){
    this.name=name;
}

function SubType(name,age){
    SuperType.call(this,name);
    this.age=age;
}

var instance1=new SubType("Lufy",18);
var instance2=new SubType("Natro",16);

使用借用构造函数方法继承得来的东西,对象间不共享。这样的话就没有函数复用,造成资源浪费。

借用构造函数可用于继承父类属性,并且很少单独使用。

组合继承
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.sayAge=function(){
    alert(this.age);
}

var instance1=new SubType("Lufy",22);
instance1.colors.push("black");
var instance2=new SubType("Naruto",20);

组合使用原型链和借用构造函数实现继承。使属性在子类实例中;方法则需要沿着原型链查到父类原型,实现了函数复用。

原型式继承
var person={
    name:"Nicholas",
    friends:["Shelby","Court","Van"]
};

var anotherPerson=Object.create(person);
anotherPerson.name="Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson=Object.create(person,{
    name:{
        value:"Linda"
    }
});
yetAnotherPerson.friends.push("BarBie");

console.info(anotherPerson.friends);    //["Shelby", "Court", "Van", "Rob", "BarBie"]

其中,Object.create就是规范化的这个函数:

function object(o){
    function F(){};
    F.prototype=o;
    return f();
}

只想让一个对象和另一个对象类似,可以使用 原型式继承。

寄生式继承
var person={
    name:"Jack",
    age:20
};

var anotherPerson=createAnother(person);
anotherPerson.sayName();
寄生组合式继承

组合式继承非常经典,但它也有不足。它的问题就是:不论在什么情况下,都会调用两次超类型构造函数,浪费了性能。

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);               //第二次调用SuperType()
    this.age=age;
}
SubType.prototype=new SuperType();           //第一次调用SuperType()
SubType.prototype.sayAge=function(){
    alert(this.age);
}

var instance1=new SubType("Lufy",22);
instance1.colors.push("black");
var instance2=new SubType("Naruto",20);

为了弥补这个缺陷,诞生了 “寄生组合式继承”:

function inheritPrototype(subType,superType){
    var prototype=Object(superType.prototype);
    prototype.constructor=subType;
    subType.prototype=prototype;
}

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);        //调用SuperType构造函数
    this.age=age;
}
inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge=function(){
    alert(this.age);
};

var p1=new SubType("Jack",20);

此方法的高效体现于其只调用一次超类构造函数。

开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

JavaScript实现继承总结

时间: 2024-10-11 03:47:55

JavaScript实现继承总结的相关文章

javascript类继承

function extend(subClass, superClass) { var f = function() {}; f.prototype = superClass.prototype; subClass.prototype = new f(); subClass.superClass = superClass.prototype; } var parent = function (name, age) { this._name = name; this._age = age; };

javascript深度克隆与javascript的继承实现

1.javascript深度克隆: //注意这里的对象包括object和array function cloneObject(obj){ var o = obj.constructor === Array ? [] : {}; for(var key in obj){ if(obj.hasOwnProperty(key)){ o[key] = typeof obj[key] === "object" ? cloneObject(obj[key]) : obj[key]; } } ret

JavaScript原型继承的陷阱

JavaScript原型继承的陷阱 JavaScript默认采用原型继承.虽然没有类(class)的概念,它的函数(function)可以充当构造器(constructor).构造器结合this,new可以构建出类似Java的类.因此,JavaScript通过扩展自身能模拟类式(class-based)继承. JavaScript和其它面向对象语言一样,对象类型采用引用方式.持有对象的变量只是一个地址,而基本类型数据是值.当原型上存储对象时,就可能有一些陷阱. 先看第一个例子 var creat

浅话javascript的继承

javascript的继承和java或C#的继承是不一样的,后者是基于类的继承,而javascript是通过原型来继承的.所以,先得理一理原型是个什么鬼. 当一个函数对象被创建时,Function构造器产生的函数对象会运行类似这样一些代码:this.prototype={constructor:this},新对象被赋予prototype这样一个属性,它的值是一个包含constructor属性的对象.可以看出,这个constructor指向新对象本身.prototype属性指向的对象自然不会只有c

[JavaScript原型继承理解一]

转:http://www.cnblogs.com/harolei/p/3740354.html 对于JavaScript的继承和原型链,虽然之前自己看了书也听了session,但还是一直觉得云里雾里,不禁感叹JavaScript真是一门神奇的语言.这次经过Sponsor的一对一辅导和自己回来后反复思考,总算觉得把其中的精妙领悟一二了. 1. JavaScript创建对象 在面向对象语言中,通常通过定义类然后再进行实例化来创建多个具有相同属性和方法的对象.但是在JavaScript中并没有类的概念

[ JavaScript ] JavaScript 实现继承.

对于javascript中的继承,由于js中没有后端语言中的类式继承,所以js中的继承,一般都是原型继承(prototype). function P (name){ this.name = name; this.say = function(){ console.log('p'); } } function S (name,id){ this.id = id; this.eat = function(){ console.log('s'); } } S.prototype = P.protot

JavaScript组合继承的一点思考

今天看<JavaScript高级程序设计>一书中关于组合继承模式时,书上有这么一个Demo程序: <html> <head> </head> <body> <script> function SuperType(name){ this.name = name; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name,

Javascript 进阶 继承

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/29194261 1.基于类的继承 下面看下面的代码: <script type="text/javascript"> function Person(name, age) { this.name = name; this.age = age; } Person.prototype.say = function () { console.log(this.na

javascript实现继承的方式

this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向. 先看一个在全局作用范围内使用this的例子: <script type="text/javascript"> console.log(this === window);  // true console.log(w