javascript事件监听中传递匿名函数(嵌套定义的命名函数)与命名函数的区别

项目中有个需求，事件第一次执行（立即执行）与后几次执行不同，但是直接传递定义好的命名函数，返回结果一样。。如果通过匿名函数内再嵌套具名函数，结果就能返回正确！代码如下：

代码

            
                <buttonclass="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，之后点击打印2

此处需要理解概念：对象的引用类型和函数的闭包

解读

对象按照引用传递。第一个fn指向匿名函数(对象)，然后添加事件指向的是匿名函数(对象)，你改写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
        

后记

项目中刚开始想实现此功能的时候用的是第一种方法，但是未能实现，经同事指点，需要嵌套一个匿名函数，形成闭包，取最后赋值的fn。对于对象的引用类型之前熟悉，但理解不深刻，具体问题无法分析。所以基础还是要理解透啊。