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 相关文章推荐
jQuery代码优化 事件委托篇
Nov 01 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 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
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
美国校园市场:OCM
2017/06/08 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
妇产医师自荐信
2014/01/29 职场文书
公司委托书格式范文
2014/04/04 职场文书
家长写给孩子的评语
2014/04/18 职场文书
教师先进事迹材料
2014/12/16 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
大学生创业计划书
2019/06/24 职场文书