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), 一样可以实现完全继承！
相关文章
这篇文章主要为大家详细介绍了原生js仿jquery animate动画效果，具有一定的，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要为大家详细介绍了JavaScript实现打砖块游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
JS解决 Array.fill()参数为对象指向同一个引用地址的问题
这篇文章主要介绍了JS解决 Array.fill()参数为对象指向同一个引用地址问题，解决方案使用map返回出不同的引用的地址，fill参数可随意填写（不为空），主要是map函数中返回的数据,需要的朋友可以参考下2023-02-02
uniapp 如何设置 tabbar 的 midButton 按钮
在UniApp开发中,设置TabBar的midButton按钮可以增加用户交互的便利性,本文介绍了在App.vue中监听事件的方法,并提供了官方文档链接作为参考,通过这种方式可以实现TabBar中的特殊按钮功能,提升应用的用户体验2024-10-10
这篇文章主要介绍了原生Js 实现的简单无缝滚动轮播图的示例代码，帮助大家更好的理解喝学习使用js，感兴趣的朋友可以了解下2021-05-05
element-ui 对话框dialog使用echarts报错'dom没有获取到'的问题
这篇文章主要介绍了element-ui 对话框dialog里使用echarts，报错'dom没有获取到'的问题，在这个事件里边进行echarts的初始化，执行数据，本文结合实例代码给大家详细讲解,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了js之切换全屏和退出全屏实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了js实现遍历含有input的table方法,结合实例形式分析了jsp读取数据库动态生成table及JavaScript遍历table的相关技巧,需要的朋友可以参考下2015-12-12
单例模式也称作为单子模式，更多的也叫做单体模式。为软件设计中较为简单但是最为常用的一种设计模式。这篇文章主要介绍了Javascript实现单例模式的相关资料,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了详解如何提升JSON.stringify()的性能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
最新评论