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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
理解javascript中的with关键字
Feb 15 Javascript
Javascript的表单验证长度
Mar 16 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
Python基类函数的重载与调用实例分析
2015/01/12 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python获取代理IP的实例分享
2018/05/07 Python
Numpy中的mask的使用
2018/07/21 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
意向协议书范本
2014/04/23 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
员工安全责任协议书
2016/03/22 职场文书
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers