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 function代码
May 23 Javascript
测试你的JS的掌握程度的代码
Dec 09 Javascript
初识javascript 文档碎片
Jul 13 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 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
调频问题解答
2021/03/01 无线电
基于empty函数的输出详解
2013/06/17 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
四个PHP非常实用的功能
2015/09/29 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
python得到电脑的开机时间方法
2018/10/15 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
军训教官感言
2014/03/02 职场文书
员工安全生产承诺书
2014/05/22 职场文书
法学自荐信
2014/06/20 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python