Clone Object without reference javascript
我有一个大对象,有很多数据。我想在另一个变量中克隆这个。当我设置实例B的某些参数时,在原始对象中的结果相同:
1 2 3 4 5 6 7 8 | var obj = {a: 25, b: 50, c: 75}; var A = obj; var B = obj; A.a = 30; B.a = 40; alert(obj.a +"" + A.a +"" + B.a); // 40 40 40 |
我的输出应该是25 30 40。有什么想法吗?
编辑
谢谢大家。我改变了反德罗伊的代码,这就是我的结果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 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(); A.a = 30; B.a = 40; alert(obj.a +"" + A.a +"" + B.a); 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]); |
如果使用
你可以用洛达什的
1 2 | var obj = {a: 25, b: 50, c: 75}; var A = _.clone(obj); |
或者,如果对象有多个对象级别,则使用lodash的
1 2 | var obj = {a: 25, b: {a: 1, b: 2}, c: 75}; var A = _.cloneDeep(obj); |
如果要扩展源对象,则使用lodash的
1 2 | var obj = {a: 25, b: {a: 1, b: 2}, c: 75}; var A = _.merge({}, obj, {newkey:"newvalue"}); |
也可以使用jquerys
1 2 | var obj = {a: 25, b: 50, c: 75}; var A = $.extend(true,{},obj); |
下面是jquery 1.11扩展方法的源代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 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; }; |
虽然这不是克隆,但获得结果的一个简单方法是使用原始对象作为新对象的原型。
您可以使用
1 2 3 4 5 6 7 8 | var obj = {a: 25, b: 50, c: 75}; var A = Object.create(obj); var B = Object.create(obj); A.a = 30; B.a = 40; alert(obj.a +"" + A.a +"" + B.a); // 25 30 40 |
这在
为了支持遗留的实现,您可以创建一个(部分)填充程序,用于这个简单的任务。
1 2 3 4 5 6 | if (!Object.create) Object.create = function(proto) { function F(){} F.prototype = proto; return new F; } |
它并没有模仿
您可以定义一个克隆函数。
我用这个:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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); |
它不会复制原型、函数等。但是你应该根据自己的需要来调整它(或者简化它)。
这里有一个"复制"功能可以完成这项工作,它可以同时执行浅克隆和深克隆。注意警告。它复制一个对象的所有可枚举属性(不是继承的属性),包括那些具有错误值的属性(我不明白为什么其他方法忽略它们),它也不复制稀疏数组的不存在属性。
没有一般的复制或克隆功能,因为对于复制或克隆在每种情况下应该做什么有许多不同的想法。大多数排除主机对象或对象或数组以外的任何对象。这一个还复制原语。函数应该发生什么?
因此,看看下面的内容,这是一个与其他人略有不同的方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | /* 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, e.g. 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; } |