javascript - 为什么 IIFE 不捕获其范围内的变量？

Question

我正在对 Javascript 中的闭包进行一些试验，尤其是使用 AngularJS 指令（1.x）。

简单地说，我想知道为什么ScenarioOne正确捕获了message我们想要的变量，而ScenarioTwo没有。为什么 IIFE 在调用自身时不能捕获并保持所需的值message？

情景一

 // WORKS. Displays 'We want this message'

  var message = 'We want this message';

  element.bind('click', (function(){
    var msg = message;   // <-- MAGIC ?
    return function(){
      element.append('<p>Value of message: ' + msg + '</p>');
    };
  })());

  message = 'We DON\'T want this message';

情景二

 // DOES NOT WORK. Displays 'We  DON'T want this message'
  var message = 'We want this message';

  element.bind('click', (function(){
    return function(){
      element.append('<p>Value of message: ' + message + '</p>');
    };
  })());

  message = 'We DON\'T want this message';

我想了解，该任务的魔法机制是什么（参见表示为<-- MAGIC的行）？关于这个的一般规则是什么？您想从外部范围获得的所有变量是否需要显式分配给 IIFE 内的新变量？

这是所有这一切的工作 Plunkr：https ://plnkr.co/edit/1M9yrzuOi0bzNHxbb5rO

标签： javascriptangularjs-directiveclosuresvariable-assignmentiife