создание нескольких экземпляров свойства объекта

Question

Я пытаюсь создать несколько версий объекта, который имеет функцию init. Я попытался использовать функцию javascript «new», но в этом случае это не работает, и консоль уведомляет меня об этом, потому что это не функция. См. Код для более четкого описания того, что я пытаюсь сделать. Я понимаю, почему этот код будет предупреждать пункт два, а не пункт один, но я не знаю, как получить правильное поведение.

var myApp = { 
menu: { 
     init: function (name) { 
      this.name = name; 
     }, 
     alertName: function() { 
      alert(this.name); 
     } 
    } 
} 

$(document).ready(function() { 
    var first = myApp.menu; 
    var second = myApp.menu; 
    first.init('item one'); 
    second.init('item two'); 
    first.alertName(); 
}); 

Answer 1

Вы должны клонировать объект. В javascript ваши переменные first и second являются двумя ссылками на один и тот же объект: при изменении first вы также изменяете second.

Вы можете использовать jQuery.extend() для клонирования вашего объекта.

var first = jQuery.extend(true, {}, myApp.menu); 
var second = jQuery.extend(true, {}, myApp.menu); 

Answer 2

Вы можете использовать функции конструктора JavaScript, и называют new создать экземпляр различных объектов:

var myApp = { 
    menu: function(name){ 
     // if menu is called as a constructor function, `this` will refer 
     // to the object being built 
     this.name = name; 
    } 
} 

myApp.menu.prototype.alertName = function(){ 
    alert(this.name); 
} 

$(document).ready(function() { 
    var first = new myApp.menu('item one'); 
    var second = new myApp.menu('item two'); 
    first.alertName(); 
}); 

fiddle

Answer 3

Причина оповещается только 'item two' потому, что когда вы делаете first = myApp.menu и second=myApp.menu, как first и second относятся к одному объекту. Когда вы устанавливаете свойство name этого объекта (this.name = name в init), обе ссылки указывают на тот же объект с измененным свойством.

Самый простой способ сделать это так:

var myApp = { 
    menu : { 
    init: function (name) { 
     this.name = name; 
    }, 
    alertName: function() { 
     alert(this.name); 
    } 
    } 
} 

var first = Object.create(myApp.menu); 
var second = Object.create(myApp.menu); 
first.init('item one'); 
second.init('item two'); 
first.alertName(); 

Демо: http://jsbin.com/OrEkaPe/1/edit

Object.create создает новый объект (дух) и устанавливает параметр как прототип для нового объекта. Когда вы получаете доступ к свойству нового объекта и его не существует, он будет доступен из прототипа вместо этого, предоставляя вам наследование, которое вы хотите.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

Answer 4

Декларирования объектов с {} фактически рядные инициализации, уже экземпляр, а не конструктор, одно решением для вашей проблемы можно было бы создать декларативный объект.

Пожалуйста, обратитесь к этой ссылке для получения дополнительной информации:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Быстрая реализация вашей проблемы здесь:

http://jsbin.com/OsoWECA/1/edit

var myApp = { 
menu: function() { 
     this.init = function (name) { 
      this.name = name; 
     }; 
     this.alertName = function() { 
      alert(this.name); 
     }; 
     return this; 
    } 
}; 

$(document).ready(function() { 
    var first = new myApp.menu(); 
    var second = new myApp.menu(); 
    first.init('item one'); 
    second.init('item two'); 
    first.alertName(); 
    second.alertName(); 
}); 

Answer 5

Вы можете реализовать свой собственный new если вы хотите, это должно работать:

var myApp = { 
menu: { 
     init: function (name) { 
      this.name = name; 
     }, 
     alertName: function() { 
      alert(this.name); 
     }, 
     new: function() { 
      var func = function() {} 
      func.prototype = this 
      return new func; 
     } 
    } 
} 

$(document).ready(function() { 
    var first = myApp.menu.new(); 
    var second = myApp.menu.new(); 
    first.init('item one'); 
    second.init('item two'); 
    first.alertName(); 
});