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自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
node中的cookie的具体使用
Sep 13 Javascript
详解Vue组件之间通信的七种方式
Apr 14 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
splice slice区别
2006/10/09 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
几种响应式文字详解
2017/05/19 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
大一自我鉴定范文
2013/10/04 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
师德师风承诺书
2014/05/23 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
小王子读书笔记
2015/06/29 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
apache ftpserver搭建ftp服务器
2022/05/20 Servers