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 相关文章推荐
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
jQuery选择器全集详解
Nov 24 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 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
分享一个超好用的php header下载函数
2014/01/31 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
JS Array对象入门分析
2008/10/30 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
jquery中radio checked问题
2015/03/16 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
Python中zip()函数用法实例教程
2014/07/31 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
详解python深浅拷贝区别
2019/06/24 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
python新手学习使用库
2020/06/11 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
教师岗位职责
2013/11/17 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
二年级学生评语大全
2014/04/23 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
鲁迅故居导游词
2015/02/05 职场文书
给病人的慰问信
2015/03/23 职场文书