javascript中的继承-----原型链

很多OO语言都支持两种继承方式:接口继承和实现继承。但在ECMAScript中无法实现接口继承,只支持实现继承,而且

其实现继承主要是依靠原型链来实现的。

1. 基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

简单回顾一下构造函数、原型个和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,

而实例也包含一个指向原型对象的内部指针。那么,假如我们让原型对象等于另一个类型的实例,结果会怎样呢?然而,此时的原型对象将

包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假设另一个原型又是另一个类型的实例,那么上述
 <script type="text/javascript">
        //定义一个超类
        function SuperType(){
            this.property = true;
        }
        
        SuperType.prototype.getSuperValue = function(){
            return this.property;
        }
        
        //定义一个子类
        function SubType(){
            this.subproperty = false;
        }

        //继承了SuperType,继承是通过创建SuperType的实例,
        //并将该实例赋值给SubType.prototype实现的
        SubType.prototype =  new SuperType();
        
        //在继承了SuperType的属性和方法的基础上又添加一个新方法
        SubType.prototype.getSubValue = function(){
            return this.subproperty;
        }

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

        alert(instance instanceof Object);//true
        alert(instance instanceof SuperType);//true
        alert(instance instanceof SubType);//true

        alert(Object.prototype.isPrototypeOf(instance));//true
        alert(SuperType.prototype.isPrototypeOf(instance));//true
        alert(SubType.prototype.isPrototypeOf(instance));//true
  </script>




这个例子上的实例以及构造函数和原型之间的关系如图所示:



在上面的代码中,我们没有使用SubType默认提供的原型,而是给它换了一个新原型;这个新原型就是SuperType的实例。

于是,新原型不仅具有作为一个SuperType的实例。于是新原型不仅具有作为一个SuperType的实例所拥有的全部属性和

方法,而且其内部还有一个指针,指向了SuperType的原型。最终结果就是这样的:instance指向SubType.prototype,SubType.

prototype有指向SuperType.prototype。getSuperValue()方法任然还在SuperType.prototype中,但property则位于SubType.prototype中。

这是因为property是一个实例属性,而getSuperValue()则是一个原型方法。既然SubType.prototype现在是SuperType的实例,那么property当然就位于该实例

中了。此外,要注意instance.constructor现在指向的是SuperType,这是因为原来SubType.prototype中的constructor被重写的缘故。

 

1. 别忘记默认的原型

事实上,前面例子中展示的原型链还少了一环。所有引用类型默认都继承了Object,而这个继承都是通过原型链实现的。

下图为我们展示了该例子中完整的原型链。

 

 

SubType继承了SuperType,而SuperType继承了Object.当调用instance.toString()时,实际上调用的是保存在Object.prototype中的方法。

2. 确定原型和实例的关系

可以通过两种方式来确定原型和实例之间的关系。

第一种方式:instanceof操作符,只要这个操作符来测试实例与原型链中出现过的构造函数,结果就会返回true.

alert(instance instanceof Object);//true

alert(instance instanceof SuperType);//true

alert(instance instanceof SubType);//true

 

第二种方式:isPrototypeOf()方法。质押是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型。

alert(Object.prototype.isPrototypeOf(instance));//true

alert(SuperType.prototype.isPrototypeOf(instance));//true

alert(SubType.prototype.isPrototypeOf(instance));//true


3. 谨慎地定义方法

不管是重写超类中的某个方法,或者需要添加超类中不存在的某个方法,不管怎样,给原型添加方法的代码一定要放在替换原型的语句之后。

  <script type="text/javascript">
		function SuperType(){
			this.property = true;
		}

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

		function SubType(){
			this.subproperty = false;
		}

		//继承了SuperType
		SubType.prototype = new SuperType();
		//添加新方法
		SubType.prototype.getSubValue = function(){
			return this.subproperty;
		}

		//重写超类中的方法
		SubType.prototype.getSuperValue = function(){
			return false;
		}

		var instance = new SubType();
		alert(instance.getSuperValue());
  </script>

这里格外注意的是,必须在用SuperType的实例替换原型后,再定义这两个方法。
注意:即在通过原型链实现继承时,不能使用对象字面量创建原型方法。因为这样做就会重写原型链,如下所示:

  <script type="text/javascript">
	function SuperType(){
		this.property = true;
	}

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

	function SubType(){
		this.subproperty = false;
	}

	//继承了SuperType
	SubType.prototype = new SuperType();
	//使用字面量添加新方法,会导致上一步代码无效
	SubType.prototype = {
		getSubValue : function(){
			return this.subproperty;
		},
		someOtherMother : function(){
			return false;
		}
	}

	var instance = new SubType();
	alert(instance.getSuperValue());//error
  </script>

以上代码展示了刚刚把SuperType的实例赋值给原型,紧接着又将原型替换成一个对象字面量而导致的问题。由于现在的原型包含的是一个

Object的实例,而非SuperType的实例,因此我们设想中的原型链已经被切断--SubType和SuperType之间已经没有关系了。

4. 原型链的问题

 原型链虽然很强大,可以用他来实现继承,但它也存在一些问题。其中,最主要的问题来自包含引用类型值的变量。

前面讲过:包含引用类型值的原型属性会被所有实例共享;而这也是为什么呢要再构造函数中,而不是在原型对象中定义

属性的原因。在通过原型来实现继承时,原型实际上会变成另一个类型的实例。于是,原先的实例属性也就顺理成章地变成

了现在的原型的属性了,如下代码:

<script type="text/javascript">
	function SuperType(){
		this.colors = ['red','blue','green'];
	}
	function SubType(){}

	//继承了SuperType
	SubType.prototype = new SuperType();

	var instance1 = new SubType();
	instance1.colors.push("black");
	alert(instance1.colors);	//“red,blue,green,black"

	var instance2 = new SubType();
	alert(instance2.colors);//“red,blue,green,black"
</script>

原型链的第二个问题是:在创建子类型的实例时,不能向超类型的构造函数中传递参数。实际上,应该说是没有办法在不影响所有

对象实例的情况下,给超类型的构造函数传递参数。

有鉴于此,实践中很少会单独使用原型链。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值