克隆对象没有参考javascript
我有一个拥有大量数据的大对象。 我想克隆这个在其他variables。 当我设置实例B的一些参数在原始对象中具有相同的结果:
var obj = {a: 25, b: 50, c: 75}; var A = obj; var B = obj; Aa = 30; Ba = 40; alert(obj.a + " " + Aa + " " + Ba); // 40 40 40
我的输出应该是25 30 40.任何想法?
编辑
感谢大家。 我改变了dystroy的代码,这是我的结果:
Object.prototype.clone = Array.prototype.clone = function() { if (Object.prototype.toString.call(this) === '[object Array]') { var clone = []; for (var i=0; i<this.length; i++) clone[i] = this[i].clone(); return clone; } else if (typeof(this)=="object") { var clone = {}; for (var prop in this) if (this.hasOwnProperty(prop)) clone[prop] = this[prop].clone(); return clone; } else return this; } var obj = {a: 25, b: 50, c: 75}; var A = obj.clone(); var B = obj.clone(); Aa = 30; Ba = 40; alert(obj.a + " " + Aa + " " + Ba); var arr = [25, 50, 75]; var C = arr.clone(); var D = arr.clone(); C[0] = 30; D[0] = 40; alert(arr[0] + " " + C[0] + " " + D[0]);
如果使用=
语句为右侧的对象赋值var
,那么javascript将不会复制,而是引用该对象。
你可以使用lodash的clone
方法
var obj = {a: 25, b: 50, c: 75}; var A = _.clone(obj);
或者如果你的对象有多个对象级别的话,lodash的cloneDeep
方法
var obj = {a: 25, b: {a: 1, b: 2}, c: 75}; var A = _.cloneDeep(obj);
或者lodash的merge
方法,如果你的意思是扩展源对象
var obj = {a: 25, b: {a: 1, b: 2}, c: 75}; var A = _.merge({}, obj, {newkey: "newvalue"});
或者你可以使用jQuerys的extend
方法:
var obj = {a: 25, b: 50, c: 75}; var A = $.extend(true,{},obj);
这里是jQuery 1.11扩展方法的源代码:
jQuery.extend = jQuery.fn.extend = function() { var src, copyIsArray, copy, name, options, clone, target = arguments[0] || {}, i = 1, length = arguments.length, deep = false; // Handle a deep copy situation if ( typeof target === "boolean" ) { deep = target; // skip the boolean and the target target = arguments[ i ] || {}; i++; } // Handle case when target is a string or something (possible in deep copy) if ( typeof target !== "object" && !jQuery.isFunction(target) ) { target = {}; } // extend jQuery itself if only one argument is passed if ( i === length ) { target = this; i--; } for ( ; i < length; i++ ) { // Only deal with non-null/undefined values if ( (options = arguments[ i ]) != null ) { // Extend the base object for ( name in options ) { src = target[ name ]; copy = options[ name ]; // Prevent never-ending loop if ( target === copy ) { continue; } // Recurse if we're merging plain objects or arrays if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { if ( copyIsArray ) { copyIsArray = false; clone = src && jQuery.isArray(src) ? src : []; } else { clone = src && jQuery.isPlainObject(src) ? src : {}; } // Never move original objects, clone them target[ name ] = jQuery.extend( deep, clone, copy ); // Don't bring in undefined values } else if ( copy !== undefined ) { target[ name ] = copy; } } } } // Return the modified object return target; };
虽然这不是克隆,但获得结果的一个简单方法是使用原始对象作为新原型的原型。
你可以使用Object.create
来做到这一点:
var obj = {a: 25, b: 50, c: 75}; var A = Object.create(obj); var B = Object.create(obj); Aa = 30; Ba = 40; alert(obj.a + " " + Aa + " " + Ba); // 25 30 40
这在A
和B
中创build了一个从obj
inheritance的新对象。 这意味着您可以添加属性而不影响原始内容。
为了支持遗留的实现,您可以创build一个(部分)填充程序,用于这个简单的任务。
if (!Object.create) Object.create = function(proto) { function F(){} F.prototype = proto; return new F; }
它不会模拟Object.create
所有function,但它可以满足您的需求。
你可以定义一个克隆函数。
我使用这个:
function goclone(source) { if (Object.prototype.toString.call(source) === '[object Array]') { var clone = []; for (var i=0; i<source.length; i++) { clone[i] = goclone(source[i]); } return clone; } else if (typeof(source)=="object") { var clone = {}; for (var prop in source) { if (source.hasOwnProperty(prop)) { clone[prop] = goclone(source[prop]); } } return clone; } else { return source; } } var B = goclone(A);
它不复制原型,function等等。 但是你应该适应它(也许简化它)为你自己的需要。
A
和B
引用相同的对象,所以Aa
和Ba
引用相同对象的相同属性。
编辑
这是一个可以完成这个工作的“复制”function,可以同时执行浅层和深层克隆。 注意警告。 它复制一个对象的所有可枚举属性(不是inheritance属性),包括那些带有false值的(我不明白为什么其他方法忽略它们),它也不复制稀疏数组的不存在的属性。
没有通用的副本或克隆function,因为对于副本或克隆应该在每种情况下应该做什么有许多不同的想法。 大多数排除主机对象,或除了对象或数组以外的任何东西。 这一个也复制原语。 function应该发生什么?
所以看看下面的内容,对别人来说是一种稍微不同的方法。
/* Only works for native objects, host objects are not ** included. Copies Objects, Arrays, Functions and primitives. ** Any other type of object (Number, String, etc.) will likely give ** unexpected results, eg copy(new Number(5)) ==> 0 since the value ** is stored in a non-enumerable property. ** ** Expects that objects have a properly set *constructor* property. */ function copy(source, deep) { var o, prop, type; if (typeof source != 'object' || source === null) { // What do to with functions, throw an error? o = source; return o; } o = new source.constructor(); for (prop in source) { if (source.hasOwnProperty(prop)) { type = typeof source[prop]; if (deep && type == 'object' && source[prop] !== null) { o[prop] = copy(source[prop]); } else { o[prop] = source[prop]; } } } return o; }