【继承】javascript的prototype继承-WEB前端开发

在prototype继承中原型类中不能有成员对象！所有成员必须是值类型数据（string也可以）用prototype继承有执行效率高，不会浪费内存，为父类动态添置方法后子类中马上可见等的优点。我就非常喜欢用prototype继承。prototype继承是通过把子类的原型对象（prototype）设置成父类的一个实例来进行继承的。只简单的这样设置继承的确如楼主所说，有不少缺点。总的来说有四个缺点：
?

缺点一：父类的构造函数不是像JAVA中那样在给子类进行实例化时执行的，而是在设置继承的时候执行的，并且只执行一次。这往往不是我们希望的，特别是父类的构造函数中有一些特殊操作的情况下。
?
缺点二：由于父类的构造函数不是在子类进行实例化时执行，在父类的构造函数中设置的成员变量到了子类中就成了所有实例对象公有的公共变量。由于JavaScript中继承只发生在“获取”属性的值时，对于属性的值是String，Number和Boolean这些数据本身不能被修改的类型时没有什么影响。但是Array和Object类型就会有问题。
?
缺点三：如果父类的构造函数需要参数，我们就没有办法了。
?
缺点四：子类原本的原型对象被替换了，子类本身的constructor属性就没有了。在类的实例取它的constructor属性时，取得的是从父类中继承的constructor属性，从而constructor的值是父类而不是子类。
?

我也曾经为了这四个缺点头疼过，于是对prototype继承进行改造。
我试了几种方法，下面是我觉得最好的一种。我把它写成Function对象的一个方法，这样用的时候方便。方法如下：

JavaScript代码

//类的继承-海浪版 ??
Function.prototype.Extends?=?function?(parentClass) ??
{ ??
??var?Bs?=?new?Function(); ??
??Bs.prototype?=?parentClass.prototype; ??
??this.prototype?=?new?Bs(); ??
??this.prototype.Super?=?parentClass; ??
??this.prototype.constructor?=?this; ??
} ??

下面的内容是一些基本说明
基本的用法把ClassA的一个实例赋值给ClassB ClassB就继承了ClassA的所有属性

JavaScript代码

function?ClassA() ??
{ ??
????this.a=‘a’; ??
} ??
function?ClassB() ??
{ ??
????this.b=‘b’; ??
} ??
ClassB.prototype=new?ClassA(); ??
var?objB=new?ClassB(); ??
for(var?p?in?objB)document.write(p+“<br>“);???

从原型继承理论的角度去考虑 js的原型继承是引用原型不是复制原型
所以修改原型会导致所有B的实例的变化

JavaScript代码

function?ClassA() ??
{ ??
????this.a=‘a’; ??
} ??
function?ClassB() ??
{ ??
????this.b=‘b’; ??
} ??
ClassB.prototype=new?ClassA(); ??
var?objB=new?ClassB(); ??
alert(objB.a); ??
ClassB.prototype.a=‘changed!!’; ??
alert(objB.a); ??

然而子类对象的写操作只访问子类对象中成员它们之间不会互相影响
因此写是写子类读是读原型（如果子类中没有的话）

JavaScript代码

function?ClassA() ??
{ ??
????this.a=‘a’; ??
} ??
function?ClassB() ??
{ ??
????this.b=‘b’; ??
} ??
ClassB.prototype=new?ClassA(); ??
var?objB1=new?ClassB(); ??
var?objB2=new?ClassB(); ??
objB1.a=‘!!!’; ??
alert(objB1.a); ??
alert(objB2.a); ??

每个子类对象都执有同一个原型的引用所以子类对象中的原型成员实际是同一个

JavaScript代码

function?ClassA() ??
{ ??
????this.a=function(){alert();}; ??
} ??
function?ClassB() ??
{ ??
????this.b=function(){alert();}; ??
} ??
ClassB.prototype=new?ClassA(); ??
var?objB1=new?ClassB(); ??
var?objB2=new?ClassB(); ??
alert(objB1.a==objB2.a); ??
alert(objB1.b==objB2.b); ??

构造子类时原型的构造函数不会被执行

JavaScript代码

function?ClassA() ??
{ ??
????alert(“a”); ??
????this.a=function(){alert();}; ??
} ??
function?ClassB() ??
{ ??
????alert(“b”); ??
????this.b=function(){alert();}; ??
} ??
ClassB.prototype=new?ClassA(); ??
var?objB1=new?ClassB(); ??
var?objB2=new?ClassB(); ??

接下来是致命的，在子类对象中访问原型的成员对象：

<script>

function ClassA()

{

? ? this.a=[];

}

function ClassB()

{

? ? this.b=function(){alert();};

}

ClassB.prototype=new ClassA();

var objB1=new ClassB();

var objB2=new ClassB();

objB1.a.push(1,2,3);

alert(objB2.a);

//所有b的实例中的a成员全都变了！！

</script>

再看一个例子：

首先我们创建一个animal类

JavaScript代码

var?animal?=?function(){??//这就是constructor?function?了?? ??
???this.name?=?‘pipi’;????? ??
???this.age?=?10;??????? ??
???this.height?=?0;??????? ??
}???

到这里我们知道如何在js中定义一个类了，接下来我们展示如何写一个cat

JavaScript代码

var?cat?=?function(){????? ??
????this.play?=?function(){?????? ??
????????alert(‘cat?play’)????? ??
????}????? ??
}????? ??
cat?.prototype?=?new?animal?();????? ??
?//prototype?属性指向一个对象?? ??
var?c1?=?new?cat(); ??
alert(c1.name);??

到这里，cat就继承了animal 对象，类cat的一个实例对象c1拥有属性name,age,height,和方法play了。
那么prototype起到了一个什么样的作用呢？
prototype就好比一个指针，它指向一个object，这个object就称为子类对象的原型。当cat的对象被创建的时候，由于cat的构造函数拥有prototype属性，那么cat的实例就会间接指向这个原型对象了（说成间接的是因为每个object都有一个constructor 属性指向它的构造函数）。
那么问题来了，“当我们修改对象 c1 的name属性的时候，会不会修改它prototype的name属性值呢？”，答案是否定的。
接下来详细解析：
1.访问name属性：首先当我们第一次访问c1.name的属性的时候，我们会得到值“pipi”，这个和我们预料中的一样。但是计算过程你未必知道。
它计算的过程是这样的：第一步：检查c1对象中是否有name属性,找到的话就返回值，没有就跳到第二步，显然没有找到，因为cat的构造函数中没有定义。第二步：当第一步没有找时，去间接访问prototype对象所指向的object，如果在prototype对象中找到的name属性的话，就返回找到的属性值。如果还是没有找到的话，再去递归地寻找prototype对象的prototype对象（去找它的爷爷），一直到找到name属性或者没有prototype对象为止。如果到最后还是没有找到name属性的话就返回undefined。

2.设定name属性：当我们设定c1对象的name属性时，及调用 c1.name= ‘ new name’;? 这个过程就简单多了。首先检查是否对象已有该属性，若已存在则修改当前值，若不存在则为该对象新增一个属性并设定当前值。值得一提的是，在设定值的过程中没有去访问prototype属性。

为了加深理解，我们再看一个 read-write-read 的过程，第一次read的时候，由于自己的对象没有name属性，那么就会返回的原型对象的name属性的值。第二步，写入name的值，同样没发现本身对象有name属性,那么就在本身对象上新建一个name属性，然后赋值。第三步，再次读取name属性，由于在第二步中已经新建了name属性，此时就返回在第二步中设定的值。值得一提的是，在这三步中没有改变原型对象的值。

好了，到此详细分析了 javascript对象是如果实现继承的，其实和其他的面向对象语言不一样的是，javascript的继承机制是对象的原型继承而不是类型继承。

WEB前端开发

【继承】javascript的prototype继承

相关推荐

评论抢沙发

置顶推荐

最近文章

热门标签

最新评论

分类目录

热门文章

前端开发相关广告投放更专业更精准

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

相关推荐

评论 抢沙发

置顶推荐

最近文章

热门标签

最新评论

分类目录

热门文章

前端开发相关广告投放 更专业 更精准

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

评论抢沙发

前端开发相关广告投放更专业更精准