Shallow copy pattern

function extend(parent, child) {

    var i;

    child = child || {};

    for (i in parent) {

        if (parent.hasOwnProperty(i)) {

            child[i] = parent[i];

        }

    }

    return child;

}

Deep copy pattern

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;

}

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).toString(); // false

kid.reads.paper = false;

kid.reads.web = true;

dad.reads.paper; // true

Firebug (Firefox extensions are written in JavaScript) has a method called extend()that makes shallow copies  and  jQuery’s  extend() creates  a  deep  copy.  YUI3  offers  a  method  called Y.clone(), which creates a deep copy and also copies over functions by binding them to the child object.

Advantage

There are no prototypes involved in this pattern at all; it’s only about objects and their own properties.

References: 

JavaScript Patterns - by Stoyan Stefanov (O`Reilly)

JavaScript Patterns 6.5 Inheritance by Copying Properties的更多相关文章

  1. JavaScript Patterns 6.4 Prototypal Inheritance

    No classes involved; Objects inherit from other objects. Use an empty temporary constructor function ...

  2. JavaScript Patterns 6.2 Expected Outcome When Using Classical Inheritance

    // the parent constructor function Parent(name) { this.name = name || 'Adam'; } // adding functional ...

  3. JavaScript Patterns 6.1 Classical Versus Modern Inheritance Patterns

    In Java you could do something like: Person adam = new Person(); In JavaScript you would do: var ada ...

  4. JavaScript Patterns 5.3 Private Properties and Methods

    All object members are public in JavaScript. var myobj = { myprop : 1, getProp : function() { return ...

  5. JavaScript Patterns 4.8 Function Properties - A Memoization Pattern

    Gets a length property containing the number of arguments the function expects: function func(a, b, ...

  6. JavaScript Patterns 7.1 Singleton

    7.1 Singleton The idea of the singleton pattern is to have only one instance of a specific class. Th ...

  7. JavaScript Patterns 6.6 Mix-ins

    Loop through arguments and copy every property of every object passed to the function. And the resul ...

  8. JavaScript Patterns 6.3 Klass

    Commonalities • There’s a convention on how to name a method, which is to be considered the construc ...

  9. JavaScript Patterns 5.7 Object Constants

    Principle Make variables shouldn't be changed stand out using all caps. Add constants as static prop ...

随机推荐

  1. Failed to create the Java Virtual Machine.问题的解决

    运行Eclipse,出现了"Failed to create the Java Virtual Machine."错误: 解决的办法是在Eclipse的解压目录下找到eclipse ...

  2. 配置WCF Test Client

    用vs2010建立了一个wcf项目,通过F5直接运行那服务文件,就出现了一个”The dependent tool 'svcutil.exe' is not found“, , 之后想通过“tool- ...

  3. Python中类的定义

    class Student(object): # 有点类似其它高级语言的构造函数 def __init__(self,name,score): self.name = name self.score ...

  4. Nodejs与ES6系列1:变量声明

    1.声明变量 在JS当中一个变量的作用域(scope)是程序中定义这个变量的区域.变量分为两类,全局(global)的和局部的.其中全局变量的作用域是全局性的,即在JavaScript代码中,它处处都 ...

  5. 基于 Bootstrap 的响应式后台管理面板

    你想建立一个后台管理面板或者分析仪表板吗?不需从头开始,Keen IO Bootstrap 是一个响应式的仪表盘模板,可以帮助你在几分钟内呈现数据,让你可以创建一个有吸引力的,定制的分析仪表板,随时可 ...

  6. 【zepto学习笔记03】事件机制

    前言 我们今天直接进入事件相关的学习,因为近期可能会改到里面的代码就zepto来说,我认为最重要的就是选择器与事件相关了,随着浏览器升级,选择器简单了,而事件相关仍然是核心,今天我们就来学习学习 ze ...

  7. 【web前端面试题整理01】各位加班累了吧,来做点前端面试题吧

    前言 最近小叶子有点疲惫,主要是在外地工作生活上不太适应,吃一样的东西,我居然会拉肚子,而且是一个星期一个星期的.... 脸上长了一个豆豆一个星期还没消,我那个去啊. 昨天上午上班后,本来想继续研究j ...

  8. php获取数组第一个值 current()

    获取数组第一个元素的值,如果是数字索引那还好,直接$array[0],如果键名是字符串,你又未知这个字符串呢?用current()函数就可以做到. current() 函数返回数组中的当前元素(单元) ...

  9. javascript --- 设计模式之Module模式

    基本用法 先看一下最简单的一个实现,代码如下: var Calculator = function(){ // 这里可以声明私有成员 var eqCtrl = document.getElement( ...

  10. Javascript 面向对象编程初探(一)--- 封装

    Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果 ...