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 function代码
May 23 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 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
一个程序下载的管理程序(二)
2006/10/09 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
JQuery live函数
2010/12/24 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
Python中生成ndarray实例讲解
2021/02/22 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
优秀教师先进事迹
2014/01/22 职场文书
家长写给老师的建议书
2014/03/13 职场文书
保护环境倡议书100字
2014/05/19 职场文书
在校生证明
2015/06/17 职场文书
技能培训通讯稿
2015/07/18 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫