JavaScript设计模式学习之“类式继承”


Posted in Javascript onMarch 12, 2015

在做一件事情之前,首先要清楚做这件事情的好处有什么,相信不会有哪个人愿意无缘无故的去做事情。一般说来,我们在设计类的时候,实际上就是希望能减少重复性的代码,使用继承可以完美的做到这一点,借助继承机制,你可以在现有类的基础上再次进行设计并且充分利用它们已经具备的各种方法,而对设计的修改也更为轻松。废话不多说了,举例说明:

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://3water.com");

alert(bloger.name=="zhenn");   /*返回ture*/

alert(bloger.blog)   /*提示https://3water.com*/

alert(bloger.getname()=="zhenn");   /*提示"bloger.getname is not a function"*/

通过上例可以看到,Bloger在其内部通过call动态调用了其父类Person的原生属性和方法(关于call的讲解请参考https://3water.com/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://3water.com");

alert(bloger.name=="zhenn");   /*返回ture*/

alert(bloger.blog)   /*提示https://3water.com*/

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 相关文章推荐
javascript 显示当前系统时间代码
Dec 28 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
Jquery之美中不足小结
Feb 16 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 #Javascript
JavaScript中return false的用法
Mar 12 #Javascript
JavaScript中神奇的call()方法
Mar 12 #Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 #Javascript
JavaScript中定义函数的三种方法
Mar 12 #Javascript
javascript实时显示北京时间的方法
Mar 12 #Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 #Javascript
You might like
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
JQuery toggle使用分析
2009/11/16 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
python使用opencv进行人脸识别
2017/04/07 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python判断无向图环是否存在的示例
2019/11/22 Python
详解python破解zip文件密码的方法
2020/01/13 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
django创建css文件夹的具体方法
2020/07/31 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
八年级美术教学反思
2014/02/02 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
企业文化理念标语
2014/06/10 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
投标单位介绍信
2015/05/05 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
Go语言应该什么情况使用指针
2021/07/25 Golang
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技