JavaScript对象克隆

douzifly 发布于2019-08-20 10:27 / 2118人阅读

摘要：原始类型对象指的是字符串数值布尔值，引用类型对象指的是数组对象函数。既然对象分为这两类，他们的复制克隆也是有差别的。总结根据上面的情况，另外，克隆引用对象必须采用完整克隆深度克隆，包括对象的值也是一个对象也要进行完整克隆深度克隆。

前言

之前有人问我如何克隆一个JS对象，我当时没答上来；过后我查资料弄懂了这个问题，现在整理成文。

正文

JavaScript的一切实例都是对象，但他们也分为原始类型和引用类型。原始类型对象指的是字符串（String）、数值（Number）、布尔值（Boolean）、undefined、null，引用类型对象指的是数组（Array）、对象（Object）、函数（Function）。
既然对象分为这两类，他们的复制克隆也是有差别的。普通对象存储的是对象的实际数据，而引用对象存储的是对象的引用地址，而把对象的实际内容多带带存放。下面我们就来看看他们克隆的区别。

原始类型对象的克隆 字符串的克隆

var x="abc";
var y=x;
y="xyz";
 
alert(x);   // "abc"
alert(y);   // "xyz"

数值的克隆

var x=1;
var y=x;
y=2;

alert(x);   // 1
alert(y);   // 2

布尔值的克隆

var x=true;
var y=x;
y=false;
 
alert(x);   // true
alert(y);   // false

我们可以看出来原始类型的克隆很简单，只需要一个=赋值就可以了；undefined、null也是同理。

引用类型的对象克隆 数值的克隆

如果采用普通克隆：

var x=[1,2];
var y=x;
y.push(3);

alert(x);   // 1,2,3
alert(y);   // 1,2,3

由上可知，原始数组x，克隆数组y，修改了克隆数组y，但也同时修改了原始数组x，这就是引用对象的特点。那么怎样才能达到完整的数组克隆呢？

var x=[1,2];
var y=[];
var i=0;
var j=x.length;
for(;i
这样，两个数值就互不干扰，实现了完整数组克隆。
对象的克隆
和数组的克隆同理，对象的完整克隆如下：
var x={a:2,b:4};
var y={};
var i;
for(i in x){
    y[i]=x[i];
}
y.c=6;
 
console.log(x);   // Object {a: 2, b: 4} 
console.log(y);   // Object {a: 2, b: 4, c: 6}
函数的克隆
var x=function(){alert(1);};
var y=x;
y=function(){alert(2);};

console.log(x);   // function(){alert(1);};
console.log(y);   // function(){alert(2);};
函数的克隆与原始类型对象克隆的方式类似；只需要使用=就可以了。
总结
根据上面的情况，另外，克隆引用对象必须采用完整克隆（深度克隆），包括对象的值也是一个对象也要进行完整克隆（深度克隆）。所以，我们可以总结并封装一个通用的克隆方法：
function clone(obj){
    var o,i,j,k;
    if(typeof(obj)!=="object" || obj===null)return obj;
    if(obj instanceof Array){
        o=[];
        i=0;j=obj.length;
        for(;i
最后
这是我个人的博客，刚刚搭建好，欢迎大家来看看：Sunny的博客

云服务器 GPU云服务器对象克隆克隆对象 js克隆对象 javascript对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80155.html

【转】JavaScript 对象的深度克隆

摘要：在聊以下简称深度克隆之前，我们先来了解一下中对象的组成。克隆或者拷贝分为种浅度克隆深度克隆。浅度克隆基本类型为值传递，对象仍为引用传递。该文转载自http://www.cnblogs.com/zichi/p/4568150.html，有部分修改。在聊JavaScript（以下简称js）深度克隆之前，我们先来了解一下js中对象的组成。在 js 中一切实例皆是对象，具体分为原始类型 ...

JowayYoung 2019-08-19 17:43 评论0 收藏0
javascript中对象的常用方法，深克隆和浅克隆以及冻结，扩展，密封三大属性的区别

摘要：它将返回目标对象。封闭对象方法判断一个对象是否被密封。为源对象为修改的属性名或设置，同上方法返回一个给定对象自身可枚举属性的键值对数组方法返回指定对象上一个自有属性对应的属性描述符方法判断两个值是否是相同的值。对象作为引用类型，工作中免不了复制对象，下面来看看克隆的方法 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。浅...

gplane 2019-08-22 15:37 评论0 收藏0
克隆

摘要：结构化算法优于的地方优于的地方结构化克隆可以复制对象。的克隆粒度将会跟原始对象相同，并且复制出来相同的像素数据。企图去克隆节点同样会抛出异常。消息通道的传递是异步的，使用结构化克隆算法。 JavaScript 深拷贝性能分析(汉化版) JavaScript 深拷贝性能分析 Object.assign() Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。...

freecode 2019-08-26 11:37 评论0 收藏0
javascript设计模式与开发实践（二）- 封装和原型模式

摘要：对象会记住它的原型给对象提供了一个名为的隐藏属性，某个对象的属性默认会指向它的构造器的原型对象，即。我们通过代码来验证再来实际上，就是对象跟对象构造器的原型联系起来的纽带切记这句话，对未来理解原型链很有帮助。封装封装数据在许多语言的对象系统中，封装数据是由语法解析来实现的，这些语言也许提供了 private、public、protected 等关键字来提供不同的访问权限。例如：j...

luxixing 2019-08-22 15:05 评论0 收藏0
JavaScript 深拷贝性能分析

摘要：它接受任意数量的源对象，枚举它们的所有属性并分配给。所以现在怎么办有几种方法可以创建一个对象的深拷贝。为了防止发生任何意外，请使用而不是。我想测量哪种方法是最高性能的。图表以下是，和中不同技术的性能。原文：Deep-copying in JavaScript - DasSur.ma 如何在 JavaScript 中拷贝一个对象？对于这个很简单的问题，但是答案却不简单。引用传值在...

MyFaith 2019-08-26 11:35 评论0 收藏0