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 相关文章推荐
列表内容的选择
Jun 30 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
鼠标事件的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的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
php自动载入类用法实例分析
2016/06/24 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
jQuery插件Validation表单验证详解
2018/05/26 jQuery
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
pygame实现成语填空游戏
2019/10/29 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
python基于socket函数实现端口扫描
2020/05/28 Python
python Cartopy的基础使用详解
2020/11/01 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
研究生给导师的自荐信
2015/03/06 职场文书
学历证明样本
2015/06/16 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
python简单验证码识别的实现过程
2021/06/20 Python
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python