前端开发必须知道的JS之原型和继承
2024-09-06 12:45:26
供稿:网友
一. 原型与构造函数
Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型。这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型。譬如普通函数:
代码如下:
function F(){
alert(F.prototype instanceof Object) //true;
}
构造函数,也即构造对象。首先了解下通过构造函数实例化对象的过程。
代码如下:
function A(x){
this.x=x;
}
var obj=new A(1);
实例化obj对象有三步:
1. 创建obj对象:obj=new Object();
2. 将obj的内部__proto__指向构造他的函数A的prototype,同时,obj.constructor===A.prototype.constructor(这个是永远成立的,即使A.prototype不再指向原来的A原型,也就是说:类的实例对象的constructor属性永远指向"构造函数"的prototype.constructor),从而使得obj.constructor.prototype指向A.prototype(obj.constructor.prototype===A.prototype,当A.prototype改变时则不成立,下文有遇到)。obj.constructor.prototype与的内部_proto_是两码事,实例化对象时用的是_proto_,obj是没有prototype属性的,但是有内部的__proto__,通过__proto__来取得原型链上的原型属性和原型方法,FireFox公开了__proto__,可以在FireFox中alert(obj.__proto__);
3. 将obj作为this去调用构造函数A,从而设置成员(即对象属性和对象方法)并初始化。
当这3步完成,这个obj对象就与构造函数A再无联系,这个时候即使构造函数A再加任何成员,都不再影响已经实例化的obj对象了。此时,obj对象具有了x属性,同时具有了构造函数A的原型对象的所有成员,当然,此时该原型对象是没有成员的。
原型对象初始是空的,也就是没有一个成员(即原型属性和原型方法)。可以通过如下方法验证原型对象具有多少成员。
代码如下:
var num=0;
for(o in A.prototype) {
alert(o);//alert出原型属性名字
num++;
}
alert("member: " + num);//alert出原型所有成员个数。
但是,一旦定义了原型属性或原型方法,则所有通过该构造函数实例化出来的所有对象,都继承了这些原型属性和原型方法,这是通过内部的_proto_链来实现的。
譬如
A.prototype.say=function(){alert("Hi")};
那所有的A的对象都具有了say方法,这个原型对象的say方法是唯一的副本给大家共享的,而不是每一个对象都有关于say方法的一个副本。
二. 原型与继承
首先,看个简单的继承实现。
代码如下:
function A(x){
this.x=x;
}
function B(x,y){
this.tmpObj=A;
this.tmpObj(x);
delete this.tmpObj;