JavaScript闭包原理分析

Maxiye 发布于2019-08-20 14:40 / 3247人阅读

写了几个小例子揭示JS中闭包的本质，适合自己运行后分析。

HTML文件





    
    Test

JS代码

$(function () {


    /*
    给6个按钮绑定事件，点击打印按钮的序号
     */
    for (var i = 0; i < 6; i++) {
        $("button").eq(i).on("click", function () {
            console.log(i);
        });
    }

    /*
    解决方案一：借用DOM元素的属性存储序号i
     */
    for (var i = 0; i < 6; i++) {
        $("button").eq(i).attr("i", i).on("click", function () {
            console.log($(this).attr("i"));
        });
    }


    /*
    解决方案二：利用IIFE将i作为参数传递给内部函数
     */
    for (var i = 0; i < 6; i++) {
        (function (i) {
            $("button").eq(i).on("click", function () {
                console.log(i);
            });
        })(i);
    }

    /*
    错误方案：IIFE使用位置错误
     */
    for (var i = 0; i < 6; i++) {
        $("button").eq(i).on("click", function () {
            (function (i) {
                console.log(i);
            })(i);
        });
    }

    /*
    解决方案三：利用IIFE所创造的“块级作用域”，将i赋值给局部变量
    */
    for (var i = 0; i < 6; i++) {
        (function () {
            var temp = i;
            $("button").eq(temp).on("click", function () {
                console.log(temp);
            });
        })();
    }

    /*
    什么是闭包？
    */
    function closure() {
        var i = 0;
        return function fun() {
            i++;
            console.log(i);
        }
    }

    var foo = closure();
    foo();
    foo();
    foo();

    var bar = closure();
    bar();
    bar();
    bar();

    $(".hide").show().on("click", foo)

});

GPU云服务器云服务器 javascript闭包 javascript闭包详解 js跨域原理分析语音降噪图形分析原理webrtc

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

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

对javascript中闭包的理解

摘要：在前端开发中闭包是一个很重要的知识点，是面试中一定会被问到的内容。闭包的用途闭包可以用在许多地方。这里仅仅是我对闭包的一些见解，若有错误的地方，还望大家提出，一起交流共同进步参考文献你不知道的上卷深入理解系列在前端开发中闭包是一个很重要的知识点，是面试中一定会被问到的内容。之前我对闭包的理解主要是通过闭包可以在函数外部能访问到函数内部的变量，对闭包运用的也很少，甚至自己写过闭包自己都...

Enlightenment 2019-08-20 17:50 评论0 收藏0
【进阶2-2期】JavaScript深入之从作用域链理解闭包

摘要：使用上一篇文章的例子来说明下自由变量进阶期深入浅出图解作用域链和闭包访问外部的今天是今天是其中既不是参数，也不是局部变量，所以是自由变量。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第7天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计...

simpleapples 2019-08-23 13:47 评论0 收藏0
你不知道的JavaScript·第一部分

摘要：空格一般没意义会被忽略解析语法分析这个过程会将词法单元转换成抽象语法树。小结本章节我们深入理解了的作用域，提升，闭包等概念，希望你能有所收获，下一部分整理下解析对象原型等一些概念。第一章：作用域是什么 1、编译原理 JavaScript 被列为 ‘动态’ 或 ‘解释执行’ 语言，于其他传统语言（如 java）不同的是，JavaScript是边编译边执行的。一段源码在执行前会经历三...

Tonny 2019-08-22 18:18 评论0 收藏0
十分钟快速了解《你不知道的 JavaScript》（上卷）

摘要：最近刚刚看完了你不知道的上卷，对有了更进一步的了解。你不知道的上卷由两部分组成，第一部分是作用域和闭包，第二部分是和对象原型。附录词法这一章并没有说明机制，只是介绍了中的箭头函数引入的行为词法。第章混合对象类类理论类的机制类的继承混入。最近刚刚看完了《你不知道的 JavaScript》上卷，对 JavaScript 有了更进一步的了解。《你不知道的 JavaScript》上卷由两部...

赵春朋 2019-08-26 12:16 评论0 收藏0
前端基础

摘要：谈起闭包，它可是两个核心技术之一异步基于打造前端持续集成开发环境本文将以一个标准的项目为例，完全抛弃传统的前端项目开发部署方式，基于容器技术打造一个精简的前端持续集成的开发环境。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日...

graf 2019-08-21 18:38 评论0 收藏0