javascriptイベントの傍受における匿名関数(入れ子定義のネーミング関数)とネーミング関数の違い

プロジェクトには必要なものがあります.イベントの最初の実行(即時実行)は後の実行とは異なりますが、定義されたネーミング関数を直接伝達して結果を返します.匿名関数を通してさらに名前関数を入れ替えると、正しい結果が返ってきます.コードは以下の通りです
コード

<button class="button">  </button>

        (function(w) {
            //             
            var fn = function() {
                console.log(1);
            };
            var btn = document.querySelector('.button');
            btn.addEventListener('click', fn, false);
            btn.click();

            //  fn   ，            
            fn = function() {
                console.log(2);
            };
        })(window);

上のコードはずっと1プリントしています.

        (function(w) {
            //             
            var fn = function() {
                console.log(1);
            };
            var btn = document.querySelector('.button');
            btn.addEventListener('click', function() {
                fn();
            }, false);
            btn.click();

            //  fn   ，            
            fn = function() {
                console.log(2);
            };
        })(window);

このコードは初めて1をプリントしてからプリントをクリックします.
ここでは、概念を理解する必要があります.オブジェクトの参照の種類と関数の閉じたパッケージです.
解読する
オブジェクトは参照に従って渡されます.最初のfnは匿名関数(オブジェクト)を指し、次いでイベントが指す匿名関数(オブジェクト)を追加し、fnを書き換えても匿名関数(オブジェクト)は書き換えられない.第二のイベントは匿名関数であり、fnが指す関数を呼び出します.

var a = b = c = {d:1}; //a, b       

b = {}; //  b       

c.d = 3; //  c       

console.log(a); //Object{c:3}，  a, c      ，        ，      b   fn

後記
プロジェクトの中で最初にこの機能を実現したい時に使ったのは最初の方法ですが、実現できませんでした.同僚に教えられて、匿名の関数を入れ替える必要があります.対象の引用の種類については以前からよく知っていましたが、深く理解できず、具体的な問題は分析できませんでした.だから基礎はやはり理解します.