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操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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
多人战的战术与战略
2020/03/04 星际争霸
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
php桌面中心(一) 创建数据库
2007/03/11 PHP
一个PHP的String类代码
2010/04/20 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
PHP多进程简单实例小结
2019/11/09 PHP
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
flask框架视图函数用法示例
2018/07/19 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
产品销售员岗位职责
2013/12/18 职场文书
运动会入场解说词300字
2014/01/25 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
民事授权委托书范文
2014/08/02 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫