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使用prototype定义对象类型(转)[
Dec 22 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
js选项卡的制作方法
Jan 23 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 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
PHP中文分词的简单实现代码分享
2011/07/17 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
浅析return false的正确使用
2013/11/04 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
Python中规范定义命名空间的一些建议
2016/06/04 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python解析多层json操作示例
2019/12/30 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
装修设计师求职信
2014/02/26 职场文书
经销商订货会主持词
2014/03/27 职场文书
高中学生期末评语
2014/04/25 职场文书
2015中秋祝酒词
2015/08/12 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python