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 相关文章推荐
常用js脚本
Dec 03 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
javascript中的作用域scope介绍
Dec 28 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
Node.js使用Express.Router的方法
Nov 14 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 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下载远程图片并保存到本地方法总结
2016/01/22 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
一些常用的Javascript函数
2006/12/22 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
js+html制作简单验证码
2017/02/16 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
详细分析python3的reduce函数
2017/12/05 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
Python操作qml对象过程详解
2019/09/26 Python
Python如何实现远程方法调用
2020/08/07 Python
比较一下entity bean和session bean
2013/12/27 面试题
教师个人读书活动总结
2014/07/08 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
详解redis在微服务领域的贡献
2021/10/16 Redis