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库还是自己写代码?
Jan 28 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
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单态设计模式(单例模式)实例
2014/11/18 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
js获取一组日期中最近连续的天数
2017/05/25 Javascript
JS中的三个循环小结
2017/06/20 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
教师岗位职责范本
2013/12/29 职场文书
农村党员对照检查材料
2014/09/24 职场文书
2014年优秀党员材料
2014/12/18 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
Nginx源码编译安装过程记录
2021/11/17 Servers
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python