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 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
js 学习笔记(三)
Dec 29 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
vue-socket.io跨域问题有效解决方法
Feb 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+mysql)
2007/11/23 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
jQuery总体架构的理解分析
2011/03/07 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
Python实现多线程的两种方式分析
2018/08/29 Python
python实现批量注册网站用户的示例
2019/02/22 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
python里dict变成list实例方法
2019/06/26 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
python Tensor和Array对比分析
2020/01/08 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
经典的班主任推荐信
2013/10/28 职场文书
会计专业推荐信
2013/10/29 职场文书
业务主管岗位职责
2013/11/20 职场文书
打架检讨书100字
2014/01/08 职场文书
大学生村官工作感言
2014/01/10 职场文书
趣味运动会新闻稿
2015/07/17 职场文书