复制属性继承(Inheritance by Copying Properties)

让我们看一下另一个继承模式—复制属性继承(inheritance by copying properties)。在这个模式中,一个对象从另一个对象获取功能,简单的通过复制它。
下面是函数extend()简单实现的一个例子:
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()函数实现深度复制。你要做的就是检查属性的类型是否是个对象,如果是,递归复制它的属性。

你需要的另外一个检查是对象是否是一个真正的对象或者是否是个数组。让我们使用在前面讨论过的数组检查。
那么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对象复制函数(接下来内容会有更多的绑定)。

有价值的是在这种模式中压根就没有原型(prototype),仅关系到对象和它们的属性。

JavaScript学习笔记(三十八) 复制属性继承的更多相关文章

  1. 【Unity 3D】学习笔记三十八:角色控制器

    角色控制器 在unity中,已经帮我们实现的上下左右跳等动作,并将他们封装成了角色控制器.角色控制器保存在unity标准资源包中,能够说是很的强大.能够模拟第一或者第三人称视角.不受刚体的限制,很适用 ...

  2. PHP学习笔记三十八【下载】

    <?php //演示下载一个图片 $file_name="SunSet.jpg"; $file_name=iconv("utf-8","gb23 ...

  3. Java框架spring 学习笔记(十八):事务管理(xml配置文件管理)

    在Java框架spring 学习笔记(十八):事务操作中,有一个问题: package cn.service; import cn.dao.OrderDao; public class OrderSe ...

  4. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  5. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  6. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  7. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  8. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  9. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

随机推荐

  1. 用c++11打造类似于python的range

    python中的range函数表示一个连续的有序序列,range使用起来很方便,因为在定义时就隐含了初始化过程,因为只需要给begin()和end()或者仅仅一个end(),就能表示一个连续的序列.还 ...

  2. Pycharm在创建py文件时,如何自动添加文件头注释(类似于钩子特性)?

    在每次新建一个py文件的时候 1 如何自动添加/usr/bin/env python2 自动添加 coding=utf8 操作方法: File->settings->Editor-> ...

  3. linux awk浅析(转)

    Awk 是一种非常好的语言,同时有一个非常奇怪的名称.在本系列(共三篇文章)的第一篇文章中,Daniel Robbins 将使您迅速掌握 awk 编程技巧.随着本系列的进展,将讨论更高级的主题,最后将 ...

  4. ubuntu下编译时遇到的错误及解决方式

    1.错误展示: hangma@ubuntu:~/test/test/protest/stack_test$ gcc  -c my_stack.c -o my_stack.o In file inclu ...

  5. elasticsearch 重启后,需要的操作

    如果elasticsearch 集群挂了,请勿开启Logstash 同步数据,需等待elasticsearch集群恢复后,在继续写入

  6. 【转】android中如何查看某个线程的logcat--不错

    原文网址:http://my.oschina.net/u/236164/blog/51022 单一个项目由很多人开发,然后大家各自打各自的log.到最后logcat就根本没法看了. adb自带的参数里 ...

  7. POJ-2386(深广搜基础)

    Lake Counting Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 25322   Accepted: 12759 D ...

  8. Google Code Jam 2012 round 2 problem A: Swinging Wild

    题目连接 题意:你要从起点经过绳子荡到终点,每次你必须抓住另一个绳子,在空中不能向下爬.问是否有合理的方案 做法: 直接模拟 #include <iostream> #include &l ...

  9. Day02_VI基本操作及C基础

    2013年09月30日 星期一 09时37分03秒 回顾:     1. linux系统的知识背景     2. vi的使用 在正常模式下使用nyy可以把光标所在行开始的连续n行拷贝到剪贴板上去 在正 ...

  10. word-wrap: break-word 和 word-break: break-all 到底有啥区别?

    做项目改bug的时候,遇到过好多次,要么是文本超出文本区域,或者单词太长(一般是url链接中的一些鬼),把装它的标签强制撑大,导致一些响应式问题.除此之外,还有很多问题,每次都是恍然醒悟,然后又在网上 ...