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 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 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注销代码(session注销)
2012/05/31 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
python取余运算符知识点详解
2019/06/27 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
Python tkinter模版代码实例
2020/02/05 Python
python 通过exifread读取照片信息
2020/12/24 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
Linux开机引导的步骤是什么
2014/02/26 面试题
前台接待岗位职责
2013/12/03 职场文书
高中毕业生生活的自我评价
2013/12/08 职场文书
教师师德师风整改措施
2014/10/24 职场文书
营业员岗位职责范本
2015/04/14 职场文书
python多线程方法详解
2022/01/18 Python