当我需要顶部的函数时，为什么我的脚本中的某些点没有定义函数？

Question

I am making a game using Javascript. I use webpack to bundle my modules, so at the end of each Javascript file I use module.exports . Here is an example:

//spaceship.js
var Spaceship = function(options) {
  this.position = options.position
  this.name = options.name
}

module.exports = Spaceship


//game.js
var Spaceship = require("./spaceship");

var Game = function() {
  this.num_spaceships = 5;
  this.spaceships = [];
  // DEBUGGER 1
  this.add_spaceships();
}

Game.prototype.add_spaceships = function() {
  // DEBUGGER 2
  for(var i = 0; i < this.num_spaceships; i++) {
    this.spaceships.push(this.randomSpaceship
  }
}

Game.prototype.randomSpaceship = function() {
  //DEBUGGER 3
}

At each of the debugging points above, if I open Chrome dev tools and type in Spaceship I get Uncaught ReferenceError: Spaceship is not defined(…)

If I change function randomSpaceship as follows:

Game.prototype.randomSpaceship = function() {
  //DEBUGGER 3
  var s = new Spaceship();
}

Then at DEBUGGER 3, Spaceship is now defined (if I open dev tools I get that Spaceship is a function).

Why does this happen? I imagined it could have something to do with variable hoisting perhaps, but I am declaring and assigning the variable Spaceship at the top of the file game.js.

Answer 1

This happens because you don't use Spaceship variable inside Game and add_spaceships functions where DEBUGGER 1 and DEBUGGER 2 debugging points are located and so Chrome doesn't capture this variable in closure. In DEBUGGER 3 you use the variable and so it's captured in a closure and you can inspect it.