JavaScript继承模式粗探


Posted in Javascript onJanuary 12, 2016

真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承。Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍《Javascript模式》中关于原型实现继承的几种方法,下面来谈谈JS中比较简单的继承方法,如果大家有不同意见,欢迎建议。

最基础的原型链继承在这里就不复述了,主要讲一下其他的继承模式。

1.借用构造函数继承

function Father (name) {
this.name=name;
}
function Son (name) {
Father.call(this,name); //在子类型中调用超类型的构造函数
this.age=15;
}
var me=new Son("Su");

好处:可以为子类型传递参数,如图中的name属性。

坏处:1.方法在构造函数中定义,无法复用。2.超类型原型中定义的方法对子类型是不可见的。

2.组合继承(综合原型链与构造函数)

//超类型构造函数function Father (name) {
this.name=name;
this.famMember=[];
}//超类型构造函数原型方法
Father.prototype.sayName=function () {
alert(this.name);
}//子类型构造函数
function Son (name,age) {
Father.call(this,name); //构造函数方法
this.age=age;
}
Son.prototype=new Father(); //重写子类型原型对象
Son.prototype.constructor=Son; //重写构造函数属性指向子类型
Son.prototype.sayAge=function () {
alert(this.age);
} //重写原型对象后再加入方法
var me=new Son("Su",15);
me.famMember.push("dad","mom"); //子类型可以调用超类型构造函数内的方法var he=new Son("Li",14);alert(he.famMember); // []

好处:不同的子类既可以拥有自己的属性,也可以使用相同的方法。

坏处:这种方法需要调用2次超类型的构造函数,同名的属性方法会被覆盖一次。

3.原型式继承 (类似Object.create())

function object (o) {
function F () {}
F.prototype=o;
return new F();
}var obj={}; //将obj对象传入作为新对象的原型。var me=object(obj);

使用这种方法继承需要有一个对象作为原型对象,所以所有继承其的子类型的属性方法都是共用的。

ES5通过新增Object.creatr()方法规范了原型式继承。

4.寄生式继承 (可以设置私有方法的原型式继承)

function object (o) {
function F () {}
F.prototype=o;
return new F();
}
var obj={}; //将obj对象传入作为新对象的原型。到这里都与原型式继承相同function creObj(o) {var clone=object(obj);
clone.sayHi=function () {

alert("Hi");
};return clone; }
var me=creObj(obj);

好处:这种方式弥补了原型式继承只有公有属性方法的缺陷,使子类型能有私有属性方法。

5.寄生组合式继承

function inherit (father,son) {
var pro=Object(father.prototype); //创建超类型原型对象的副本
pro.constructor=son;
son.prototype=pro;



 //将副本作为子类型的原型对象
}

本方法用于弥补组合继承中属性方法覆盖的问题。

用上图代码代替组合继承中 Son.prototype=new Father(); 这段代码。这样只需调用一次父类型的构造函数,避免了创造多余不必要的属性方法,并且保持了原型链不改变,是一种理想的引用类型继承方法。

关于js继承模式先粗略给大家介绍这么多,相信对大家有所帮助,更多信息请继续关注三水点靠木网站。

Javascript 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
轻松实现Bootstrap图片轮播
Apr 20 #Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 #Javascript
学习JavaScript设计模式之策略模式
Jan 12 #Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 #Javascript
jQuery版本升级踩坑大全
Jan 12 #Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 #Javascript
7个jQuery最佳实践
Jan 12 #Javascript
You might like
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
canvas实现钟表效果
2017/02/13 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
中学生自我评价范文
2014/02/08 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
雷锋之歌观后感
2015/06/10 职场文书
运动会广播稿50字
2015/08/19 职场文书