javascript事件监听中传递匿名函数(嵌套定义的命名函数)与命名函数的区别
2016-05-09 12:57
471 查看
项目中有个需求,事件第一次执行(立即执行)与后几次执行不同,但是直接传递定义好的命名函数,返回结果一样。。如果通过匿名函数内再嵌套具名函数,结果就能返回正确!代码如下:
上面这段代码一直打印1
这段代码第一次打印1,之后点击打印2
此处需要理解概念:对象的引用类型和函数的闭包
代码
<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。对于对象的引用类型之前熟悉,但理解不深刻,具体问题无法分析。所以基础还是要理解透啊。相关文章推荐
- JS对象调用属性
- js--String对象方法属性整理
- 2016江苏省大学生程序设计大赛 JSCPC 总结
- js首字母大写
- Servlet & JSP - Listener
- js实现title滚动效果
- js动态创建dom元素示例
- [字母控] 层次选择器的详细说明,祝你早日熟练javascript
- jsp页面输入手机号时进行验证
- js--Math对象的属性方法整理
- javascript DOM选择器querySelector
- js文字转码方法【学习笔记】
- JavaScript中判断为整数的多种方式
- C# Json 转对象
- 普元_js_取值
- js关于字符串空格的处理
- 在JSP程序中我用新图片替换掉了原图片(名字,格式相同),为什么打开网页显示的还是以前的图片呢
- JavaScript -- 简单的canvas标签
- js笔记
- JavaScript -- drop,drag的使用