日期:2014-05-16  浏览次数:20616 次

javascript原型继承学习笔记

1.定义一个父类

?

var superClass = function(){ 
      this.superPro = 'super';
 }

superClass.prototype.pubPro = 'pubPro'; //定义父类公有属性(函数)

?

2.定义一个子类??

?

var subClass = function(){
        this.subPro = 'sub';
}? 

?

3.通过prototype类型属性实现继承
?? 3.1 子类prototype直接指向父类prototype?

subClass.prototype = superClass.prototype; 
var subObj = new subClass(); 
alert(subObj.pubPro); //输出 pubPro
?

???? 注:这种方法存在一个弊端,由于 javascript 中对象赋值是引用赋值方式.
?????? ?会导致子类中的对prototype修改引起所有继承superClass的子类发生变化.

??????? 我们看下一下代码就会发现:

???????

 subClass.prototype.pubPro = 'subPro';//修改子类的原型属性值 
 var  superObj = new superClass(); //获取父类对象实例 
 alert(superObj.pubPro); // 这里输出 subPro 

?

?? 3.2 子类prototype直接指向父类实例

??????? 为了解决3.1中的弊端,我们可以给子类的prototype引用指定父类的对象实例.代码如下:

?

subClass.prototype = new superClass(); 
var subObj = new subClass(); 
alert(subObj.pubPro);  // 这里输出 subPro 

?

??? 注:这种方式同样存在一个问题,父类中的函数中定义的(非原型)中定义的属性(函数),将被继承到子类中.这样是不符合利用prototype属性实现的规则(要求继承的属性函数都在prototype中定义).所以有3.3中的方法.

??? 3.3?利用空函数传递prototype

???????

function F(){};
F.prototype = superClass.prototype; //空行数F原型指向父类原型
subClass.prototype = new F();
alert(subObj.superPro); //输出undefined, superPro是函数体内定义的,不应该被继承. 
alert(subObj.pubPro); //输出 pubPro , pubPro 是原型 prototype 中定义的,将被继承.

?

?4.继承后指定构造函数.

???? 利用prototype属性实现继承后,会造成子类的构造函数被指向到父类的构造函数.所以在指定prototype属性后,还需还原子类的构造函数.代码参考如下:

?

subClass.prototype.constructor = subClass;

?

5.封装方法

?

//公共方法函数
function extendFun(subClass,superClass){
	if (typeof superClass!= 'function') return subClass;
		//保存对父类的引用
        subClass.base = superClass.prototype;
        subClass.base.constructor = superClass;//这里保存一下父类的构造函数,以便利用
        //继承
        var f = function () { };
        f.prototype = superClass.prototype;
        subClass.prototype = new f();
        subClass.prototype.constructor = subClass;//指定子类构造函数
}

?

//封装到js对象中
Function.prototype.extendFun = function (superClass){
	if (typeof superClass != 'function') return this;
		//保存对父类的引用
        this.base = superClass.prototype;
        this.base.constructor = superClass;//这里保存一下父类的构造函数,以便利用
        //继承
        var f = function () { };
        f.prototype = superClass.prototype;
        this.prototype = new f();
        this.prototype.constructor = subClass;//指定子类构造函数
}

?

?

?

?

?

?

?

?