构造函数(类)继承的方式与实验

人工智能

621人已加入

描述

类式继承:利用构造函数(类)继承的方式

类 : JS是没有类的概念的 , 把JS中的构造函数看做的类
举例

function Aaa(){ //父类 this.name = '小明'; } Aaa.prototype.showName = function(){ alert( this.name ); }; function Bbb(){ //子类 } Bbb.prototype = new Aaa();//这个就叫做类式继承 var b1=new Bbb(); b1.showName();//小明 alert(b1.name);//小明(也是一层层查找)

下面图很清楚的表示了上面的关系

 

问题一:但是上面的继承是有问题,不信的话我们做一个实验。继续在上面代码的基础上添加代码

alert( b1.constructor );

弹出

function Aaa(){ //父类 this.name = '小明'; }

所以应该加上一句话,修正指向问题

Bbb.prototype = new Aaa();//这个就叫做类式继承 Bbb.prototype constructor=Bbb;//修正指向问题

问题二:把上面的代码稍作修改

function Aaa(){ //父类 this.name = [1,2,3]; } Aaa.prototype.showName = function(){ alert( this.name ); }; function Bbb(){ //子类 } Bbb.prototype = new Aaa(); Bbb.prototype.constructor = Bbb; //修正指向问题 var b1 = new Bbb(); b1.name.push(4); var b2 = new Bbb(); alert( b2.name );//[1,2,3,4]

分析,b1,b2是不同的对象,但是上面互相影响了,所以是有问题的。因为两个找到的都是new Aaa()下面的name,是一个东西,所以会互相影响。
可以这样改正,如下所示

function Aaa(){ //父类 this.name = [1,2,3]; } Aaa.prototype.showName = function(){ alert( this.name ); }; function Bbb(){ //子类 Aaa.call(this);//①此处实现了传递属性 } var F = function(){}; F.prototype = Aaa.prototype; Bbb.prototype = new F();//从下面的图可以看出,此处只能传递方法,没有办法传递属性 Bbb.prototype.constructor = Bbb; //修正指向问题 var b1 = new Bbb(); b1.name.push(4); var b2 = new Bbb(); alert( b2.name );//[1,2,3,4]

 

打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分