Как создать переменную, которая существует только в состоянии объекта?

Question

Название вопроса не может быть лучшим, но вот код, который я написал до сих пор:

var menuState = { 

    //state variables 
    menuBttn: { 
     x: _canvas.width/2, 
     y:_canvas.height/2, 
     img: imageArray[2], 
     over: false, 
     click: function() { 
      changeState(2); 
     } 
    }, 

    preload: function() { 

    }, 

    update: function(){ 
     surface.clearRect(0, 0, _canvas.width, _canvas.height); 
     for (var i = 0; i < menuAssets; i++){ 
     surface.drawImage(//draw menuBttn);    
     } 
    }, 

    exit: function(){ 

    }, 

}; 

То, что я хочу сделать, это по существу создать переменную с именем menuButtn (который является объектом), что существует только в menuState.

Я думал, что я мог бы сделать это, выполнив:

var menuState = { 

     //state variables 
     this.menuBttn = { 
      x: _canvas.width/2, 
      y:_canvas.height/2, 
      img: imageArray[2], 
      over: false, 
      click: function(){ 
       changeState(2); 
      } 
     }, 
    } 

Это так, как это работает в Phaser.io (библиотека для создания игр), но я пытаюсь сделать свой собственный игровой движок ,

Как это сделать?

Answer 1

Я думаю, вы делаете это правильно. Кнопка меню существует только в пределах области созданного вами объекта, поэтому другие классы не имеют доступа к menuBttn, так как она находится внутри menuState. Использование ключевого слова this очень умно.

Другой вариант - создать функцию make_button, которая создает новую кнопку, и создать ее внутри объекта menuState. Он совершает то же самое.

Answer 2

Возможно, вы ищете «шаблон модуля», который использует сразу вызываемое выражение функции (IIFE) и замыкания для создания «частных» членов, например.

var foo = (function() { 
 
    
 
    // Private function 
 
    function bar(text) { 
 
    console.log(text); 
 
    } 
 
    
 
    // Private variable 
 
    var private = 'initial value'; 
 
    
 
    // Object to assign to foo 
 
    return { runBar: function(text) { 
 
        bar(text); 
 
        }, 
 
      setPrivate: function(value) { 
 
        private = value; 
 
        }, 
 
      getPrivate: function() { 
 
        return private; 
 
        } 
 
      }; 
 
}()); 
 

 
console.log(foo.runBar('bar text')); // bar text 
 
foo.setPrivate('new value'); 
 
console.log(foo.getPrivate()); // new value

Есть много статей по этому поводу, начать поиск. ;-)

Answer 3

var menuState = (function() { 
var menuBttn = { 
    x: canvas.width/2, 
    y: canvas.height/2, 
    over: false, 
    click: function() { 
     console.log('clicked'); 
    } 
}; 
var update = function() { 
    console.log(menuBttn); 
}; 
/* if you are in menuState scope then you can access menuBttn with out using menuState*/ 
console.log(menuBttn); 
return{menuBttn: menuBttn, update: update}; 
})(); 

Выполнение этого способа, как в первом примере. Это позволяет вам получить доступ к menuBttn, если вы используете «menuState.menuBttn» или хотите получить доступ к атрибутам menuBttn. Вы можете «menuState.menuBttn.x». Кроме того, вы не можете помещать комментарии одиночной строки в функцию.

surface.drawImage(//draw menuBttn); 

Это нарушает функцию и приведет к ошибке.