为什么我的javascript对象方法返回未定义？

Question

I'm a beginner in both javascript oop and game programming too(!) . Here i've created a game player with a method. but the method is returning undefined. why is that?,

bobsGame = {};

bobsGame.player  = function(which){
  this.which = which;
  this.rollDice = function () {
    diceVal = Math.floor(Math.random() * 6 + 1);
    console.log(diceVal);
    return diceVal;
  }
}

var player1 = new bobsGame.player('player1');

and then in the markup…

$('#roll-dice-btn-1').click(function(){
  bobsGame.player1.rollDice();
});

Answer 1

There is no bobsGame.player1 in your class, you just instanciated a new instance to the variable player1 ?

var player1 = new bobsGame.player('player1');

$('#roll-dice-btn-1').click(function(){
    player1.rollDice();
});

FIDDLE

Answer 2

Your call should be player1.rollDice() like

  $('#roll-dice-btn-1').click(function(){
    player1.rollDice();
  });

You are confused between player property of bobsGame object and the player1 object you actually created.

Answer 3

这可能会更好

bobsGame.player1 = new bobsGame.player('player1');

Answer 4

You can play with a structure like that:

bobsGame = function(opts) {
    this.player = opts.player;
    this.diceVal = 0;
}

bobsGame.prototype.rollDice  = function(){
    this.diceVal = Math.floor(Math.random() * 6 + 1);
}

And in your main file:

var player1 = new bobsGame({player: 'player1'});
$('#roll-dice-btn-1').click(function(){
    player1.rollDice();
    console.log(player1.diceVal);
});

JsFiddle

Answer 5

slight problem with your. It cannot find bobsGame.player1 in your class. So change like this and it would work fine..

bobsGame.player  = function(which){
    this.which = which;

    this.rollDice = function(){
        diceVal = Math.floor(Math.random() * 6 + 1);
        console.log(diceVal);
        return diceVal;
    }
}


     var player1 = new bobsGame.player('player1');
    player1.rollDice();

Answer 6

bobsGame.player1 is undefined because player1 was not declared within the object bobsGame .

If you want to create player1 as a key in your bobsGame object, you must use bobsGame.player1 = new bobsGame.player('player1'); instead. So your code would look like: bobsGame = {};

bobsGame.player  = function(which){
  this.which = which;
  this.rollDice = function () {
    diceVal = Math.floor(Math.random() * 6 + 1);
    console.log(diceVal);
    return diceVal;
  }
}

var player1 = new bobsGame.player('player1');

Otherwise, you can use:

$('#roll-dice-btn-1').click(function(){
  player1.rollDice();
});