Javascript面向对象编程(三) 非构造函数的继承


Posted in Javascript onAugust 28, 2011

今天是最后一个部分,介绍不使用构造函数实现"继承"。
一、什么是"非构造函数"的继承?
比如,现在有一个对象,叫做"中国人"。

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 插件 任意位置浮动固定层
Dec 25 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 Javascript
小程序自定义弹框效果
Nov 16 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
Javascript面向对象编程(二) 构造函数的继承
Aug 28 #Javascript
Javascript 面向对象编程(一) 封装
Aug 28 #Javascript
Javascript继承机制的设计思想分享
Aug 28 #Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 #Javascript
JS面向对象编程浅析
Aug 28 #Javascript
用JS实现一个TreeMenu效果分享
Aug 28 #Javascript
JS target与currentTarget区别说明
Aug 28 #Javascript
You might like
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
解析Python中的二进制位运算符
2015/05/13 Python
Python闭包思想与用法浅析
2018/12/27 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
荷兰超市:DEEN
2018/03/14 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
护士自荐信怎么写
2013/10/18 职场文书
行政主管岗位职责
2013/11/18 职场文书
企业党员公开承诺书
2014/03/26 职场文书
大学计划书范文800字
2014/08/14 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python