Как создать 2 одинаковых независимых объекта в JavaScript?

Question

[Valenso]

Столкнулся со следующей проблемой - создаю 2 объекта. Меняю свойства в одном объекте - меняются они же в другом. Как их сделать самостоятельными, даже если основываются на одном и том же наборе исходных данных?

function Item(coordinates){
    this.coordinates = coordinates || false;

    this.moveItemToAValueBelow = function(value){
        for (var i in this.coordinates){
            this.coordinates[i][1]+=value;
        }
    }
}

var first = new Item(data);
var second = new Item(data);
second.moveItemToAValueBelow(20);

console.log(first.coordinates);
console.log(second.coordinates);

console.log показывает одно и тоже. Как правильно создавать 2 разных объекта с одинаковыми данными?

Полный код странички представлен здесь https://github.com/valenso/pattern

Answer 1

[_ _]

Вам надо было начать с того, что за данные у вас. Я посмотрел на github - у вас вложенные массивы.
В этом случае вариант @ghaiklor не сработает, потому что он только для плоских объектов.
data.slice(0) тоже не проканает, потому что уникальным будет только первый уровень массива.
Попробуйте JSON.parse(JSON.stringify(data))

Comments

[Valenso]

@AMar4enko Спасибо, что уделили внимание на github. Попробую и так что же сделать.

[Valenso]

@AMar4enko Получилось. Теперь моральный фактор - как лучше делать?

[_ _]

@Valenso, в клонировании через JSON единственная проблема, которая может волновать, это производительность. Но мне почему-то кажется, это не та проблема, которая вас сейчас должна волновать :)
Пишите как вам удобней - оптимизировать успеете всегда.

[Valenso]

Да, здесь не до оптимизации. Скажите, могу на GitHub в друзья добавить?

Answer 2

[Сергей Мельников]

function cloneArray(array){
    var result = [];
    for (var i in array) {
        if (array[i] === undefined) continue;
        result[i] = array[i].length ? cloneArray(array[i]) : array[i];
    }
    return result;
}

var data = [[10,10], [0,30], [20,30], [10,10]];

var array1 = cloneArray(data);
var array2 = cloneArray(data);

Comments

[Valenso]

@mlnkv Работает, большое спасибо.

[Сергей Мельников]

нз, обращайтесь, я как раз сейчас углубленно изучаю js )

[Сергей]

вроде же массивы не хорошо перебирать через for in ?

[Сергей Мельников]

если в прототип Array никто ничего не добавил - все будет гуд

[Eugene Obrezkov]

массивы лучше перебирать через for (i = 0; i < array.length; i++), а объекты через for (var i in obj) с hasOwnProperty.

[Сергей Мельников]

в данном случае не вижу разницы, тем более, что массив в js это объект

Answer 3

[_ _]

У вас объекты независимые, но вы в конструкторы передаете один и тот же экземпляр данных, т.е. у вас coordinates один на два объекта.
В JavaScript нет стандартного метода для осуществления "глубокого клонирования".
Если используете jQuery, то можете попробовать this.coordinates = $.extend({},coordinates).

Comments

[Сергей Протько]

или же с underscore/lodash - _.clone(coordinates)

[Valenso]

@AMar4enko Спасибо за объяснение причины. Расскажите, а Вы решали такую проблему? Если да, то, пожалуйста, поделитесь, как.

[Valenso]

@Fesor Спасибо за рекомедацию. Поделитесь, можно ли обойтись без библиотеки?

[Дмитрий Гукетлев]

Да. stackoverflow.com/questions/11299284/javascript-de...

Если вам надо склонировать массив простых значений (строка\число), то можно просто arr.slice()

[_ _]

@Fesor скорее _.cloneDeep

Answer 4

[Eugene Obrezkov]

Или же на чистом JS написать свой clone()

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;
}

this.coordinates = clone(coordinates);

Comments

[Valenso]

Спасибо за Ваш комментарий, я попробовал сделать - не получилось. Если есть желание - посмотрите здесь https://github.com/valenso/learning