Question

请帮助修复script。

问题是无法调用函数scoreChange（）

我的singleton方法返回scoreChange（）指令返回。但它没有帮助

控制台在此处显示错误消息：

未捕获的ReferenceError：未定义scoreChange

JS：

var Player = (function (){
    var instance;

    function init() {
        return {
            x: 500,
            y: 500,
            health: 100,
            bullets: 50,
            speed: 10,
            score: 0,

            render: function(x, y){
                $('#player').css({
                    'left': (x || this.x) + 'px',
                    'top': (y || this.y) + 'px'
                }); 

                return;                 
            },  

            scoreChange: function(score){
                $('.score').text(score);
            },

            init: function(){
                if($('#player').length == 0){
                    $('<div class="ship_player" id="player" />').appendTo('#wrap');
                }   

                this.render(500, 500);

                return;         
            }
        };
    };

    return {
        getInstance: function (){
            if ( !instance ){
                instance = init();
            }

            return instance;
        },

        scoreChange: scoreChange
    };
})();

var player = Player.getInstance();

player.init();      

player.scoreChange(100);

Answer 1

您会发现您的播放器功能正在使用getInstance返回您的对象，但Player本身就是一个函数。因此，除非您已将值附加到this.varname，否则您无法访问Player.varname，因为您尝试使用Player.getInstance()

作为对错误措辞的指示，请注意Player().getInstance()会更具语义感，因为Player函数已被调用，并且您已经返回了一个句柄将getInstance作为其中一个字段的对象。

我会这样改写。

var Player = function($player) {
  if (Player.prototype._singletonInstance)
    return Player.prototype._singletonInstance;
  Player.prototype._singletonInstance = this;

  this.$player = $player;
  this.x = 500; this.y = 500;
  this.stats = {
    speed:   10,   score:    0,
    health: 100,   bullets: 50,
  };

  this.render = function render(x,y) {
    this.$player.css({
        'left': (this.x = x || this.x) + 'px',
        'top':  (this.y = y || this.y) + 'px'
    });
    return this;
  };

  this.changeScore = function changeScore(score) {
    $('.score').text(this.stats.score = score);
  };

};

var player = new Player($('#player'));
var _player = new Player();
if (player === _player)
  console.log('Successful singleton');
player.changeScore(100); // success

另外，我建议使用事件将$('.score')元素绑定到玩家得分值。因此，在您的changeScore方法中，您会发出诸如scoreChanged之类的事件，而代表该分数的每个dom元素都可以监听该事件并进行适当调整。

Answer 2

将scoreChange设为全局

var Player = (function () {
var instance;
var scoreChange;

另外

 return {
    getInstance: function () {
    if (!instance) {
    instance = init();
    }
    scoreChange: scoreChange; // add this line before return statement 
    return instance;
    },
};

使对象的方法可用

2 个答案: