JavaScript学习笔记(三十八) 复制属性继承
复制属性继承(Inheritance by Copying Properties)
function extend(parent, child) {
var i;
child = child || {};
for (i in parent) {
if (parent.hasOwnProperty(i)) {
child[i] = parent[i];
}
}
return child;
}
它是一个简单实现,仅仅依次遍历parent的成员并复制它们。在这个实现中,child是可选的;如果你不传递一个已经存在的对象去扩展,那么一个新对象被创建并被返回。
var dad = {name: "Adam"};
var kid = extend(dad);
kid.name; // "Adam"
给出的这种实现就是所谓的对象的"浅复制(shallow copy)"。深度复制另一方面意味着检查你将要复制的属性是否是一个对象或者是一个数组,如果是,递归的遍历它的属性并
同样的复制它们。使用浅复制(因为对象在JavaScript中通过引用传递),如果你改变child的属性,并且这个属性碰巧是一个对象,那么你也会修改(所有的)parent。
var dad = {
counts: [1, 2, 3],
reads: {
paper: true
}
};
var kid = extend(dad);
kid.counts.push(4);
dad.counts.toString(); // "1,2,3,4"
dad.reads === kid.reads; // true
现在让我们修改extend()函数实现深度复制。你要做的就是检查属性的类型是否是个对象,如果是,递归复制它的属性。
function extendDeep(parent, child) {
var i, toStr = Object.prototype.toString,
astr = "[object Array]";
child = child || {};
for (i in parent) {
if (parent.hasOwnProperty(i)) {
if (typeof parent[i] === "object") {
child[i] = (toStr.call(parent[i]) === astr) ? [] : {};
extendDeep(parent[i], child[i]);
} else {
child[i] = parent[i];
}
}
}
return child;
}
现在测试新实现给我们提供给我们的真正的对象的复制,那么child对象不会修改它们的parents:
var dad = {
counts: [1, 2, 3],
reads: {
paper: true
}
};
var kid = extendDeep(dad);
kid.counts.push(4);
kid.counts.toString(); // "1,2,3,4"
dad.counts.toString(); // "1,2,3"
dad.reads === kid.reads; // false
kid.reads.paper = false;
kid.reads.web = true;
dad.reads.paper; // true
这种属性复制模式简单并且被广泛使用;比如Firebug(使用JavaScript写的Firefox扩展)有一个叫做extend()的方法实现了一个浅复制,和jQuery的extend()实现了一个深度复制。YUI3提供一个方法叫做Y.clone(),提供一个深度复制并且通过绑定函数到child对象复制函数(接下来内容会有更多的绑定)。
JavaScript学习笔记(三十八) 复制属性继承的更多相关文章
- 【Unity 3D】学习笔记三十八:角色控制器
角色控制器 在unity中,已经帮我们实现的上下左右跳等动作,并将他们封装成了角色控制器.角色控制器保存在unity标准资源包中,能够说是很的强大.能够模拟第一或者第三人称视角.不受刚体的限制,很适用 ...
- PHP学习笔记三十八【下载】
<?php //演示下载一个图片 $file_name="SunSet.jpg"; $file_name=iconv("utf-8","gb23 ...
- Java框架spring 学习笔记(十八):事务管理(xml配置文件管理)
在Java框架spring 学习笔记(十八):事务操作中,有一个问题: package cn.service; import cn.dao.OrderDao; public class OrderSe ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
随机推荐
- HTML5+Css3-webkit-filter
-webkit-filter 现在规范中支持的效果有: grayscale 灰度 sepia 褐色 saturate 饱和度 hue-rotate 色相旋转 invert 反色 opacity 透明度 ...
- Bug :”解压压缩文件失败: cpio; 在头中不存在归档“
问题描述: 在rpm包目录下执行rpm -ivh *rpm -force时,出现标题错误 解决办法: *src.rpm包也就源码包不能被直接进行安装,需要先将src.rpm包进行编译生成二进制的rpm ...
- 限制对比度自适应直方图均衡(Contrast Limited Adaptive histgram equalization/CLAHE)
转自:http://www.cnblogs.com/Imageshop/archive/2013/04/07/3006334.html 一.自适应直方图均衡化(Adaptive histgram eq ...
- 02 - 替换SetInput方法 VTK 6.0 迁移 (2013-06-30 16:22)
VTK6 引入了许多不兼容的变化,这其中就包括用SetInputData()和SetInputConnection()替换SetInput()方法.在先前的版本中,VTK4 引入了SetInput() ...
- SSD、高级格式化硬盘,4K,分区,对齐,Ghost能不能用的解释用SSD的都可以看看
或者以上,建议选择2048,这是Win7分区使用的值,实际对齐大小就为1024K. 4.如何知道是否对齐? 使用工具AS SSD Benchmark(HDTune Pro 4.6目前测的禁绝) ...
- YII增加全局函数
法1: 在使用Yii开发中我们经常会遇到一个问题,每次使用Yii的组件.扩展等,我们会像下面一样去写: <?php Yii::app()->user; Yii::app()->get ...
- .net连接oracle(无客户端)
使用DDTek.Oracle.dll可以在没有安装oracle客户端的情况下连接远程的oracle. string _conString = "Host=192.168.1.1;Port=1 ...
- HDU4432 Sum of Divisors
涉及知识点: 1. 进制转换. 2. 找因子时注意可以降低复杂度. Sum of divisors Time Limit: 2000/1000 MS (Java/Others) Memory L ...
- 简单干净的C# MVC设计案例:BrothersDropdownList()
团队切换器 在/Teams/Details?id=xxx的页面,有这样一个控件,使得不需要回到/Teams/Index就能轻松切换团队: 由于这种团队切换控件比比皆是,比如在团队故事板中(以及其他地方 ...
- java笔记3之赋值运算符
赋值运算符: 基本的赋值运算符:= 把=右边的数据赋值给左边. 扩展的赋值运算符:+=,-=,*=,/=,%= += 把左边 ...