Определение и область действия JavaScript-переменной

Question

Я пытаюсь понять, как переменная область видимости работает, когда вы связываете событие.

Следующий пример отлично работает:

function clickHandler() {
    alert(foo);
}

var foo = true;

$('div').on({
    'click': clickHandler
});

См .: http://jsfiddle.net/OliverJAsh/7fM5U/4/

Однако, когда я делаю это простое изменение, оно больше не работает:

function clickHandler() {
    alert(foo);
}

(function () {
    var foo = true;

    $('div').on({
        'click': clickHandler
    });
}());

См .: http://jsfiddle.net/OliverJAsh/7fM5U/3/

Как бы вы сделали, чтобы второй пример работал?Могу ли я что-нибудь сделать с .call?Мне это интересно, потому что функция вызывается там, где определена переменная, поэтому я хочу, чтобы она имела к ней доступ.

ОБНОВЛЕНИЕ:

Я понимаю, почему этоя не могу получить доступ к переменной - но поскольку функция вызывается из того места, где определена переменная, мне было интересно, как я мог бы заставить ее работать, не меняя при этом объема вещей.Я думаю, что спрашиваю о методе .call.

Answer 1

Если вы объявите переменную внутри функции, используя var, она будет доступна только в этой функции или в функциях, которые объявлены в этой функции.

clickHandler объявлено вне функции, в которой объявлено foo, поэтому оно недоступно.

Если вы переместите объявление clickHandler в функцию, вы увидите, что оно отлично работает ;

(function () {
    var foo = true;


    function clickHandler() {
        alert(foo);
    }

    $('div').on({
        'click': clickHandler
    });
}());

Если вы не можете двигаться clickHandler, вам придется изменить его, чтобы получить доступ к foo в качестве параметра;

function clickHandler(foo) {
    alert(foo);
}

(function () {
    var foo = true;

    $('div').on({
        'click': function () {
            // We can access `foo` here because the function is being declared within the scope of `foo`.
            clickHandler(foo);
        }
    });
}());

Answer 2

В javascript переменные находятся внутри функций - поэтому область действия foo находится внутри вашего анонимного (function () { .. }());, который не виден для clickHandler.

Чтобы исправить это, вы можете перенести функцию clickHandler в анонимную функцию следующим образом:

(function () {
  var foo = true;
  var clickHandler = function() {
    alert(foo);
  }

  $('div').on({
    'click': clickHandler
  });
}());

Обновление

Если вы не можете изменить область действия функции clickHandler и не хотите изменять подпись, вы можете использовать функцию call , например, так:

function clickHandler () {
  alert(this);
}

(function () {
  var foo = true;
  $('div').on({
    'click': function() { clickHandler.call(foo); }
  });
}());

Answer 3

когда вы оборачиваете функцию анонимной функцией, анализатор javascript анализирует весь блок вместе и выполняет его как отдельный блок.

вы должны поместить определение вашей функции clickHandler в блок

Answer 4

потому что var foo не определен публично .... попробуйте этот код

var foo = true;
function clickHandler() {
    alert(foo);
}
(function () {
    foo = true;
    $('div').on({
        'click': clickHandler
    });
}());