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 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
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 receiveMail实现收邮件功能
2018/04/25 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
信息技术教学反思
2014/02/12 职场文书
计划生育个人总结
2015/03/02 职场文书
小学体育课教学反思
2016/02/16 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS