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 CSS样式控制 学习笔记
Jul 23 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
javascript实现日历效果
Jun 17 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生成缩略图的代码
2011/01/12 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python基础练习之几个简单的游戏
2017/11/10 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
python日期相关操作实例小结
2019/06/24 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Pytorch中.new()的作用详解
2020/02/18 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
毕业生求职的求职信
2013/12/05 职场文书
党员创先争优承诺书
2014/03/26 职场文书
幼儿教师辞职信
2015/02/27 职场文书
行政申诉状范文
2015/05/20 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
MySQL大小写敏感的注意事项
2021/05/24 MySQL
python实现简单的井字棋
2021/05/26 Python
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers