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 相关文章推荐
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
JS实现瀑布流效果
Mar 07 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
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
php备份数据库类分享
2015/04/14 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
jquery编写日期选择器
2017/03/16 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
Python Tkinter实现简易计算器功能
2018/01/30 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
python如何读取bin文件并下发串口
2019/07/05 Python
django实现用户注册实例讲解
2019/10/30 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
施工单位工程部经理岗位职责
2015/04/09 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL