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和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
解决vuex刷新数据消失问题
Nov 12 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
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
python五子棋游戏的设计与实现
2019/06/18 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
Python对象的属性访问过程详解
2020/03/05 Python
Python新手学习raise用法
2020/06/03 Python
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android