可变范围-jQuery / JavaScript

Question

I'm having a bit of trouble with variable scope within jQuery/JavaScript. I'll just give a code example demonstrating my issue as it's probably easier to understand than trying to explain with words.

var example_1 = function() {
    row = 10;
}

var example_2 = function() {
    something.click(function(){
        var something_3 = function() {
            alert(row);
        }
        something_3();
    }
}

The problem is, the row variable cannot be accessed within the something_3 function. I have other variables from the example_1 function being accessed in the example_2 function, but when put in the something_3 function it no longer works. Thanks for any help!

Edit: Added extra code to show what works and what isn't. Row is defined within the Build function as are board and mines. Board and mines can be accessed but row cannot.

var build = function(row) {
  row = typeof row !== 'undefined' ? row : 5;
  board = $('.container');
  mines = [1,2,3,4]; 
}

build();

var start = function() {
  var tile = $('.container div');
  tile.click(function() {
    var this_index = $(this).index();
    var has_mine = $.inArray(this_index, mines);

    var scan = function() {
      alert(row);
    }
    if (has_mine > -1) {
      add_alert("Has mine, you're dead!");
    } else {
      scan();
      $(this).html('Clear!');
    }
 });

  var add_alert = function(msg) {
    board.append("<span class='alert'>" + msg + "</span>")
    $('body').append("<div class='blackout'></div>");
  }

}

start();

Answer 1

Multiple issues:

• If you don't specify var in front of a variable inside a function it becomes a global variable
• row doesn't get intialzed because you didn't call example_1(); yet
• In an unrelated note, don't forget to use semicolons at end of the anonymous functions as it might be interpreted as self executing functions.

EDIT 2:

var build = function(row) {};

ok so your issue is the row variable is a parameter so isn't a global variable anymore. If you remove your row parameter / update variable name passed to build method, it will work.

Answer 2

var build = function(row) {
  row = typeof row !== 'undefined' ? row : 5;
  //[...]
}

row is not being defined as a variable, but instead is a parameter. This way, it doesn't leak as a global variable.

Simply changing the name of parameter should work:

var build = function(rowValue) {
  row = typeof rowValue !== 'undefined' ? rowValue: 5;
  //[...]
}

However, you shouldn't be using implicitly global variable. Global variables are already bad enough.

Option one, declaring variables:

var row, board, mines;

var build = function(rowValue) {
  row = typeof rowValue !== 'undefined' ? rowValue : 5;
  board = $('.container');
  mines = [1,2,3,4]; 
}

Option two, using the global identifier:

var build = function(row) {
  window.row = typeof row !== 'undefined' ? row : 5;
  window.board = $('.container');
  window.mines = [1,2,3,4]; 
}