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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
微信小程序如何获取手机验证码
Nov 04 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
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
PHP+DBM的同学录程序(4)
2006/10/09 PHP
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
php变量范围介绍
2012/10/15 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
php创建session的方法实例详解
2015/01/27 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
range 标准化之获取
2011/08/28 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
仿京东快报向上滚动的实例
2017/12/13 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
目前最全的python的就业方向
2018/06/05 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
策划助理岗位职责
2013/11/18 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
党支部综合考察意见
2015/06/01 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
一条 SQL 语句执行过程
2022/03/17 MySQL