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 相关文章推荐
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
javascript常用方法总结
May 14 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
layui table 参数设置方法
Aug 14 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 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提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
javascript代码实现简易计算器
2021/01/25 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
详解用python写一个抽奖程序
2019/05/10 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
pytorch中的inference使用实例
2020/02/20 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
医院门卫岗位职责
2013/12/30 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
三年级音乐教学反思
2014/01/28 职场文书
军人违纪检讨书
2014/02/04 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
通知的格式范文
2015/04/27 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
工作简历的自我评价
2019/05/16 职场文书