JS继承--原型链继承和类式继承


Posted in Javascript onApril 08, 2013

什么是继承啊?答:别人白给你的过程就叫继承。

为什么要用继承呢?答:捡现成的呗。

好吧,既然大家都想捡现成的,那就要学会怎么继承!

在了解之前,你需要先了解构造函数对象原型链等概念......

JS里常用的两种继承方式

    原型链继承(对象间的继承)类式继承(构造函数间的继承)

原型链继承

//要继承的对象
var parent={
name : "baba"
  say : function(){ 
alert("I am baba");
}
}

//新对象
var child = proInherit(parent);
//测试
alert(child.name); //"baba"
child.say(); //"I am baba"

利用proInherit(obj)方法,传入对象,就能实现对象的属性及方法的继承,这个方法不是内置方法,所以要自己定义,非常简单:

function proInherit(obj){
function F () {}
F.prototype = obj;
return new F();
}

其中F()为一个临时的空的构造函数,然后将F()的原型设置为父对象,但是同时它又通过受益于_proto_链接而具有其父亲对象的全部功能。

链式图解:

         JS继承--原型链继承和类式继承

 

类式继承

//父类构造函数
function Parent() {
this.name = "baba";
}
//父类原型方法
Parent.prototype.getName = function () {
return this.name;
}
//子类构造函数
function Child() {
this.name = "cc";
}
//类式继承
classInherit(Parent, Child);
//实例
var child = new Child();
alert(child.getName()) //“baba”

下面我们来看看这个继承的关键方法:classInherit(Parent,Child)

var classInherit = (function () {
var F = function () { }
return function (P, C) {
F.prototype = P.prototype;
C.prototype = new F();
C.prototype.constructor = C;
}
}());

 分析一下这个方法:

    首先创建一个空的构造函数F(),用其实例的_proto_属性来构建父类与子类的原型链。起到一个代理的作用,目的是为了防止C.prototype = P.prototype,这样会在子类实例化后修改属性或方法时候,连同父类一起修改。整体采用即时函数并且在闭包中存储F(),防止多次继承时候创建大量的空的构造函数,从而减少消耗内存。最后一行的意思是,由于原型链的关系,C的实例对象的constructor会指向P,所以重新设置。

链式图解:

            JS继承--原型链继承和类式继承

这种方式虽然在实例的时候继承了原型方法,但是父类的属性无法继承,下面介绍一种复制继承,算是对类式继承的补充。

复制继承:

//复制继承
function copyInherit(p, c) {
var i,
toStr = Object.prototype.toString,
astr = "[object Array]";
c = c || {}; 
for (i in p) {
if (p.hasOwnProperty(i)) {
if (typeof p[i] === "object") {
c[i] = toStr.call(p[i]) == astr ? [] : {};
c[i] = copy(p[i], c[i]);
}
else {
c[i] = p[i];
}
}
}
return c;
}
//重写Parent
function Parent() {
this.name = "pp";
this.obj= {a:1,b:2};
this.arr= [1, 2]
}
//实例
var child = new Child();
var parent = new Parent();
copyInherit(parent, child);
alert(child.name) //"baba"
alert(child.arr) //1,2
alert(child.obj.a) //1

 分析下copyInherit(p,c)

当一个值赋予一个变量时候,分为传值和传引用两种方式,当你父对象内属性包含数组类型或是对象类型时候,  c[i] = toStr.call(p[i]) == astr ? [] : {};这一句会避免修改子对象属性而引起的父对象属性被篡改。

总结:

类式继承比较普遍,因为大家都比较熟悉这种构造函数方式,但是内存占用比较大。而原型式继承,占用内存比较小,但是包含数组,或者对象类型的克隆比较麻烦。复制继承简单,而且应用广泛。

 

Javascript 相关文章推荐
JavaScript this 深入理解
Jul 30 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 #Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 #Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 #Javascript
javascript中常用编程知识
Apr 08 #Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 #Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 #Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 #Javascript
You might like
YII模块实现绑定二级域名的方法
2014/07/09 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
List the Codec Files on a Computer
2007/06/11 Javascript
Display SQL Server Version Information
2007/06/21 Javascript
取选中的radio的值
2010/01/11 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
Python如何实现单例模式
2016/06/03 面试题
企业演讲比赛主持词
2014/03/18 职场文书
股权转让协议书
2014/12/07 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
死亡诗社观后感
2015/06/05 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
MYSQL 表的全面总结
2021/11/11 MySQL