javascript继承模型

 

 

前面介绍了javascript的对象模型,这里接着介绍javascript的继承模型,继承模型与对象模型相似,都不是java语言里面的那种语言内部的对象和继承,而是程序员依靠javascript的引用模型自己构造出来的与java语言里面的对象和继承在感官方面,使用方面,功能方面相似的一个效果.

这里着重提一下:

javascript除了五种基本类型外,其它类型全是引用类型,"引用"这个概念在这篇和上一篇"javascript对象模型"中起着非常重要的作用,一定要明确知道什么是引用类型.

下面我们开始:

javascript继承模型可由三个方式实现:

1.对象冒充

    a.直接实现  例:

function  ClassA(sColor)  ... {
    this.color = sColor;
    this.sayColor = function () ...{
        alert(this.color);
    };
}

function  ClassB(sColor, sName)  ... {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;
    
    this.name = sName;
    this.sayName = function () ...{
        alert(this.name);
    };    
}

var  objA  =   new  ClassA( " red " );
var  objB  =   new  ClassB( " blue " ,  " Nicholas " );
objA.sayColor();
objB.sayColor();
objB.sayName();

 所有的新属性和新方法都必须在删除了新方法的代码行后定义,否则,可能会覆盖超类的相关属性和方法.

b.用Call()方法实现

function  ClassA(sColor)  ... {
    this.color = sColor;
    this.sayColor = function () ...{
        alert(this.color);
    };
}

function  ClassB(sColor, sName)  ... {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.call(this, sColor);

    this.name = sName;
    this.sayName = function () ...{
        alert(this.name);
    };
}

var  objA  =   new  ClassA( " red " );
var  objB  =   new  ClassB( " blue " ,  " Nicholas " );
objA.sayColor();
objB.sayColor();
objB.sayName();

c.用Apply()方法实现

function  ClassA(sColor)  ... {
    this.color = sColor;
    this.sayColor = function () ...{
        alert(this.color);
    };
}

function  ClassB(sColor, sName)  ... {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.apply(this, arguments);

    this.name = sName;
    this.sayName = function () ...{
        alert(this.name);
    };
}

var  objA  =   new  ClassA( " red " );
var  objB  =   new  ClassB( " blue " ,  " Nicholas " );
objA.sayColor();
objB.sayColor();
objB.sayName();

 call()有点类似于java中的反射机制,b.call(a,c)用汉语描述可以这样理解:对象a调用b方法,c是b方法的参数.apply类似,不过apply第二个参数是一个数组.

2.原型链

原型链类似对象模型中,用原型实现对象,原理是一样的.关键用到了prototype,例

function  ClassA()  ... {
}

ClassA.prototype.color  =   " red " ;
ClassA.prototype.sayColor  =   function  ()  ... {
    alert(this.color);
} ;

function  ClassB()  ... {
}

ClassB.prototype  =   new  ClassA();

ClassB.prototype.name  =   "" ;
ClassB.prototype.sayName  =   function  ()  ... {
    alert(this.name);
} ;

var  objA  =   new  ClassA();
var  objB  =   new  ClassB();
objA.color  =   " red " ;
objB.color  =   " blue " ;
objB.name  =   " Nicholas " ;
objA.sayColor();
objB.sayColor();
objB.sayName();

子类的所有属性和方法都必须出现在prototype属性被赋值后,因为在它之前赋值的所有方法都会被删除,因为prototype属性被替换成了新对象,添加了新方法的原始对象将删除.原型链不支持多重继承,记住,原型链会用另一类型的对象重写类的prototype属性. 

 

上面两种方法的缺点:

对象冒充的缺点是构造对象时必须使用构造函数方式,构造函数方式的缺点是:为所有的对象的所有属性和方法都建立一个副本,为对象的属性建立副本是没问题的,但为所有的方法也建立副本就没必要,这样会浪费内存,一个类的所有对象共享一个 方法的副本 就行了

原型链的缺点是:

建立对象是必须使用无参的构造函数,不能使用带参的构造函数.

基于上面两个原因,我们介绍第三种方法.

3.混合方式

混合方式类似于前面文章javascript对象类型的混合方式,用对象冒充继承构造函数的属性,用原型链继承prototype对象的方法.例

function  ClassA(sColor)  ... {
    this.color = sColor;
}

ClassA.prototype.sayColor  =   function  ()  ... {
    alert(this.color);
} ;

function  ClassB(sColor, sName)  ... {
    ClassA.call(this, sColor);
    this.name = sName;
}

ClassB.prototype  =   new  ClassA();

ClassB.prototype.sayName  =   function  ()  ... {
    alert(this.name);
} ;


var  objA  =   new  ClassA( " red " );
var  objB  =   new  ClassB( " blue " ,  " Nicholas " );
objA.sayColor();
objB.sayColor();
objB.sayName();

 

上面简单介绍了javascript的继承模型,其实javascript的继承模型不过是一个编程方式,思维模式的体现,用现有的一点条件,达到更多的效果.理解了其中的思维,原理,学习起来就能举一返三.