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. 元素: ...
随机推荐
- Web API的CPU占用100%
我用Web API做了一个网站,网站很简单,请求就是几个普通的参数,提交到服务器后,在Web API里做一下参数验证,然后去访问Redis里的TIME命令,最后把TIME命令返回的结果计算出yyyy- ...
- 关于tcc、tlink的编译链接机制的研究
1.学习过程 在c:\下建立文件夹c,并将编译器tcc.exe.连接器tlink.exe.相关文件c0s.obj.cs.lib.emu.lib.maths.lib放入文件夹中. 要搭建一个简单的C语言 ...
- Ubuntu 下对ADT 添加别名(alias)
1:~$ vim .bashrc 2:在打开的.bashrc文件中加入: alias adt='./adt-bundle-linux-x86-20130729/eclipse/eclipse' 3:保 ...
- angularjs 1.3 综合学习 (one way bind , ng-if , ng-switch , ng-messages, ng-form ,ng-model )
主要讲解1.3后的一些新功能,和一些以前没有介绍的小功能 (ng-if,ng-switch). 1.one way bind 这个之前的版本已经有人自己实现了,但是在1.3之后,angularjs 有 ...
- poj 3628 Bookshelf 2
http://poj.org/problem?id=3628 01背包 #include <cstdio> #include <iostream> #include <c ...
- 【转】你应该知道的 10 个 VirtualBox 技巧与高级特性
原文网址:http://www.oschina.net/translate/10-virtualbox-tricks-and-advanced-features-you-should-know-abo ...
- bzoj2741【FOTILE模拟赛】L
http://www.lydsy.com/JudgeOnline/problem.php?id=2741 分块或可持久化trie 可以先看看这个:高斯消元解XOR方程组 分块做法: 我们先求出前i个数 ...
- codevs1033 蚯蚓的游戏问题
题目描述 Description 在一块梯形田地上,一群蚯蚓在做收集食物游戏.蚯蚓们把梯形田地上的食物堆积整理如下: a(1,1) a(1,2)…a(1,m) a(2,1) a(2,2) a(2 ...
- poj3237 Tree
Description You are given a tree with N nodes. The tree’s nodes are numbered 1 through N and its edg ...
- 【翻译】五步快速使用LINQPad尝鲜StreamInsight
StreamInsight 学习地址:http://www.cnblogs.com/StreamInsight/archive/2011/10/26/StreamInsight-Query-Seri ...