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的AngularJS库编写hello world的方法
Jun 23 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
基于JS实现一个随机生成验证码功能
May 29 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
自己动手做一个SQL解释器
2006/10/09 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
PHP7 弃用功能
2021/03/09 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
厂长助理岗位职责
2013/12/27 职场文书
关于责任的演讲稿
2014/05/20 职场文书
教研处工作方案
2014/05/26 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
交通事故起诉书
2015/05/19 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
导游词之阆中古城
2019/12/23 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫