Javascript非构造函数的继承
一、什么是"非构造函数"的继承?
比如,现在有一个对象,叫做"中国人"。
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库使用的就是这种继承方法。
原文地址:http://www.j--d.com/js/414.html(无耻的抄小树的了)
转载于:https://www.cnblogs.com/LoveOrHate/p/4457596.html
Javascript非构造函数的继承相关推荐
- JavaScript学习总结(二十)——Javascript非构造函数的继承
一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". 1 var Chinese = { 2 nation:'中国' 3 }; 还有一个对象 ...
- JavaScript [ 转 ] —— 面向对象编程(三):非构造函数的继承
作者:阮一峰 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承" ...
- Javascript面向对象编程(三):非构造函数的继承
今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Ch ...
- 总结 构造函数与非构造函数 原型继承的一个方法
这两天真的一直在看原型以及继承之间的千丝万缕,哇,收获颇多,不过所谓温故知新,还是要多复习复习知识点,才能察觉那些之前不易发现的小小sparkle 真心推荐MDN文档--对象原型,JavaScript ...
- js 非构造函数的继承 object()方法
$(document).ready(initPage);function initPage() {var Doctor = object(Chinese);Doctor.career = '医生';a ...
- (二)Javascript面向对象编程:构造函数的继承
Javascript面向对象编程:构造函数的继承 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承&q ...
- Javascript面向对象编程(二) 构造函数的继承
标注:(转载自:http://www.jb51.net/article/28128.htm) 今天要介绍的是,如何生成一个"继承"多个对象的实例. 比如,现在有一个"动 ...
- JavaScript 面向对象编程(二) —— 构造函数 / 原型 / 继承 / ES5 新增方法
本篇为 JavaScript 进阶 ES6 系列笔记第二篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 : Javascript 继承机制的 ...
- JavaScript 原型链和继承面试题
JavaScript 原型链和继承问题 JavaScript 中没有类的概念的,主要通过原型链来实现继承.通常情况下,继承意味着复制操作,然而 JavaScript默认并不会复制对象的属性,相反,Ja ...
最新文章
- PHP如何识别系统语言或浏览器语言
- VMware大会宋家瑜言虚拟化2015年方至巅峰
- python爬虫——论抓包的正确姿势和学好Javascript的重要性(1)
- Java编写基于netty的RPC框架
- python 蓝牙模块pybluz安装
- c++如何打开hdf5文件_如何打开CSV格式文件才能正常使用?
- python手机安装模块_python如何安装模块 模块安装操作教程
- spark写入oracle 优化,spark读写数据库大表分区性能优化
- Java日期操作工具类
- 腾讯掌舵者马化腾,才是移动互联网的大功臣?
- windows查看器无法打开图片_Win7自带图片查看器异常
- 为什么要打jar_为什么海带要打一个结?
- java 变量 类之间调用_java内部类与其他类变量之间的调用方式
- 英语报纸计算机类,报纸和电脑英语作文
- 生活随记 - 感恩老同学
- 【转】-ECshop数据库表结构
- 弘辽科技:如何分析买家秀是否优质?如何优化评价、买家秀?
- git分支开发练习以及创建文件提交到版本库
- 大数据与算法系列之算法性能分析
- 利用pearcmd.php本地文件包含(LFI)
热门文章
- python 批量下载文件
- 实例:如何设计一款好的Metro UI应用
- 解决不是有效的win32应用程序
- (转载)Nutch2 WebPage 字段解释
- Hadoop系列六:Hadoop之HBase篇
- patch -p0 和patch -p1的区别
- [转]NS2添加多接口
- python的数值类型和运算符_python的数值类型和运算符
- v-if和v-show的异同
- 定时任务 ||​​​​​​​​​​​​​​ Cron表达式