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 相关文章推荐
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
微信小程序实现页面浮动导航
Jan 28 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
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 Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
让alert不出现弹窗的两种方法
2014/05/18 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
python继承和抽象类的实现方法
2015/01/14 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python操作qml对象过程详解
2019/09/26 Python
如何在python中写hive脚本
2019/11/08 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
西安众合通用.net笔试题
2013/03/18 面试题
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
优秀员工表扬信
2014/01/17 职场文书
2014植树节活动总结
2014/03/11 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android