1

I'm trying to build a game demon, and run into a problem when I'm trying to add a clickEventHanlder to a button, the code goes here:

function GameConstructor(){
    this.start = startGame;
    this.count = 5;
    ...
    function startGame(){
        if(this.count > 5){ //here goes the problem, this don't point to the game object when I click the button
            ...
        }
}
...
var game = new GameConstructor(); //game object has a method called start
$("#someBtn").click(game.start); //in the method start this now point to the button so this.count is undefined.

I know I can define a global variable count = 5 to solve this, but I just wonder if there is a way to fix in my original way? Thanks.

Yu Duan
  • 93
  • 1
  • 10

2 Answers2

1

I'm not a complete JavaScript wizard, but my guess is that the this inside your nested function is referring to that nested function, not the outer instance.

Many people opt to create a self variable instead, to be a bit more explicit about this scope stuff. Maybe try this:

function GameConstructor(){
    var self = this;    // <-- here, then reference self subsequently
    self.start = startGame;
    self.count = 5;
    ...
    function startGame(){
        if(self.count > 5){ //here goes the problem, this don't point to the game object when I click the button
            ...
        }
}
jleach
  • 5,922
  • 3
  • 27
  • 50
  • `this` in a jQuery click event refers to the clicked element. – Jamiec Jun 07 '17 at 08:58
  • `this` almost *never* refers to a function. – Bergi Jun 07 '17 at 09:01
  • thanks, It works! I was wondering if it's necessary to create a "self" variable every time I build a Constructor? – Yu Duan Jun 07 '17 at 09:03
  • @YuDuan - I find it to be a good practice. It's easier to understand and troubleshoot for many. With that said, many of the newer JS constructs make this somewhat less of an issue, but for "traditional" JS code, it's common to do so and I consider it a better practice. – jleach Jun 07 '17 at 09:05
  • @jdl134679 So in the worst case scenario add a "self" variable will not harm your code at all, is it correct? – Yu Duan Jun 07 '17 at 09:13
  • @YuDuan - I wouldn't quite say that... there's umpteen ways to shoot yourself in the foot (with any language, but JavaScript especially), but generally speaking, as a matter of standard practice, there's no reason not to create a separate variable to hold an instance of your object. `self` just happens to the be unofficial/common name for that variable in this case. – jleach Jun 07 '17 at 09:16
  • @jdl134679 I know what you saying, help me a lot! – Yu Duan Jun 07 '17 at 09:17
  • (`self` is a common enough name/practice that StackOverflow's syntax highlighter colors it as a keyword, though it's not an actual keyword, just another variable name) – jleach Jun 07 '17 at 09:24
0

this always point to the current function context in Javascript. Means the lowest function just out of the 'this'. So, you can do like;

function GameConstructor(){
    var self= this;
    this.start = startGame;
    this.count = 5;
    ...
    function startGame(){
        if(self.count > 5){ //here goes the problem, this don't point to the game object when I click the button
            ...
        }
}
...
var game = new GameConstructor(); //game object has a method called start
$("#someBtn").click(game.start); //in the method start this now point to the button so this.count is undefined.
Jins Peter
  • 1,939
  • 1
  • 11
  • 29