Javascript非构造函数的继承


Posted in Javascript onApril 27, 2015

一、什么是"非构造函数"的继承?

比如,现在有一个对象,叫做"中国人"。

var Chinese = { nation:'中国' };

还有一个对象,叫做"医生"。

 var Doctor ={ career:'医生' }

请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象?

这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承"。

二、object()方法

json格式的发明人Douglas Crockford,提出了一个object()函数,可以做到这一点。

function object(o) {


function F() {}



F.prototype = o;



return new F();


}

这个object()函数,其实只做一件事,就是把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起。

使用的时候,第一步先在父对象的基础上,生成子对象:

var Doctor = object(Chinese);

然后,再加上子对象本身的属性:

Doctor.career = '医生';

这时,子对象已经继承了父对象的属性了。

alert(Doctor.nation); //中国

三、浅拷贝

除了使用"prototype链"以外,还有另一种思路:把父对象的属性,全部拷贝给子对象,也能实现继承。

下面这个函数,就是在做拷贝:

function extendCopy(p) {



var c = {};



for (var i in p) {



c[i] = p[i];

  }



c.uber = p;

 return c; }

使用的时候,这样写:

var Doctor = extendCopy(Chinese);

Doctor.career = '医生';

alert(Doctor.nation); // 中国

但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。

请看,现在给Chinese添加一个"出生地"属性,它的值是一个数组。

Chinese.birthPlaces = ['北京','上海','香港'];

通过extendCopy()函数,Doctor继承了Chinese。

var Doctor = extendCopy(Chinese);

然后,我们为Doctor的"出生地"添加一个城市:

Doctor.birthPlaces.push('厦门');

发生了什么事?Chinese的"出生地"也被改掉了!

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门

alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门

所以,extendCopy()只是拷贝基本类型的数据,我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。

四、深拷贝

所谓"深拷贝",就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用"浅拷贝"就行了。

function deepCopy(p, c) {



var c = c || {};



for (var i in p) {




if (typeof p[i] === 'object') {





c[i] = (p[i].constructor === Array) ? [] : {};





deepCopy(p[i], c[i]);




} else {





 c[i] = p[i];




}
}



return c; }

使用的时候这样写:

var Doctor = deepCopy(Chinese);

现在,给父对象加一个属性,值为数组。然后,在子对象上修改这个属性:

Chinese.birthPlaces = ['北京','上海','香港'];

Doctor.birthPlaces.push('厦门');

这时,父对象就不会受到影响了。

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门

alert(Chinese.birthPlaces); //北京, 上海, 香港

目前,jQuery库使用的就是这种继承方法。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 #Javascript
jquery简单的弹出层浮动层代码
Apr 27 #Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 #Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 #Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 #Javascript
使用console进行性能测试
Apr 27 #Javascript
浅谈javascript实现八大排序
Apr 27 #Javascript
You might like
discuz7 phpMysql操作类
2009/06/21 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
Python实现的knn算法示例
2018/06/14 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
七匹狼男装广告词
2014/03/21 职场文书
意向书范本
2014/07/29 职场文书
讲党性心得体会
2014/09/03 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
国富论读书笔记
2015/06/26 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python