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 相关文章推荐
基于jquery的15款幻灯片插件
Apr 10 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
使用vant的地域控件追加全部选项
Nov 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
php不写闭合标签的好处
2014/03/04 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
html中table数据排序的js代码
2011/08/09 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
详解Python中的type()方法的使用
2015/05/21 Python
python中模块查找的原理与方法详解
2017/08/11 Python
详解如何使用Python编写vim插件
2017/11/28 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
初一学生评语大全
2014/04/24 职场文书
靠谱准确的求职信
2019/04/02 职场文书