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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
node打造微信个人号机器人的方法示例
Apr 26 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
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
php多进程应用场景实例详解
2019/07/22 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
分享几个超级震憾的图片特效
2012/01/08 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
Python元字符的用法实例解析
2018/01/17 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
Django实现内容缓存实例方法
2020/06/30 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
学生鉴定评语大全
2014/05/05 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
工作简报格式范文
2015/07/21 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python