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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 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/05/12 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
bootstrap table实例详解
2017/01/06 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
Python实现的二维码生成小软件
2014/07/11 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Python实现井字棋小游戏
2020/03/09 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
django 实现简单的插入视频
2020/04/07 Python
Python实现代码块儿折叠
2020/04/15 Python
Django日志及中间件模块应用案例
2020/09/10 Python
python实现二分查找算法
2020/09/18 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
亲子读书活动方案
2014/02/22 职场文书
篮球比赛策划方案
2014/06/05 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python