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 19 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
vue实现可移动的悬浮按钮
Mar 04 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 实例化类的一点摘记
2008/03/23 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
javascript 二进制运算技巧解析
2012/11/27 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
在JS循环中使用async/await的方法
2018/10/12 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
python的id()函数介绍
2013/02/10 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
pandas带有重复索引操作方法
2018/06/08 Python
Flask框架信号用法实例分析
2018/07/24 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
气象学专业个人求职信
2014/03/15 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
社区灵活就业证明
2014/11/03 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
Java数据结构之堆(优先队列)
2022/05/20 Java/Android