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;//指定子类构造函数
}