V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Windweller
V2EX  ›  程序员

JavaScript有关Let的用法

  •  
  •   Windweller · 2013-08-13 18:16:51 +08:00 · 10213 次点击
    这是一个创建于 4127 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近在读MDN上关于JavaScript1.7的更新(感觉js更新得不是一般的快。。)

    感觉let statement是个很好的工具,尤其是在循环或是if语句里面,要建立一种临时的局部变量,比scope绑定到函数的var肯定要方便很多。

    然后MDN提供了这样一段代码:

    var list = document.getElementById("list");

    for (var i = 1; i <= 5; i++) {
    var item = document.createElement("LI");
    item.appendChild(document.createTextNode("Item " + i));

    let j = i;
    item.onclick = function (ev) {
    alert("Item " + j + " is clicked.");
    };
    list.appendChild(item);
    }

    下面配上解释说,这里,j是必须的,换成var j这玩意不会有用,去掉j,直接用 i, 也不会起作用。

    请问它为什么用let j=i 就可以让 j 可以在下面那个匿名函数中被调用了?(然后一个小白点的问题。。function (ev) 中的ev是啥东西,我也见过类似 function (el, index, array)。。。这东西有名字么。。能给个MDN的知识链接么)
    10 条回复    2019-04-19 08:13:28 +08:00
    dorentus
        1
    dorentus  
       2013-08-13 19:09:58 +08:00   ❤️ 2
    for (var i = 1; i <= 5; i++) 这里的 i 是全局可见的,于是循环体里的函数每次被调用的时候都是取的这个全局的 i 的值,而循环结束后,i 的值就被固定为 5 了。

    循环体里面的 let j = i; 限制了变量 j 的作用域在循环体内,每次循环的时候这个 j 都是新的(被赋予了当时变量 i 的值),同在循环体里的函数所使用的 j 都是当次循环时创建的 j(好像正常的说法是说『j 和这个函数被绑定在了一起,形成了一个闭包』这样吧)。

    ev 就是 event 的缩写吧。el 大概是 element。

    说句题外话,Javascript 这个名字好像是 Mozilla 基金会所有的,MDN 里面提到的 Javascript x.x 就是特指他们自己的这个实现的版本。
    bitsmix
        2
    bitsmix  
       2013-08-13 23:13:17 +08:00
    觉得这不是啥好事儿额。。
    又多了一个坑
    chemzqm
        3
    chemzqm  
       2013-08-13 23:32:54 +08:00
    如果你在一个函数里var多次j,它其实都是指向一个引用。
    Windweller
        4
    Windweller  
    OP
       2013-08-13 23:44:14 +08:00
    @chemzqm 这个例子。。MDN的这个例子是不是比较极端,本来不该把item.onclick的事件注册放到循环中去的。它为了表明let j每次都是新的,才故意放到循环里去了。。

    其实我把这段代码复制到JS Bin去后发现是报错的jsbin.com/‎ 说是不要在循环里放置函数,而且也说expect an identifier instead saw "let"。。Chrome Console里好像也不认识let。。。
    toctan
        5
    toctan  
       2013-08-14 00:32:19 +08:00   ❤️ 2
    @Windweller 不是不该把 item.onclick 的事件注册放到循环中去,而是不应该在循环中制造 closures
    参见 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures Creating closures in loops: A common mistake 一节
    https://gist.github.com/toctan/6222729
    toctan
        6
    toctan  
       2013-08-14 00:38:57 +08:00 via Android
    @livid 贴的 gist 为什么上下这么多空行?
    Windweller
        7
    Windweller  
    OP
       2013-08-14 00:59:09 +08:00
    @toctan 原来let只能在Firefox上用,怪不得Chrome里调试会失败了!在MDN上看到JS1.7,JS1.85一类的特殊申明,都是只能在Firefox上用,其他浏览器不能使用吗?(这简直是极大增加学习难度嘛)
    bitsmix
        8
    bitsmix  
       2013-08-14 01:07:49 +08:00
    @toctan v2ex 的 css 写的跟 gist 那边冲突了。行号的宽度太小了。
    zzNucker
        9
    zzNucker  
       2013-08-14 12:15:20 +08:00
    @Windweller 可以认为Javascript 是mozilla的标准
    其它浏览器支不支持要看能不能普及咯 比如能不能进入ECMA的标准
    SuperMonster009
        10
    SuperMonster009  
       2019-04-19 08:13:28 +08:00 via Android
    还是多用 let 和 const 吧 var 感觉会被慢慢遗弃的 总有一天编辑器会提示你 var is depricated
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2655 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 66ms · UTC 10:02 · PVG 18:02 · LAX 02:02 · JFK 05:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.