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 相关文章推荐
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 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
FleaPHP的安全设置方法
2008/09/15 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
方法名是否可以与构造器的名字相同
2012/06/04 面试题
搞笑欢迎词大全
2015/09/30 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技