Javascript OOP, Accessing methods from other nested methods

问题

Ok, folks, getting there with learning my JS. I have come across a singular one. Here's the code:

hangar = function(game){
}

hangar.prototype = {
  
  loadImages: function(graphicAssets){
    ...
  },
  
  writeTerminal: function(timer, str, destination){
  },
  
  writeStats: function(){
    var writeTerminal = this.writeTerminal;
    console.log('wt', this.writeTerminal);
    console.log('wt2', writeTerminal);
    //ZOMG This does not work!
  },
    
  handleHangarInput: function(layerShips, layerBg){
    
    ... does some variable declarations of which one is:
    
    var writeStats = this.writeStats;
    
    function viewHangarPosition() {
      
      writeStats(); // This works
      
    }
    
    keyleft.onDown.add(function(){
        
        if (currentship > 0) {
            currentship--;
            viewHangarPosition();
        }
    });

    keyright.onDown.add(function(){
        
        if (currentship < shipNumber-1) {
            currentship++;
            viewHangarPosition();
        }
    });

  }
  create: function(){
      this.handleHangarInput(layerShips, layerBg);
  }
    
}

here is where it's all called (index.html):

        window.onload = function() {

            var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update:update });

            function preload() {
            }

            function create() {
                game.state.add('menu', menu);
                game.state.add('hangar', hangar);
                game.state.start('hangar');
            }

            function update() {
            }
            
        }

I am trying to get hold of writeTerminal from within writeStats, which is not working for me.

• How is this done?
• Is there a smarter way to use writeStats instead of declaring it inside handleHangarInput?

Still not a pro in closures and Scoping. As always appreciate your help!

Edited with further code

Here's the revised code:

hangar = function(game){
}

hangar.prototype = {
  
  loadImages: function(graphicAssets){
    ...
  },
  
  writeTerminal: function(timer, str, destination){
  },
  
  writeStats: function(){
      console.log(this); // returns undefined
      console.log(this.writeTerminal); // errors out!
  },
    
  handleHangarInput: function(layerShips, layerBg){
    
    ... does some variable declarations of which one is:
    
    var writeStats = this.writeStats;
    
    function viewHangarPosition() {
      
      writeStats.call(this);
      
    }
    
    keyleft.onDown.add(function(){
        
        if (currentship > 0) {
            currentship--;
            viewHangarPosition();
        }
    });

    keyright.onDown.add(function(){
        
        if (currentship < shipNumber-1) {
            currentship++;
            viewHangarPosition();
        }
    });

  }
  create: function(){
      this.handleHangarInput(layerShips, layerBg);
  }
    
}

回答1:

Javascript has calltime binding of the this keyword. I.e., what this refers to in a function depends on how exactly that function was called (not how it was defined). In a nutshell: this refers to the object the method was called on.

foo.bar();

Here inside bar the keyword this will refer to foo.

bar();

Here inside bar the keyword this will not refer to anything in particular, so defaults to the global object window.

var bar = foo.bar;
bar();

Same as above (window), because of how the function was called.

If you want to reassign object methods yet still keep their context at call time, you need to handle this explicitly:

var bar = foo.bar.bind(foo);
bar();

// or:
var bar = foo.bar();
bar.call(foo);

回答2:

Not sure this is what your asking, but when you call:

writeStats(); 

as it is done in the viewHangarPosition, since you are not applying the function to any object, it's the window object that is passed to writeStats() as the this object. So in writeStats, this.writeTerminal will be undefined.

来源：https://stackoverflow.com/questions/29917233/javascript-oop-accessing-methods-from-other-nested-methods