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 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
js三种排序算法分享
Aug 16 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 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
基于header的一些常用指令详解
2013/06/06 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
vant实现购物车功能
2020/06/29 Javascript
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
Python定时执行之Timer用法示例
2015/05/27 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python抽取指定url页面的title方法
2018/05/11 Python
Python实现DDos攻击实例详解
2019/02/02 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
工商管理专业应届生求职信
2013/11/04 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
2014年团支书工作总结
2014/11/14 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
2015年新教师工作总结
2015/04/28 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
Python基础之数据类型知识汇总
2021/05/18 Python
redis中lua脚本使用教程
2021/11/01 Redis
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技