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 相关文章推荐
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
JavaScript实现随机点名小程序
Oct 29 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
原生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中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python实现的计算器功能示例
2018/04/26 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python实现大学人员管理系统
2019/10/25 Python
python序列类型种类详解
2020/02/26 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
大学生求职简历的自我评价
2013/10/21 职场文书
小学生读书感言
2014/02/12 职场文书
文明村创建实施方案
2014/03/27 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
政风行风评议工作总结
2014/10/21 职场文书
致运动员赞词
2015/07/22 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书