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

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/51352229

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

代码

<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,之后点击打印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。对于对象的引用类型之前熟悉,但理解不深刻,具体问题无法分析。所以基础还是要理解透啊。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Golang语言--指针

在Go中指针是很容易学习的。一些进入编程任务,指针更容易操作,如通过引用调用,需要要使用指针来执行。所以学习指针成为完美Go程序员很有必要。让我们开始学习指针的...

376120
来自专栏有困难要上,没有困难创造困难也要上!

Python使用functools实现注解同步方法

32050
来自专栏程序员阿凯

java中“53”个关键字(含2个保留字)

17650
来自专栏十月梦想

流程控制的另一种书写方式

多个层次的嵌套会有多个括号看起来比较繁琐,流程控制可以用:代表左侧的{;endif、endswitch、endfor、endwhile、endforeach代表...

10270
来自专栏Linux驱动

25.C++- 泛型编程之函数模板(详解)

本章学习: 1)初探函数模板 2)深入理解函数模板 3)多参函数模板 4)重载函数和函数模板 ---- 当我们想写个Swap()交换函数时,通常这样写: voi...

29740
来自专栏Java成长之路

动态代理详解

代理 是常用的基本设计模式之一,在某些情况下,一个客户不想或者不能直接引用一个对 象,此时可以通过一个称之为“代理”的第三者来实现 间接引用。代理对象可以在客户...

9510
来自专栏HTML5学堂

JavaScript中的this详解

HTML5学堂:this属于JS的底层知识,了解this之后,能够实现一些基本的功能,但是感觉最重要的是,this是面向对象必不可少的组成部分,如果希望能够逐渐...

29340
来自专栏我的博客

加强版正则表达式

以前觉得正则表达很难,今天又加强了一下正则表达的学习收获挺大的 在书写正则表达式的过程中我们遇到数字就用 最近在学习原生js,所有例子都在js下测试 常见案例一...

40590
来自专栏数据结构与算法

P2085 最小函数值(minval)

题目描述 有n个函数,分别为F1,F2,...,Fn。定义Fi(x)=Aix^2+Bix+Ci (x∈N*)。给定这些Ai、Bi和Ci,请求出所有函数的所有函数...

33850
来自专栏前端迷

在循环内使用闭包(Closures)

闭包的本质是一个内部函数访问其作用域之外的变量。闭包可以用于实现诸如 私有变量 和 创建工厂函数之类的东西。

10320

扫码关注云+社区

领取腾讯云代金券