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 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
详解vue引入子组件方法
Feb 12 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
VUE使用draggable实现组件拖拽
Apr 06 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二维数组的去重问题解析
2011/07/17 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
python实现学生管理系统
2018/01/11 Python
利用nohup来开启python文件的方法
2019/01/14 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
工作分析计划书
2014/04/30 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
珍惜资源的建议书
2014/08/26 职场文书
写景作文评语集锦
2014/12/25 职场文书
关于颐和园的导游词
2015/01/30 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
分享7个 Python 实战项目练习
2022/03/03 Python