js事件监听中传递匿名函数与具名函数的区别,都是内存地址引用,但是结果不一样

发布于 2022-09-02 15:00:30 字数 588 浏览 21 评论 0

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

图片描述

//上面这个代码初始化打印1,之后点击也一直打印1。

图片描述

//上面这个代码初始化打印1,之后点击打印2。

之前jquery写的,以为是jquery问题,原生测试也一样(chrome环境下)!

尝试过从几个地方理解(执行时上下文,运行时上下文,事件调用,都不能理解),既然都是内存地址引用,按道理应该都是返回第二段代码的结果,不理解。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

久而酒知 2022-09-09 15:00:31

这么说吧,

var o1 = x=> console.log(1);
var o2 = x=> console.log(2);

第一张,定义了一个函数 fn = o1 添加事件监听函数相当于把其赋值到另一个变量。即eventfn = fn; 那么后面在执行fn = o2 的时候 eventfn 还是o1,不会因为fn变成了也变成o2。

var fn = o1;
var evetfn = fn;
eventfn();
fn = o2;
eventfn();

第二张,定义了一个函数fn = o1,然后 eventfn 是另外一个匿名函数(不是fn),其中使用了 fn。所以后面fn = o2 那么 eventfn 运行的时候调用的 fn() 就是输出 2 呀。

var fn = o1;
var eventfn = function(){fn();};
eventfn();
fn = o2;
eventfn();
不回头走下去 2022-09-09 15:00:31

因为函数是对象

唯憾梦倾城 2022-09-09 15:00:31

闭包的作用。
第一个例子,由于执行上下文的关系,每次click都是从script的从上至下执行的。所以每次执行的都是console.log(1)的fn;
而第二个例子事件监听中的是一个匿名函数,里面还有一个函数,这实际上形成了一个闭包,后来定义的console.log(2)的fn就被留在执行环境了,后来每次click就直接调用执行环境中的fn了。
图片描述

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文