关于 JavaScript 闭包的简单例子

stackfing 发布于2019-08-22 10:35 / 2126人阅读

摘要：于控制台中运行如下例子例无闭包例闭包注意上述两个例子中，例中，，为例中，，为。因为循环体是，循环结束。

于控制台中运行如下例子：

例 ①：无闭包

var x = [];
for (var i = 0; i < 9; i++) {
    setTimeout(function () {
        x[i] = i
    }, 1000)
}
console.log(i);
console.log(x);    // ▶(10) [empty × 9, 9]

例 ②：闭包

var y = [];
function doSetTimeout(i) {
    setTimeout(function () {
        y[i] = i;
    }, 1000);
}
for (var i = 0; i < 9; i++) {
    doSetTimeout(i);
}
console.log(i);
console.log(y);    // ▶(9) [0, 1, 2, 3, 4, 5, 6, 7, 8]

注意上述两个例子中，

例 ① 中，x = [empty × 9, 9]，length 为 10；

例 ② 中，y = [0, 1, 2, 3, 4, 5, 6, 7, 8]，length 为 9。

因为循环体是 i++，循环结束 i = 9。
我们把 setTimeout等待时间改为0，再看结果：

var y = [];
function doSetTimeout(i) {
    setTimeout(function () {
        y[i] = i;
    }, 0);
}
for (var i = 0; i < 9; i++) {
    doSetTimeout(i);
}
console.log(y);    // ▶(9) [0, 1, 2, 3, 4, 5, 6, 7, 8]

简写

var z = [];
for (var i = 0; i < 9; i++) {
    (function (i) {
        setTimeout(function () {
            z[i] = i;
        }, 1000)
    })(i);
}
console.log(z);

引申

注意，如果我们将上面的例子改为：

var z = [];
for (var i = 0; i < 9; i++) {
    (function () {
        setTimeout(function () {
            z[i] = i;
        }, 1000)
    })();
}
console.log(z);    // ▶(10) [empty × 9, 9]

我们看输出结果是什么，注意函数体中的 i 是函数体内部专有的还是引用的全局变量？
然后，我们进一步修改上述代码，看看结果又会是否达到预期：

var z = [];
for (var i = 0; i < 9; i++) {
    (function () {
        var j = i
        setTimeout(function () {
            z[j] = j;
        }, 1000)
    })();
}
console.log(z);

云服务器 GPU云服务器关于大数据的例子关于数据分析的例子简单的python例子关于javascript的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90896.html

前端基础进阶（四）：详细图解作用域链与闭包

摘要：之前一篇文章我们详细说明了变量对象，而这里，我们将详细说明作用域链。而的作用域链，则同时包含了这三个变量对象，所以的执行上下文可如下表示。下图展示了闭包的作用域链。其中为当前的函数调用栈，为当前正在被执行的函数的作用域链，为当前的局部变量。 showImg(https://segmentfault.com/img/remote/1460000008329355);初学JavaScrip...

aikin 2019-08-21 18:29 评论0 收藏0
[译] 你想知道的关于 JavaScript 作用域的一切

摘要：原文链接原文作者你想知道的关于作用域的一切译中有许多章节是关于的但是对于初学者来说甚至是一些有经验的开发者这些有关作用域的章节既不直接也不容易理解这篇文章的目的就是为了帮助那些想更深一步学习了解作用域的开发者尤其是当他们听到一些关于作用域的原文链接: Everything you wanted to know about JavaScript scope原文作者: Todd Mott...

Flands 2019-08-19 18:38 评论0 收藏0
关于javascript中的闭包

摘要：在上面的执行中，只是又返回了一个新的对象，但是并没有执行新对象里面的属性对应的匿名函数喔，那就是没有改变的值啊，所以你继续也会输出同样的结果啊。关于javascript中的闭包我GitHub上的菜鸟仓库地址：点击跳转查看其他相关文章文章在我的博客上的地址：点击跳转其实关于闭包的定义，很多种说法，而关于闭包的解释，更是多不胜数了。很多说得非常复杂，也有很多...

myeveryheart 2019-08-21 12:00 评论0 收藏0
还担心面试官问闭包？

摘要：一言以蔽之，闭包，你就得掌握。当函数记住并访问所在的词法作用域，闭包就产生了。所以闭包才会得以实现。从技术上讲，这就是闭包。执行后，他的内部作用域并不会消失，函数依然保持有作用域的闭包。网上总结闭包的文章已经烂大街了，不敢说笔者这篇文章多么多么xxx，只是个人理解总结。各位看官瞅瞅就好，大神还希望多多指正。此篇文章总结与《JavaScript忍者秘籍》《你不知道的JavaScri...

tinyq 2019-08-21 17:28 评论0 收藏0
初学者彻底理解javascript闭包以及this关键字

摘要：理解了这句话，我们就可以来看闭包了闭包前面说过，函数可以访问函数作用域链中的变量，但如果我们想在函数外访问函数内却不行了。不管是闭包还是this关键字，都是困扰JS初学者的比较难懂的东西，如果你对它们的认识还不足够清晰，那么现在就一起把它们掌握掉。还是那句话，我们从最基本的开始，建立起一个非常清晰的知识结构，好了，开始吧 ? 闭包当然我们今天说的是javascript里的闭包。要学...

魏明 2019-08-21 16:23 评论0 收藏0