JavaScript设计模式学习之“类式继承”
在做一件事情之前，首先要清楚做这件事情的好处有什么，相信不会有哪个人愿意无缘无故的去做事情。一般说来，我们在设计类的时候，实际上就是希望能减少重复性的代码，使用继承可以完美的做到这一点，借助继承机制，你可以在现有类的基础上再次进行设计并且充分利用它们已经具备的各种方法，而对设计的修改也更为轻松。废话不多说了，举例说明：
function Person(name){
this.name = name;
}
Person.prototype.getname = function(){
return this.name;
}
function Bloger(name,blog){
Person.call(this,name);
this.blog = blog;
}
var bloger = new Bloger("zhenn","https://www.jb51.net");
alert(bloger.name=="zhenn"); /*返回ture*/
alert(bloger.blog) /*提示https://www.jb51.net*/
alert(bloger.getname()=="zhenn"); /*提示"bloger.getname is not a function"*/
通过上例可以看到，Bloger在其内部通过call动态调用了其父类Person的原生属性和方法（关于call的讲解请参考https://www.jb51.net/article/62086.htm），即可以理解为Bloger继承了Person，成为它的一个子类，但是细心的同学会发现，Person原型对象中的方法，仅仅依靠call，是不能继承过来的，这也就是会提示"bloger.getname is not a function"的原因所在了。不过不用担心，对上述代码稍作处理，即可解决这个问题！
function Person(name){
this.name = name;
}
Person.prototype.getname = function(){
return this.name;
}
function Bloger(name,blog){
Person.call(this,name);
this.blog = blog;
}
/*请注意以下两行代码*/
Bloger.prototype = new Person();
Bloger.prototype.constructor = Bloger;
var bloger = new Bloger("zhenn","https://www.jb51.net");
alert(bloger.name=="zhenn"); /*返回ture*/
alert(bloger.blog) /*提示https://www.jb51.net*/
alert(bloger.getname()=="zhenn"); /*提示true*/
在这里需要对这两行代码解释一下，我们知道，每一个构造函数都有一个prototype属性，这个属性指向该构造函数的原型对象，其实原型对象也是实例对象，只不过在原型对象中定义的属性和方法可以提供给所有的实例对象共享，由此可以得出，新添加两行代码的意图就是设置子类的原型对象指向父类的一个实例化对象，而父类的实例化对象会把父类的原型属性方法统统继承过来，这样也就达到了我们的目的，子类的原型继承了所有父类实例对象具有的属性和方法。
但是还应该注意Bloger.prototype.constructor = Bloger;这行代码，因为把子类的prototype设置为父类的实例时，其constructor属性会指向父类，所以要设置子类原型的constructor重新指向子类，至此，已经完美实现了javascript的类式继承！
为了简化子类的声明，可以把扩展子类的整个过程写在一个名为extend的函数中，作用就是基于一个给定的类结构去创建一个新的类：
function extend(childClass,parentClass){
var F = new Function();
F.prototype = parentClass.prototype;
childClass.prototype = new F();
childClass.prototype.constructor = childClass;
}
有了这个extend这个函数，就可以很方便的扩展子类了，只需调用这个函数即可，上述添加的两行代码可改为extend(Bloger,Person), 一样可以实现完全继承！
相关文章
这篇文章主要介绍了javascript实现拖放效果的相关资料，需要的朋友可以参考下2015-12-12
这篇文章主要介绍了详解uniapp的全局变量实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了JS弹性运动实现方法,结合实例形式分析了JS实现弹性运动的原理、相关技术细节与实现技巧,需要的朋友可以参考下2016-12-12
javascript 中对象的继承〔转贴〕...2007-01-01
这篇文章主要介绍了js实现2015年新年倒计时效果，很快就要迎接新的一年，想知道距离2016还有多少天吗？大家可以参考一下这篇文章2015-12-12
在开发的过程中,我们会经常使用到axios进行数据的交互,这篇文章主要给大家介绍了关于axios四种传参方式及后端接参的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了javascript实现简易的计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
JavaScript中获取未知对象属性的代码，需要的朋友可以参考下。2011-04-04
本文主要分享了一个案例，介绍了使用Three.js绘制旋转立方体的方法与实现过程。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
本文讲如何在网页端实现一个仿微信的聊天窗口界面, 以及其中涉及到的一些技术点. 对gameboy闯关游戏相关知识感兴趣的朋友参考下2016-02-02
最新评论