如何正确学习JavaScript

Posted 2023-05-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何正确学习JavaScript相关的知识，希望对你有一定的参考价值。

javascript作为网站前端的核心知识是非常重要的，但是如何学习JavaScript是很多初学者面对的一个难题，下面我说一下个人对于如何学习JavaScript的一点心得，希望能帮到大家。

1、首先学习基础，尤其是JavaScript与其他语言不同的基础知识。

学习每个编程语言可能都要从基础的变量函数结构等学起，JavaScript相对于其他的编程语言在基础上有一些比较有特点的地方，这些东西是尤其需要我们注意的，比如说自调函数、比如说变量值为空不是null而是undefined的等，这些东西都是和主流的编程的语言如c++、java等是有区别的，所以想要学好JavaScript，这些基础的知识一定要把握好学习好才行。

2、关于学习JavaScript的进阶

JavaScript进阶知识更是有很多难理解的东西和不同于其他语言的东西，这些东西都是深入学习JavaScript的难点，简单的说一下JavaScript是基于对象的浏览器脚本语言，但是为了使JavaScript也能够支持面向对象编程，人们就使用了很多的方法来模拟面向对象的的特点，这些就变成了JavaScript的一些难点，比如说JavaScript的继承要借助原型、比如JavaScript的类需要使用构造函数来构造一个对象等，这些东西都是和其他支持面向对象的语言是不同的，所以就导致了一些难点。关于进阶学习JavaScript，还有JavaScript一些深入的知识需要去理解比如原型链和闭包、比如收函数的作用域执行流程和上下文，这些东西都是JavaScript比较深入的知识、

最后说明，JavaScript作为前端的核心语言绝对没有没有想象的那么简单，要想学好JavaScript除了以上提到的知识和注意点，还需要的就是多动手和实践，我们都知道网页上的所有特效都是借助JavaScript来实现，那么我们就需要在学习JavaScript的过程中多使用原生的JavaScript代码实现一些特效，当然学习使用jQuery等JavaScript类库进行开发也十分的重要，但是这绝对不能是取代我们学习JavaScript的方法。

参考技术A 　　学习JS的忠告
　　1，不要着急看一些复杂网页效果的代码，这样除了打击自信心，什么也学不到。
　　2，别急着加技术交流QQ群，加牛人QQ。如果找张三丰交流武功。
　　3，看网上什么多少天精通JS，啥啥啥从入门到精通，这种教程直接跳过吧，太多的事实证明，以一种浮躁的心态去做任何事都会以失败而告终。
　　4，千万别去弄啥电脑培训，花了钱和时间不说，关键是学不到东西。本来买两本好书自学3个月能学会的，他们硬是能折腾两年。

　　JavaScript DOM编程艺术
　　学习Javascript用《JavaScript DOM编程艺术》来入门最好不过了，老老实实看两遍，看完了就会对JS有一个大概的了解，整本书都围绕着一个网页效果例子展开，跟着老老实实敲一篇，敲完之后，会发现这个效果不是常在网页中看到么，发现自己也能做出来网上的效果了。

　　JavaScript高级程序设计
　　有的书是用来成为经典的，比如犀牛书；还有些书是用来超越经典的，显然这本书就是这种，可以去Ferris这个教程看看他写的这些效果，看看源代码，怎么样，是不是觉得有一部分很简单了，尝试着跟着他写一写这些效果。

　　JavaScript语言精粹和高性能JavaScript
　　JS高级教程的补充，里面有一些内容和JS高级教程重复了，两本书可以同时看，都不厚，可以对前面所学的有一个很好的加强和巩固。

　　avaScript DOM高级程序设计和JavaScript设计模式
　　首先教搭建一个类似JQuery的额工具函数库，然后通过讲解几个实际中经常遇到的几个应用例子，会让初学者受益匪浅，Javascript的设计模式，说实话，翻译的质量很一般，有些生硬，但已经基本不影响的学习，看代码完全可以理解出自己的意思。参考技术B 　　既然你找到这篇文章来，说明你是真心想学好JavaScript的。你没有想错，当今如果要开发现代网站或web应用（包括互联网创业），都要学会JavaScript。而面对泛滥的JavaScript在线学习资源，却是很难找到一份高效而实用的方法去学习这个“web时代的语言”。

　　有一点需要注意，几年前我们需要知道一个真正的服务器端语言（比如php，Rails，Java，Python 或者
Perl）去开发可扩展，动态的，数据库驱动的web应用，而现在只用JavaScript就可以实现了。

　　不要这样学习JavaScript

　　不要一开始就埋头在成堆的JavaScript在线教程里
，这是最糟糕的学习方法。或许在看过无数个教程后会有点成效，但这样不分层次结构地学习一个东西实在是十分低效，在实际用JavaScript建立网站或web应用时你还是会频繁的卡住。总的来说，这种学习方法会让人不知道如何将语言当做工具来使用——当做个人工具来用。

　　另外，也许有人会建议从尊敬的JavaScript教父Douglas
Crockford写的《JavaScript语言精粹》开始学习JavaScript。然而，虽然Crockford先生对JavaScript无所不知，被誉为JavaScript世界的爱因斯坦，但他的《JavaScript语言精粹》并不适合初学者学习。这本书没有通透、清晰、明了的阐述JavaScript的核心概念。但对于更高级的学习路线，我倒会建议你看看Crockford先生的视频。

　　还有，不要只从Codecademy等网站学习JavaScript，因为即使知道怎么编写一大堆JavaScript代码小片段，还是不能学会怎么建立一个web应用程序。即便如此，在后面我还是会建议把Codecademy当做补充的学习资源。

　　本课程资源

　　更新：Reddit用户d0gsbody4月8号在Reddit上建立了一个学习小组。他和其他组员都非常积极和乐于助人。我建议你加入这个小组，他们会让你保持积极性且帮助你更好的学习JavaScript。毕竟独自折腾JavaScript还是有点难度的。链接：Learning
JS Properly – Study Group on Reddit

　　请在以下两本书中选一本，第一本比较适合有编程经验的人，而另一本则适合完全没有编程经验的初学者。

　　我个人推荐第一本书，因为作者对各个知识点都阐述得非常好且涵盖了一些高级JavaScript知识点。但是，要看懂这本书你至少要对web开发有一定的基本了解。所以，如果你有一点点编程经验或者web开发经验（不一定是JavaScript），那就买这本书吧。

　　如果你没有编程经验，可以买这本：

　　纸质版（英文）：JavaScript:
The Definitive Guide

　　纸质版（中文）：JavaScript权威指南(第6版)

　　Kindle版（英文）：JavaScript:
The Definitive Guide

　　Kindle版（中文）：JavaScript权威指南（原书第6版）

　　纸质版（英文）：Professional
JavaScript for Web Developers

　　纸质版（中文）：JavaScript高级程序设计(第3版)

　　Kindle版（英文）：Professional
JavaScript for Web Developers

　　Kindle版（中文）：JavaScript高级程序设计(第3版)

　　免费注册Stack
Overflow，这是一个编程领域的问答论坛。在这里提问题得到的回答比Codecademy要好，哪怕你的问题非常基础，看起来很傻（记住，从来没有愚蠢的问题）。

　　免费注册Codecademy，这是一个在线学习平台，你可以直接在浏览器里面写代码。

　　JavaScriptIsSexy上的一些博文，包括对象，闭包，变量的作用域和提升，函数等等。
　　转载本回答被提问者和网友采纳参考技术C 不知道你有没有语言基础。
有的话买本相关书，写个“Hellow world”什么的答题就民白了。
不过要想学通这门语言，光看书什么的肯定是不行的，找个项目练练，看看API才是真确的。
所以，首先了解基本语法，再试着用它写个项目，就差不多了。参考技术D 沉默的力量

如何正确克隆 JavaScript 对象？

【中文标题】如何正确克隆 JavaScript 对象？【英文标题】：How do I correctly clone a JavaScript object? 【发布时间】：2010-10-18 05:17:24 【问题描述】：

我有一个对象x。我想将它复制为对象y，这样对y 的更改就不会修改x。我意识到复制从内置 JavaScript 对象派生的对象会导致额外的、不需要的属性。这不是问题，因为我正在复制我自己的文字构造对象之一。

【问题讨论】：

看到这个问题：***.com/questions/122102/… 对于 JSON，我使用 mObj=JSON.parse(JSON.stringify(jsonObject)); 我真的不明白为什么没有人建议Object.create(o)，它可以满足作者的所有要求？ var x = deep: key: 1 ; var y = Object.create(x); x.deep.key = 2; 执行此操作后，y.deep.key 也将为 2，因此 Object.create 不能用于克隆... @r3wt 这不起作用...请仅在对解决方案进行基本测试后发布.. 【参考方案1】：

来自这篇文章：How to copy arrays and objects in Javascript by Brian Huisman：

Object.prototype.clone = function() 
  var newObj = (this instanceof Array) ? [] : ;
  for (var i in this) 
    if (i == 'clone') continue;
    if (this[i] && typeof this[i] == "object") 
      newObj[i] = this[i].clone();
     else newObj[i] = this[i]
   return newObj;
;

【讨论】：

这很接近，但不适用于任何对象。尝试用这个克隆一个 Date 对象。并非所有属性都是可枚举的，因此它们不会全部显示在 for/in 循环中。像这样添加到对象原型对我来说破坏了 jQuery。即使我重命名为 clone2。 @iPadDeveloper2011 上面的代码有一个错误，它创建了一个名为“i”“（for i in this）”的全局变量，而不是“（for var i in this）”。我有足够的业力来编辑它并修复它，所以我做到了。 @Calvin: 这应该被创建一个不可枚举的属性，否则 'clone' 将出现在 'for' 循环中。为什么var copiedObj = Object.create(obj); 不是一个好方法？【参考方案2】：

function clone(obj) 
    if(obj == null || typeof(obj) != 'object')
        return obj;    
    var temp = new obj.constructor(); 
    for(var key in obj)
        temp[key] = clone(obj[key]);    
    return temp;

【讨论】：

这个答案非常接近，但并不完全正确。如果您尝试克隆 Date 对象，您将不会获得相同的日期，因为对 Date 构造函数的调用会使用当前日期/时间初始化新 Date。该值不可枚举，也不会被 for/in 循环复制。并不完美，但对于那些基本情况来说很好。例如。允许对可以是基本对象、数组或字符串的参数进行简单克隆。赞成使用 new 正确调用构造函数。接受的答案没有。适用于其他所有节点！仍然留下参考链接递归的想法很棒。但是如果值是数组，它会工作吗？【参考方案3】：

如果您的对象中没有循环依赖，我建议使用其他答案之一或jQuery's copy methods，因为它们看起来都非常有效。

如果存在循环依赖关系（即，两个子对象相互链接），那么（从理论的角度）no way to solve this issue elegantly，您就有点搞砸了。

【讨论】：

实际上，Python 的对象序列化通过跟踪对象图中已经处理过的节点来处理循环引用。您可以使用该方法来实现强大的复制例程。不过，这将是更多的工作！【参考方案4】：

来自Apple JavaScript Coding Guidelines：

// Create an inner object with a variable x whose default
// value is 3.
function innerObj()

        this.x = 3;

innerObj.prototype.clone = function() 
    var temp = new innerObj();
    for (myvar in this) 
        // this object does not contain any objects, so
        // use the lightweight copy code.
        temp[myvar] = this[myvar];
    
    return temp;


// Create an outer object with a variable y whose default
// value is 77.
function outerObj()

        // The outer object contains an inner object.  Allocate it here.
        this.inner = new innerObj();
        this.y = 77;

outerObj.prototype.clone = function() 
    var temp = new outerObj();
    for (myvar in this) 
        if (this[myvar].clone) 
            // This variable contains an object with a
            // clone operator.  Call it to create a copy.
            temp[myvar] = this[myvar].clone();
         else 
            // This variable contains a scalar value,
            // a string value, or an object with no
            // clone function.  Assign it directly.
            temp[myvar] = this[myvar];
        
    
    return temp;


// Allocate an outer object and assign non-default values to variables in
// both the outer and inner objects.
outer = new outerObj;
outer.inner.x = 4;
outer.y = 16;

// Clone the outer object (which, in turn, clones the inner object).
newouter = outer.clone();

// Verify that both values were copied.
alert('inner x is '+newouter.inner.x); // prints 4
alert('y is '+newouter.y); // prints 16

史蒂夫

【讨论】：

没有克隆方法的对象属性将被此代码浅拷贝。因此，对原件的更改会影响副本。所以这并不能解决问题。【参考方案5】：

对 JavaScript 中的任何对象执行此操作都不会简单或直接。您将遇到错误地从对象原型中获取属性的问题，这些属性应该留在原型中而不是复制到新实例中。例如，如果您要向Object.prototype 添加clone 方法，正如某些答案所描述的那样，您将需要显式跳过该属性。但是，如果在Object.prototype 或其他中间原型中添加了您不知道的其他附加方法怎么办？在这种情况下，您将复制不应该复制的属性，因此您需要使用 hasOwnProperty 方法检测不可预见的非本地属性。

除了不可枚举的属性之外，当您尝试复制具有隐藏属性的对象时，您还会遇到更棘手的问题。例如，prototype 是函数的隐藏属性。此外，对象的原型由属性__proto__ 引用，该属性也是隐藏的，并且不会被迭代源对象属性的for/in 循环复制。我认为__proto__ 可能特定于 Firefox 的 JavaScript 解释器，在其他浏览器中可能有所不同，但你明白了。并非所有事物都是可枚举的。如果您知道它的名称，您可以复制隐藏的属性，但我不知道有什么方法可以自动发现它。

寻求优雅解决方案的另一个障碍是正确设置原型继承的问题。如果您的源对象的原型是Object，那么只需使用创建一个新的通用对象即可，但如果源的原型是Object 的某个后代，那么您将丢失该原型中的其他成员您使用hasOwnProperty 过滤器跳过了哪些，或者哪些在原型中，但一开始就无法枚举。一种解决方案可能是调用源对象的constructor 属性来获取初始复制对象，然后复制属性，但是您仍然不会获得不可枚举的属性。例如，Date 对象将其数据存储为隐藏成员：

function clone(obj) 
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) 
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    
    return copy;


var d1 = new Date();

/* Executes function after 5 seconds. */
setTimeout(function()
    var d2 = clone(d1);
    alert("d1 = " + d1.toString() + "\nd2 = " + d2.toString());
, 5000);

d1 的日期字符串将比 d2 的日期字符串晚 5 秒。一种使Date 与另一个相同的方法是调用setTime 方法，但这是特定于Date 类的。我认为这个问题没有万无一失的通用解决方案，尽管我很乐意犯错！

当我不得不实现一般深度复制时，我最终妥协，假设我只需要复制一个普通的Object、Array、Date、String、Number 或 Boolean .最后 3 种类型是不可变的，所以我可以执行浅拷贝而不用担心它会改变。我进一步假设Object 或Array 中包含的任何元素也将是该列表中的6 个简单类型之一。这可以通过如下代码来完成：

function clone(obj) 
    var copy;

    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) 
        copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    

    // Handle Array
    if (obj instanceof Array) 
        copy = [];
        for (var i = 0, len = obj.length; i < len; i++) 
            copy[i] = clone(obj[i]);
        
        return copy;
    

    // Handle Object
    if (obj instanceof Object) 
        copy = ;
        for (var attr in obj) 
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        
        return copy;
    

    throw new Error("Unable to copy obj! Its type isn't supported.");

只要对象和数组中的数据形成树形结构，上面的函数就可以很好地适用于我提到的 6 种简单类型。也就是说，对象中对相同数据的引用不超过一个。例如：

// This would be cloneable:
var tree = 
    "left"  :  "left" : null, "right" : null, "data" : 3 ,
    "right" : null,
    "data"  : 8
;

// This would kind-of work, but you would get 2 copies of the 
// inner node instead of 2 references to the same copy
var directedAcylicGraph = 
    "left"  :  "left" : null, "right" : null, "data" : 3 ,
    "data"  : 8
;
directedAcyclicGraph["right"] = directedAcyclicGraph["left"];

// Cloning this would cause a stack overflow due to infinite recursion:
var cyclicGraph = 
    "left"  :  "left" : null, "right" : null, "data" : 3 ,
    "data"  : 8
;
cyclicGraph["right"] = cyclicGraph;

它将无法处理任何 JavaScript 对象，但它可能足以满足多种用途，只要您不认为它只适用于您扔给它的任何东西。

【讨论】：

缺少符号键和符号值。现在，使用Object.getOwnPropertyDescriptors 更好。【参考方案6】：

一个特别不优雅的解决方案是使用 JSON 编码来制作没有成员方法的对象的深层副本。该方法是对您的目标对象进行 JSON 编码，然后通过对其进行解码，您可以获得所需的副本。您可以根据需要进行多次解码，制作尽可能多的副本。

当然，函数不属于 JSON，所以这只适用于没有成员方法的对象。

这种方法非常适合我的用例，因为我将 JSON blob 存储在键值存储中，并且当它们在 JavaScript API 中作为对象公开时，每个对象实际上都包含原始状态的副本对象，这样我们就可以在调用者改变暴露的对象后计算增量。

var object1 = key:"value";
var object2 = object1;

object2 = JSON.stringify(object1);
object2 = JSON.parse(object2);

object2.key = "a change";
console.log(object1);// returns value

【讨论】：

为什么函数不属于JSON？我不止一次看到它们以 JSON 格式传输... 函数不是 JSON 规范的一部分，因为它们不是一种安全（或智能）的数据传输方式，而这正是 JSON 的用途。我知道 Firefox 中的原生 JSON 编码器只是忽略传递给它的函数，但我不确定其他人的行为。 @mark: 'foo': function() return 1; 是文字构造的对象。 @abarnert 函数不是数据。 “函数字面量”用词不当——因为函数可以包含任意代码，包括赋值和各种“不可序列化”的东西。【参考方案7】：

使用jQuery，您可以浅拷贝 extend:

var copiedObject = jQuery.extend(, originalObject)

对copiedObject 的后续更改不会影响originalObject，反之亦然。

或者制作一个深拷贝：

var copiedObject = jQuery.extend(true, , originalObject)

【讨论】：

甚至：var copiedObject = jQuery.extend(,originalObject); 将 true 指定为深层复制的第一个参数也很有用：jQuery.extend(true, , originalObject);【参考方案8】：

A.Levy 的回答差不多完成了，这是我的一点贡献：有一种方法可以处理递归引用，请看这一行

if(this[attr]==this) copy[attr] = copy;

如果对象是 XML DOM 元素，我们必须使用 cloneNode 代替

if(this.cloneNode) return this.cloneNode(true);

受 A.Levy 详尽的研究和 Calvin 的原型制作方法的启发，我提供了以下解决方案：

Object.prototype.clone = function() 
  if(this.cloneNode) return this.cloneNode(true);
  var copy = this instanceof Array ? [] : ;
  for(var attr in this) 
    if(typeof this[attr] == "function" || this[attr]==null || !this[attr].clone)
      copy[attr] = this[attr];
    else if(this[attr]==this) copy[attr] = copy;
    else copy[attr] = this[attr].clone();
  
  return copy;


Date.prototype.clone = function() 
  var copy = new Date();
  copy.setTime(this.getTime());
  return copy;


Number.prototype.clone = 
Boolean.prototype.clone =
String.prototype.clone = function() 
  return this;

另请参阅答案中的 Andy Burke 注释。

【讨论】：

Date.prototype.clone = function() return new Date(+this);【参考方案9】：

有很多答案，但没有一个提到 ECMAScript 5 中的Object.create，它诚然没有给你一个精确的副本，但将源设置为新对象的原型。

因此，这不是问题的确切答案，但它是一种单行解决方案，因此很优雅。它最适用于 2 种情况：

这种继承在哪里有用（呵呵！）源对象不会被修改，因此这两个对象之间的关系不成问题。

例子：

var foo =  a : 1 ;
var bar = Object.create(foo);
foo.a; // 1
bar.a; // 1
foo.a = 2;
bar.a; // 2 - prototype changed
bar.a = 3;
foo.a; // Still 2, since setting bar.a makes it an "own" property

为什么我认为这个解决方案更好？它是原生的，因此没有循环，没有递归。但是，较旧的浏览器将需要一个 polyfill。

【讨论】：

这是原型继承，不是克隆。这些是完全不同的东西。新对象没有任何自己的属性，它只是指向原型的属性。克隆的重点是创建一个不引用另一个对象中任何属性的全新对象。【参考方案10】：

Jan Turoň 上面的答案非常接近，由于兼容性问题，可能最好在浏览器中使用，但它可能会导致一些奇怪的枚举问题。例如，执行：

for ( var i in someArray )  ...

在遍历数组元素后将 clone() 方法分配给 i。这是避免枚举并与node.js一起使用的改编：

Object.defineProperty( Object.prototype, "clone", 
    value: function() 
        if ( this.cloneNode )
        
            return this.cloneNode( true );
        

        var copy = this instanceof Array ? [] : ;
        for( var attr in this )
        
            if ( typeof this[ attr ] == "function" || this[ attr ] == null || !this[ attr ].clone )
            
                copy[ attr ] = this[ attr ];
            
            else if ( this[ attr ] == this )
            
                copy[ attr ] = copy;
            
            else
            
                copy[ attr ] = this[ attr ].clone();
            
        
        return copy;
    
);

Object.defineProperty( Date.prototype, "clone", 
    value: function() 
        var copy = new Date();
        copy.setTime( this.getTime() );
        return copy;
    
);

Object.defineProperty( Number.prototype, "clone",  value: function()  return this;   );
Object.defineProperty( Boolean.prototype, "clone",  value: function()  return this;   );
Object.defineProperty( String.prototype, "clone",  value: function()  return this;   );

这避免了使 clone() 方法可枚举，因为 defineProperty() 默认可枚举为 false。

【讨论】：

【参考方案11】：

您可以使用一行代码克隆一个对象并从前一个对象中删除任何引用。只需这样做：

var obj1 =  text: 'moo1' ;
var obj2 = Object.create(obj1); // Creates a new clone without references

obj2.text = 'moo2'; // Only updates obj2's text property

console.log(obj1, obj2); // Outputs: obj1: text:'moo1', obj2: text:'moo2'

对于当前不支持 Object.create 的浏览器/引擎，您可以使用这个 polyfill：

// Polyfill Object.create if it does not exist
if (!Object.create) 
    Object.create = function (o) 
        var F = function () ;
        F.prototype = o;
        return new F();
    ;

【讨论】：

+1 Object.create(...) 似乎绝对是要走的路。完美答案。也许您可以为Object.hasOwnProperty 添加解释？这样人们就知道如何防止搜索原型链接。效果很好，但是 polyfill 在哪些浏览器中工作？这是用 obj1 作为原型创建 obj2。它之所以有效，是因为您正在遮蔽 obj2 中的 text 成员。您不是在制作副本，只是在 obj2 上找不到成员时遵循原型链。这不会在“没有引用的情况下”创建它，它只是将引用移动到原型。它仍然是一个参考。如果原始属性发生变化，“克隆”中的原型属性也会发生变化。它根本不是克隆。【参考方案12】：

我只是想在这篇文章中添加到所有Object.create 解决方案，这不适用于nodejs。

在 Firefox 中的结果

var a = "test":"test";
var b = Object.create(a);
console.log(b);´

是

test:"test".

在nodejs中是

【讨论】：

这是原型继承，不是克隆。 @d13 虽然您的论点有效，但请注意，JavaScript 中没有克隆对象的标准化方法。这是原型继承，但如果您了解这些概念，它仍然可以用作克隆。 @froginvasion。使用 Object.create 的唯一问题是嵌套对象和数组只是对原型嵌套对象和数组的指针引用。 jsbin.com/EKivInO/2/edit?js,console。从技术上讲，“克隆”对象应该有自己独特的属性，这些属性不是对其他对象属性的共享引用。 @d13 好的，我现在明白你的意思了。但我的意思是，太多人对原型继承的概念感到疏远，对我来说无法了解它是如何工作的。如果我没记错的话，可以通过调用Object.hasOwnProperty 检查您是否拥有该数组来修复您的示例。是的，这确实增加了处理原型继承的额外复杂性。【参考方案13】：

如果你不在你的对象中使用Dates、functions、undefined、regExp 或 Infinity，一个非常简单的衬线是JSON.parse(JSON.stringify(object))：

const a = 
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(),  // stringified
  undef: undefined,  // lost
  inf: Infinity,  // forced to 'null'

console.log(a);
console.log(typeof a.date);  // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date);  // result of .toISOString()

这适用于包含对象、数组、字符串、布尔值和数字的所有类型的对象。

另请参阅this article about the structured clone algorithm of browsers，它在向工作人员发送消息或从工作人员发送消息时使用。它还包含一个深度克隆功能。

【讨论】：

有时最好的答案是最简单的。天才。【参考方案14】：

如果你对浅拷贝没问题，underscore.js 库有一个clone 方法。

y = _.clone(x);

或者你可以像这样扩展它

copiedObject = _.extend(,originalObject);

【讨论】：

谢谢。在 Meteor 服务器上使用这种技术。要快速开始使用 lodash，我建议学习 npm、Browserify 以及 lodash。我让克隆与 'npm i --save lodash.clone' 一起工作，然后是 'var clone = require('lodash.clone');'要让 require 工作，你需要类似 browserify 的东西。安装并了解它的工作原理后，每次运行代码时都将使用“browserify yourfile.js > bundle.js;start chrome index.html”（而不是直接进入 Chrome）。这会将您的文件和 npm 模块所需的所有文件收集到 bundle.js 中。不过，您可能可以使用 Gulp 节省时间并自动执行此步骤。【参考方案15】：

这是对 A. Levy 的代码的改编，也可以处理函数的克隆和多个/循环引用 - 这意味着如果克隆的树中的两个属性是同一对象的引用，则克隆的对象树将使这些属性指向被引用对象的同一个克隆。这也解决了循环依赖的情况，如果不加以处理，就会导致无限循环。算法复杂度为O(n)

function clone(obj)
    var clonedObjectsArray = [];
    var originalObjectsArray = []; //used to remove the unique ids when finished
    var next_objid = 0;

    function objectId(obj) 
        if (obj == null) return null;
        if (obj.__obj_id == undefined)
            obj.__obj_id = next_objid++;
            originalObjectsArray[obj.__obj_id] = obj;
        
        return obj.__obj_id;
    

    function cloneRecursive(obj) 
        if (null == obj || typeof obj == "string" || typeof obj == "number" || typeof obj == "boolean") return obj;

        // Handle Date
        if (obj instanceof Date) 
            var copy = new Date();
            copy.setTime(obj.getTime());
            return copy;
        

        // Handle Array
        if (obj instanceof Array) 
            var copy = [];
            for (var i = 0; i < obj.length; ++i) 
                copy[i] = cloneRecursive(obj[i]);
            
            return copy;
        

        // Handle Object
        if (obj instanceof Object) 
            if (clonedObjectsArray[objectId(obj)] != undefined)
                return clonedObjectsArray[objectId(obj)];

            var copy;
            if (obj instanceof Function)//Handle Function
                copy = function()return obj.apply(this, arguments);;
            else
                copy = ;

            clonedObjectsArray[objectId(obj)] = copy;

            for (var attr in obj)
                if (attr != "__obj_id" && obj.hasOwnProperty(attr))
                    copy[attr] = cloneRecursive(obj[attr]);                 

            return copy;
               


        throw new Error("Unable to copy obj! Its type isn't supported.");
    
    var cloneObj = cloneRecursive(obj);



    //remove the unique ids
    for (var i = 0; i < originalObjectsArray.length; i++)
    
        delete originalObjectsArray[i].__obj_id;
    ;

    return cloneObj;

一些快速测试

var auxobj = 
    prop1 : "prop1 aux val", 
    prop2 : ["prop2 item1", "prop2 item2"]
    ;

var obj = new Object();
obj.prop1 = "prop1_value";
obj.prop2 = [auxobj, auxobj, "some extra val", undefined];
obj.nr = 3465;
obj.bool = true;

obj.f1 = function ()
    this.prop1 = "prop1 val changed by f1";
;

objclone = clone(obj);

//some tests i've made
console.log("test number, boolean and string cloning: " + (objclone.prop1 == obj.prop1 && objclone.nr == obj.nr && objclone.bool == obj.bool));

objclone.f1();
console.log("test function cloning 1: " + (objclone.prop1 == 'prop1 val changed by f1'));
objclone.f1.prop = 'some prop';
console.log("test function cloning 2: " + (obj.f1.prop == undefined));

objclone.prop2[0].prop1 = "prop1 aux val NEW";
console.log("test multiple references cloning 1: " + (objclone.prop2[1].prop1 == objclone.prop2[0].prop1));
console.log("test multiple references cloning 2: " + (objclone.prop2[1].prop1 != obj.prop2[0].prop1));

【讨论】：

截至 2016 年 9 月，这是该问题的唯一正确解决方案。【参考方案16】：

function clone(src, deep) 

    var toString = Object.prototype.toString;
    if(!src && typeof src != "object")
        //any non-object ( Boolean, String, Number ), null, undefined, NaN
        return src;
    

    //Honor native/custom clone methods
    if(src.clone && toString.call(src.clone) == "[object Function]")
        return src.clone(deep);
    

    //DOM Elements
    if(src.nodeType && toString.call(src.cloneNode) == "[object Function]")
        return src.cloneNode(deep);
    

    //Date
    if(toString.call(src) == "[object Date]")
        return new Date(src.getTime());
    

    //RegExp
    if(toString.call(src) == "[object RegExp]")
        return new RegExp(src);
    

    //Function
    if(toString.call(src) == "[object Function]")
        //Wrap in another method to make sure == is not true;
        //Note: Huge performance issue due to closures, comment this :)
        return (function()
            src.apply(this, arguments);
        );

    

    var ret, index;
    //Array
    if(toString.call(src) == "[object Array]")
        //[].slice(0) would soft clone
        ret = src.slice();
        if(deep)
            index = ret.length;
            while(index--)
                ret[index] = clone(ret[index], true);
            
        
    
    //Object
    else 
        ret = src.constructor ? new src.constructor() : ;
        for (var prop in src) 
            ret[prop] = deep
                ? clone(src[prop], true)
                : src[prop];
        
    

    return ret;
;

【讨论】：

if(!src && typeof src != "object")。我认为应该是|| 而不是&&。【参考方案17】：

由于mindeavor 声明要克隆的对象是“文字构造”对象，因此解决方案可能是简单地生成该对象多次，而不是克隆该对象的一个实例：

function createMyObject()

    var myObject =
    
        ...
    ;
    return myObject;


var myObjectInstance1 = createMyObject();
var myObjectInstance2 = createMyObject();

【讨论】：

【参考方案18】：

使用 Lodash：

var y = _.clone(x, true);

【讨论】：

天哪，重新发明克隆技术简直太疯狂了。这是唯一理智的答案。我更喜欢_.cloneDeep(x)，因为它本质上和上面一样，但读起来更好。【参考方案19】：

在我的代码中，我经常定义一个function (_) 来处理副本，以便我可以将by value 传递给函数。此代码创建一个深层副本，但保持继承。它还跟踪子副本，以便可以在没有无限循环的情况下复制自引用对象。随意使用。

它可能不是最优雅的，但它还没有让我失望。

_ = function(oReferance) 
  var aReferances = new Array();
  var getPrototypeOf = function(oObject) 
    if(typeof(Object.getPrototypeOf)!=="undefined") return Object.getPrototypeOf(oObject);
    var oTest = new Object();
    if(typeof(oObject.__proto__)!=="undefined"&&typeof(oTest.__proto__)!=="undefined"&&oTest.__proto__===Object.prototype) return oObject.__proto__;
    if(typeof(oObject.constructor)!=="undefined"&&typeof(oTest.constructor)!=="undefined"&&oTest.constructor===Object&&typeof(oObject.constructor.prototype)!=="undefined") return oObject.constructor.prototype;
    return Object.prototype;
  ;
  var recursiveCopy = function(oSource) 
    if(typeof(oSource)!=="object") return oSource;
    if(oSource===null) return null;
    for(var i=0;i<aReferances.length;i++) if(aReferances[i][0]===oSource) return aReferances[i][1];
    var Copy = new Function();
    Copy.prototype = getPrototypeOf(oSource);
    var oCopy = new Copy();
    aReferances.push([oSource,oCopy]);
    for(sPropertyName in oSource) if(oSource.hasOwnProperty(sPropertyName)) oCopy[sPropertyName] = recursiveCopy(oSource[sPropertyName]);
    return oCopy;
  ;
  return recursiveCopy(oReferance);
;

// Examples:
Wigit = function();
Wigit.prototype.bInThePrototype = true;
A = new Wigit();
A.nCoolNumber = 7;
B = _(A);
B.nCoolNumber = 8; // A.nCoolNumber is still 7
B.bInThePrototype // true
B instanceof Wigit // true

【讨论】：

【参考方案20】：

请咨询http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data，了解 W3C 的“结构化数据的安全传递”算法，该算法旨在由浏览器实现，用于将数据传递给网络工作者等。但是，它有一些限制，因为它不处理函数。请参阅https://developer.mozilla.org/en-US/docs/DOM/The_structured_clone_algorithm 了解更多信息，包括 JS 中的另一种算法，它可以让您部分实现。

【讨论】：

虽然这有一些很棒的链接，但这并不是一个真正的答案。如果它被扩展为包含引用的算法的实现，它可能是一个答案。【参考方案21】：

我最喜欢和优雅的 JS 对象克隆解决方案是

function CloneObject() 
function cloneObject(o) 
   CloneObject.prototype = o;
   return new CloneObject();

使用cloneObject(object) 获取 JS 对象的克隆。

与许多复制解决方案不同，此克隆将原型关系保留在克隆对象中。

【讨论】：

我认为这不能回答操作员发布的问题。 code var o1 = a: 1 var o2 = cloneObject(o1) o2.b = 2 console.log(o1) // 将是 a:1, b:2 code 这和Object.create一样。这是原型继承，不是克隆。 @d13——对很多人来说，这就是克隆。复制属性就是复制。你能确定实现会总是在实例化时将原型引用复制到实例中吗？我不是说不会，但我有疑问。不管怎样，这只是以原始为原型制作一个空对象，这是不一样的。如果你不打算修改任何东西，那么你不需要克隆，如果你想保留一个快照，它也不会工作，因为原型的属性将会改变，因为原型是原来的对象。【参考方案22】：

//
// creates 'clone' method on context object
//
//  var 
//     clon = Object.clone( anyValue );
//
!((function (propertyName, definition) 
    this[propertyName] = definition();
).call(
    Object,
    "clone",
    function () 
        function isfn(fn) 
            return typeof fn === "function";
        

        function isobj(o) 
            return o === Object(o);
        

        function isarray(o) 
            return Object.prototype.toString.call(o) === "[object Array]";
        

        function fnclon(fn) 
            return function () 
                fn.apply(this, arguments);
            ;
        

        function owns(obj, p) 
            return obj.hasOwnProperty(p);
        

        function isemptyobj(obj) 
            for (var p in obj) 
                return false;
            
            return true;
        

        function isObject(o) 
            return Object.prototype.toString.call(o) === "[object Object]";
        
        return function (input) 
            if (isfn(input)) 
                return fnclon(input);
             else if (isobj(input)) 
                var cloned = ;
                for (var p in input) 
                    owns(Object.prototype, p)
                    || (
                        isfn(input[p])
                        && ( cloned[p] = function ()  return input[p].apply(input, arguments);  )
                        || ( cloned[p] = input[p] )
                    );
                
                if (isarray(input)) 
                    cloned.length = input.length;
                    "concat every filter forEach indexOf join lastIndexOf map pop push reduce reduceRight reverse shift slice some sort splice toLocaleString toString unshift"
                    .split(" ")
                    .forEach(
                      function (methodName) 
                        isfn( Array.prototype[methodName] )
                        && (
                            cloned[methodName] =
                            function () 
                                return Array.prototype[methodName].apply(cloned, arguments);
                            
                        );
                      
                    );
                
                return isemptyobj(cloned)
                       ? (
                          isObject(input)
                          ? cloned
                          : input
                        )
                       : cloned;
             else 
                return input;
            
        ;
    
));
//

【讨论】：

为什么这个答案比其他任何一个都好？你是从任何框架或库中得到这个的，还是你创建的？我不知道，它对我来说似乎不可读。【参考方案23】：

结构化克隆

见my answer to a near-duplicate question here。您可以使用 HTML 标准包含的相同结构化克隆机制在领域之间发送数据。很快您就可以通过新的structuredClone 全局方法来实现这一点。

const clone = structuredClone(original);

更多详情请见the other answer。

【讨论】：

+1 用于给出最终可能以何种形式内置的想法——即使现在无法使用。【参考方案24】：

function clone(obj)

    var cloneObj = Object.create(obj);

    return cloneObj;

在 Javascript 中对象单独继承另一个对象（原型继承）。 Object.create(obj) 返回一个对象，它是 obj 的子对象或子对象。在上述函数中，它将有效地返回对象的副本。

但是，这是一种非常奇怪的克隆方式，因为我没有将继承用于其真正目的。

【讨论】：

这是原型继承，不是克隆。新对象没有任何自己的属性，它只是使用原型上的属性。 @d13 我不需要新对象的新属性，我只想要新对象中父对象的属性，那为什么不继承呢？这可能非常有用，但它不是克隆，这就是本主题的主题。克隆是您将一个对象的属性显式复制到另一个对象中，以便新对象不再引用原型上的属性。这样做的原因是为了防止混淆属性是属于对象还是属于它的原型。如果您不确定这种行为，那么这种混淆可能会导致难以诊断的错误。 Check this JSBin example and explanation. @Shuaib - 因为如果您更改原始对象上的属性值，它们将在新对象上更改......它们没有分开......新对象没有“拥有”这些属性，它只是引用旧对象。 ...这意味着您不妨去var cloned = otherObj; 并以这种方式进行参考。在这两种情况下，新变量引用旧对象的唯一原因是因为它实际上是指向它的指针。一个只是点本身，而另一个持有原型上的指针。 @JimboJonny 递归 Object.create() 怎么样？【参考方案25】：

由于同样的问题，我来到了这个页面，但我既没有使用 JQuery，也没有一个克隆方法适用于我自己的对象。

我知道我的答案与这个问题的相关性不是太强，因为它是一种不同的方法。我不使用克隆函数，而是使用创建函数。它对我有以下（不幸的限制）目的：

我主要使用 JSP 生成的 Javascript 我一开始就知道必须生成哪个对象（在我的例子中，它是来自数据库的信息，它被获取一次，需要在 JS 中更频繁地部署。

首先我这样定义我的对象：

var obj= new Object();
obj.Type='Row';
obj.ID=1;
obj.Value='Blah blah';

现在我移动了所有内容，例如：

function getObjSelektor(id_nummer,selected)
var obj = document.createElement("select");
obj.setAttribute("id","Selektor_"+id_nummer);
obj.setAttribute("name","Selektor");
obj.setAttribute("size","1");

var obj_opt_1 = document.createElement("option");
obj_opt_1.setAttribute("value","1");
if(1==selected)
    posopval_opt_1.setAttribute("selected","selected");
obj_opt_1.innerHTML="Blah blah";
obj.appendChild(obj_opt_1);

var obj_opt_2 = document.createElement("option");
obj_opt_2.setAttribute("value","2");
if(2==selected)
    obj_opt_2.setAttribute("selected","selected");
obj_opt_2.innerHTML="2nd Row";
obj.appendChild(obj_opt_2);

...

return obj;

并在常规代码中调用函数：

myDiv.getObjSelektor(getObjSelektor(anotherObject.ID));

如前所述，这是一种不同的方法，它为我的目的解决了我的问题。

【讨论】：

【参考方案26】：

如果你有一个带有函数的对象，你可以用 JSONfn 来做，见http://www.eslinstructor.net/jsonfn/。

var obj= 
    name:'Marvin',
    getName :  function()
      return this.name;
    

var cobj = JSONfn.parse(JSONfn.stringify(obj));

【讨论】：

【参考方案27】：

您可以使用函数闭包来获得深拷贝的所有好处，而无需深拷贝。这是一个非常不同的范例，但效果很好。与其尝试复制现有对象，不如在需要时使用一个函数来实例化一个新对象。

首先，创建一个返回对象的函数

function template() 
  return 
    values: [1, 2, 3],
    nest: x: a: "a", b: "b", y: 100
  ;

然后创建一个简单的浅拷贝函数

function copy(a, b) 
  Object.keys(b).forEach(function(key) 
    a[key] = b[key];
  );

创建一个新对象，并将模板的属性复制到它上面

var newObject = ; 
copy(newObject, template());

但是上面的复制步骤不是必须的。您需要做的就是：

var newObject = template();

现在您有了一个新对象，测试一下它的属性是什么：

console.log(Object.keys(newObject));

这显示：

["values", "nest"]

是的，这些是 newObject 自己的属性，而不是对另一个对象的属性的引用。让我们检查一下：

console.log(newObject.nest.x.b);

这显示：

"b"

newObject 已获取模板对象的所有属性，但没有任何依赖链。

http://jsbin.com/ISUTIpoC/1/edit?js,console

我添加了这个例子来鼓励一些辩论，所以请添加一些 cmets :)

【讨论】：

Object.keys 直到 JavaScript 1.8.5 才实现，这意味着它在 IE 8 和其他旧版浏览器中不可用。因此，虽然这个答案在现代浏览器中效果很好，但在 IE 8 中会失败。所以如果你使用这种方法，你必须使用正确模拟 Object.keys polyfill。【参考方案28】：

复制一个最终可能指向自身的对象的问题可以通过简单的检查来解决。添加此检查，每次有复制操作。它可能慢，但它应该工作。

我使用 toType() 函数显式地返回对象类型。我也有自己的 copyObj() 函数，它在逻辑上非常相似，它回答了所有三种 Object()、Array() 和 Date() 情况。

我在 NodeJS 中运行它。

尚未测试。

// Returns true, if one of the parent's children is the target.
// This is useful, for avoiding copyObj() through an infinite loop!
function isChild(target, parent) 
  if (toType(parent) == '[object Object]') 
    for (var name in parent) 
      var curProperty = parent[name];

      // Direct child.
      if (curProperty = target) return true;

      // Check if target is a child of this property, and so on, recursively.
      if (toType(curProperty) == '[object Object]' || toType(curProperty) == '[object Array]') 
        if (isChild(target, curProperty)) return true;
      
    
   else if (toType(parent) == '[object Array]') 
    for (var i=0; i < parent.length; i++) 
      var curItem = parent[i];

      // Direct child.
      if (curItem = target) return true;

      // Check if target is a child of this property, and so on, recursively.
      if (toType(curItem) == '[object Object]' || toType(curItem) == '[object Array]') 
        if (isChild(target, curItem)) return true;
      
    
  

  return false;     // Not the target.

【讨论】：

【参考方案29】：

互联网上的大多数解决方案都存在几个问题。所以我决定做一个跟进，其中包括为什么不应该接受已接受的答案。

开始情况

我想深度复制 Javascript Object 及其所有子级及其子级等等。但由于我不是一个普通的开发者，我的Object 有正常 properties、circular structures 甚至nested objects。

所以让我们先创建一个circular structure 和一个nested object。

function Circ() 
    this.me = this;


function Nested(y) 
    this.y = y;

让我们将所有内容放在一个名为 a 的 Object 中。

var a = 
    x: 'a',
    circ: new Circ(),
    nested: new Nested('a')
;

接下来，我们要将a 复制到名为b 的变量中并对其进行变异。

var b = a;

b.x = 'b';
b.nested.y = 'b';

您知道这里发生了什么，否则您甚至不会想到这个好问题。

console.log(a, b);

a --> Object 
    x: "b",
    circ: Circ 
        me: Circ  ... 
    ,
    nested: Nested 
        y: "b"
    


b --> Object 
    x: "b",
    circ: Circ 
        me: Circ  ... 
    ,
    nested: Nested 
        y: "b"

现在让我们找到解决方案。

JSON

我尝试的第一次尝试是使用JSON。

var b = JSON.parse( JSON.stringify( a ) );

b.x = 'b';
b.nested.y = 'b';

不要在上面浪费太多时间，你会得到TypeError: Converting circular structure to JSON。

递归复制（接受的“答案”）

让我们看看接受的答案。

function cloneSO(obj) 
    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) 
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    

    // Handle Array
    if (obj instanceof Array) 
        var copy = [];
        for (var i = 0, len = obj.length; i < len; i++) 
            copy[i] = cloneSO(obj[i]);
        
        return copy;
    

    // Handle Object
    if (obj instanceof Object) 
        var copy = ;
        for (var attr in obj) 
            if (obj.hasOwnProperty(attr)) copy[attr] = cloneSO(obj[attr]);
        
        return copy;
    

    throw new Error("Unable to copy obj! Its type isn't supported.");

看起来不错，嗯？它是对象的递归副本，也可以处理其他类型，例如 Date，但这不是必需的。

var b = cloneSO(a);

b.x = 'b';
b.nested.y = 'b';

递归和circular structures 不能很好地协同工作...RangeError: Maximum call stack size exceeded

原生解决方案

在与我的同事争论之后，我的老板问我们发生了什么事，他在谷歌搜索后找到了一个简单的解决方案。它叫做Object.create。

var b = Object.create(a);

b.x = 'b';
b.nested.y = 'b';

这个解决方案是前段时间添加到 Javascript 中的，甚至可以处理 circular structure。

console.log(a, b);

a --> Object 
    x: "a",
    circ: Circ 
        me: Circ  ... 
    ,
    nested: Nested 
        y: "b"
    


b --> Object 
    x: "b",
    circ: Circ 
        me: Circ  ... 
    ,
    nested: Nested 
        y: "b"

...你看，它不适用于内部的嵌套结构。

原生解决方案的 polyfill

在旧版浏览器中，Object.create 有一个 polyfill，就像 IE 8 一样。这就像 Mozilla 推荐的那样，当然，它并不完美，并且会导致与 本机解决方案相同的问题.

function F() ;
function clonePF(o) 
    F.prototype = o;
    return new F();


var b = clonePF(a);

b.x = 'b';
b.nested.y = 'b';

我已将F 放在范围之外，以便我们查看instanceof 告诉我们的内容。

console.log(a, b);

a --> Object 
    x: "a",
    circ: Circ 
        me: Circ  ... 
    ,
    nested: Nested 
        y: "b"
    


b --> F 
    x: "b",
    circ: Circ 
        me: Circ  ... 
    ,
    nested: Nested 
        y: "b"
    


console.log(typeof a, typeof b);

a --> object
b --> object

console.log(a instanceof Object, b instanceof Object);

a --> true
b --> true

console.log(a instanceof F, b instanceof F);

a --> false
b --> true

与原生解决方案相同的问题，但输出稍差。

更好（但不完美）的解决方案

在四处挖掘时，我发现了一个与此问题类似的问题 (In Javascript, when performing a deep copy, how do I avoid a cycle, due to a property being "this"?)，但有一个更好的解决方案。

function cloneDR(o) 
    const gdcc = "__getDeepCircularCopy__";
    if (o !== Object(o)) 
        return o; // primitive value
    

    var set = gdcc in o,
        cache = o[gdcc],
        result;
    if (set && typeof cache == "function") 
        return cache();
    
    // else
    o[gdcc] = function()  return result; ; // overwrite
    if (o instanceof Array) 
        result = [];
        for (var i=0; i<o.length; i++) 
            result[i] = cloneDR(o[i]);
        
     else 
        result = ;
        for (var prop in o)
            if (prop != gdcc)
                result[prop] = cloneDR(o[prop]);
            else if (set)
                result[prop] = cloneDR(cache);
    
    if (set) 
        o[gdcc] = cache; // reset
     else 
        delete o[gdcc]; // unset again
    
    return result;


var b = cloneDR(a);

b.x = 'b';
b.nested.y = 'b';

让我们看看输出...

console.log(a, b);

a --> Object 
    x: "a",
    circ: Object 
        me: Object  ... 
    ,
    nested: Object 
        y: "a"
    


b --> Object 
    x: "b",
    circ: Object 
        me: Object  ... 
    ,
    nested: Object 
        y: "b"
    


console.log(typeof a, typeof b);

a --> object
b --> object

console.log(a instanceof Object, b instanceof Object);

a --> true
b --> true

console.log(a instanceof F, b instanceof F);

a --> false
b --> false

要求匹配，但还是有一些小问题，包括将nested和circ的instance改为Object。

共享一个叶子的树的结构不会被复制，它们会成为两个独立的叶子：

        [Object]                     [Object]
         /    \                       /    \
        /      \                     /      \
      |/_      _\|                 |/_      _\|  
  [Object]    [Object]   ===>  [Object]    [Object]
       \        /                 |           |
        \      /                  |           |
        _\|  |/_                 \|/         \|/
        [Object]               [Object]    [Object]