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控件的相对独立性
Sep 03 Javascript
jquery图片切换插件
Mar 16 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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里8个鲜为人知的安全函数分析
2014/12/09 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
简单的JS多重继承示例
2008/03/13 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
vue数据双向绑定原理解析(get & set)
2017/03/08 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
python 正则式使用心得
2009/05/07 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
生产部统计员岗位职责
2014/01/05 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
django上传文件的三种方式
2021/04/29 Python
python析构函数用法及注意事项
2021/06/22 Python