javascript - さまざまなスコープを識別する方法

Question

このライブラリを使用して、jQuery プラグインにカスタム コンテキスト メニューを追加しています。しかし、ある時点で、スコープが相互作用する方法に関連していると思われる奇妙な問題があります。基本的に、私は 2 つのオブジェクトを持っています。これらは同じですが、2 つの非常にわずかに異なる方法で構築されています。一方は期待どおりに機能し、もう 1 つはそうではありません。

コードの一部を追加します。残念ながら、jsFiddle を作成するのに十分な大きさと複雑さがあります。必要に応じて作成してみます。

$.contextMenu({
  selector : [jQUery selector],
  build : function() {
    // some things to do here...

    var contextMenuItems = {}; // list of all the menu entries
    var actions = [{ label : "1" }, { label : "2" }];

    $.each(actions, function(key, value) {
      var newSubMenu = {}; // sub menu
      // some other things...

      // FIRST OBJECT, DOESN'T WORK
      var subMenu = {
        sep1 : "-",
        remove : {
          callback : function() {
            console.log(action);
          }
        }
      }

      // SECOND OBJECT, WORKS AS EXPECTED
      var subMenu2 = {
        sep1: "-",
      };

      subMenu2["remove"] = {
        callback : function() {
            console.log(action);
          }
      };

      $.extend(contextMenuItems[value.label], { items : $.extend(newSubMenu, subMenu) }); (1)
      $.extend(contextMenuItems[value.label], { items : $.extend(newSubMenu, subMenu2) }); (2)
    });
  }
});

基本的に、コンテキスト メニューの各エントリに同じサブメニューを追加します。サブメニュー エントリをクリックすると"remove"、親ラベルがログに記録されます。しかし、'subMenu'オブジェクトを追加すると (行 (1))、常に最初の「アクション」がログに記録されます。「subMenu2」オブジェクトを追加すると (行 (2))、正しいラベルが表示されます。誰かが私にそれがなぜなのか説明できますか?