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 三击事件实现代码
Sep 11 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
js利用拖放实现添加删除
Aug 27 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 安全检测代码片段(分享)
2013/07/05 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
python retrying模块的使用方法详解
2019/09/25 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
文秘专业大学生求职信
2013/11/10 职场文书
土木工程专业推荐信
2014/02/19 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书