闭包是什么？

闭包是内部函数可以访问外部函数的变量。它可以访问三个作用域：首先可以访问自己的作用域（也就是定义在大括号内的变量），它也能访问外部函数的变量，和它能访问全局变量。

内部函数不仅可以访问外部函数的变量，也能访问外部函数的参数（parameters）。但注意，它只能访问外部函数的 parameters ，而不能访问外部函数的 arguments 对象。

举例说明

JavaScript 闭包

function showName (firstName, lastName) {


​   var nameIntro = "Your name is ";

    // 内部函数可以访问外部函数的变量（nameInfo）、parameter (firstName、lastName)

    ​function makeFullName () {


        ​return nameIntro + firstName + " " + lastName;


    }

​

    ​return makeFullName ();


}


​

showName ("Michael", "Jackson"); // Your name is Michael Jackson

Jquery 闭包

$(function() {

    ​var selections = [];

    // 能访问 selections 变量

    $(".niners").click(function() {

        // 能更新变量 selections

        selections.push (this.prop("name"));

    });

});

闭包的规则和副作用

即使是被返回的闭包仍然可以访问外部函数的变量

JavaScript 的执行时候的作用域和创建时候的作用域是一样的。这也就是说即使被外部函数返回后，内部函数仍然能访问外部函数的变量。

function celebrityName (firstName) {

    var nameIntro = "This celebrity is ";

   function lastName (theLastName) {

        return nameIntro + firstName + " " + theLastName;

    }

    return lastName;

}

​

​var mjName = celebrityName ("Michael");// 这个时候外部方法 celebrityName 已经被返回了

​

​// 闭包仍然可以访问外部方法的变量和参数

mjName ("Jackson"); // This celebrity is Michael Jackson


闭包存储的是外部函数的变量的引用

存储的不是实际的值，在闭包被调用之前，如果外部函数中变量的值发生改变，会变得更有意思。

function celebrityID () {

    var celebrityID = 999;

    // 返回的包含内部函数的对象

    return {

        getID: function ()  {

            // 内部函数返回的是更新以后的 celebrityID 变量值

            return celebrityID;

        },

        setID: function (theNewID)  {

            // 内部函数随时都能改变外部函数内的变量。

            celebrityID = theNewID;

        }

    }

}

​

​var mjID = celebrityID (); // 此时，外部函数的 celebrityID 变量被改变。

mjID.getID(); // 999​

mjID.setID(567); // 改变外部函数的 celebrityID 变量。

mjID.getID(); // 567

闭包的副作用

开发中有如下情况

​function celebrityIDCreator (theCelebrities) {

    var i;

    var uniqueID = 100;

    for (i = 0; i < theCelebrities.length; i++) {

      theCelebrities[i]["id"] = function ()  {

        return uniqueID + i;

      }

    }

    return theCelebrities;

}

​

​var actionCelebs = [{name:"Stallone", id:0},

    {name:"Cruise", id:0},

    {name:"Willis", id:0}

];

​

​var createIdForActionCelebs = celebrityIDCreator (actionCelebs);

​

​var stalloneID = createIdForActionCelebs [0];

console.log(stalloneID.id()); // 103

在调用匿名函数的时候，uniqueID 已经加了 数字 3 变成 103，生成的 celebritiesID 也是 103，数组的每个元素也就是都是 103，而不是 100、101、102。

这是因为闭包（也即是例子中的内部匿名函数）访问的是外部函数的变量的引用，而不是变量的值。为了解决这个 BUG，我们可以使用一种 ** Immediately Invoked Function Expression ** (IIFE)(立即执行函数语法)，代码如下：

function celebrityIDCreator (theCelebrities) {

    var i;

    var uniqueID = 100;

    for (i = 0; i < theCelebrities.length; i++) {

        theCelebrities[i]["id"] = function (j)  {

            // 这里的 j 参数也就是在 调用（IIFE）时传过来的参数 i。

            return function () {

                return uniqueID + j;

                // 依次接收传递过来 i 值，然后把它保存在数组中。

            } () // 通过在 function 末尾处加 () ,可以立即执行它，然后只返回 uniqueID + j 的值，而不是 一个 function。

        } (i); // 传递过来一个 i 变量作为匿名函数的参数，并立即执行它。

    }

​

    return theCelebrities;

}

​

​var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];

​

​var createIdForActionCelebs = celebrityIDCreator (actionCelebs);

​

​var stalloneID = createIdForActionCelebs [0];

console.log(stalloneID.id); // 100​​

​var cruiseID = createIdForActionCelebs [1];


console.log(cruiseID.id); // 101

《Web 前端面试指南》1、JavaScript 闭包深入浅出的更多相关文章

  1. web前端面试试题总结---javascript篇

    JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...

  2. 《Web 前端面试指南》2、JavaScript 的 Bind 函数进阶

    使用 Bind() 设置方法中 this 对象 //<button>获取随机的人</button>​ //<input type="text"> ...

  3. web前端面试系列 一 js闭包

    一.什么是闭包? JavaScript高级程序设计第三版: 闭包是指有权访问另一个函数作用域中的变量的函数. 在js中定义在函数内部的子函数能够访问外部函数定义的变量,因此js内部函数就是一个闭包. ...

  4. web前端面试总结

    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的! 前端还是一个 ...

  5. web前端面试试题总结---html篇

    HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...

  6. web前端面试试题总结---其他

    其他问题 原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的? 你遇到过比较难的技术问题是?你是如何解决的? 设计模式 知道什么是singleton, factory, strategy ...

  7. web前端面试试题总结---css篇

    CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...

  8. Web前端面试笔试题总结

    最近一段时间要毕业了,忙着找工作,见过不少笔试面试题,自己总结了一些加上网上找的一些整合了一下.答案暂时都东拼西凑出来了,但是还是先不发出来,一方面是答案并不是唯一的并且自己的答案不能保证对,另一方面 ...

  9. 2016年Web前端面试题目汇总

    转载: 2016年Web前端面试题目汇总 以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中未解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢 ...

随机推荐

  1. Windows Azure 服务器时间问题

    最近一直在做学校的一个小项目,前期在没有服务器端的情况下意淫做出来了手机客户端.在寒假里使用ASP.NET快速做了一个网站并且设计好了需要使用其他内容,在Windows Azure上测试评估,为学校的 ...

  2. poj 1094（拓扑排序）

    http://poj.org/problem?id=1094 题意:给你m个字母,有n个判断语句.求在哪个语句就可以判断出这个是不是一个环,或者在哪个语句可以判断出这些字母的排序规则,或者就是不能确定 ...

  3. C/C++ 错误处理

    has incomplete type and cannot be defined在头文件中添加该类型所在的文件eg:aggregate 'std::stringstream oss' has inc ...

  4. [CareerCup] 16.2 Measure Time in a Context Switch 测量上下文转换的时间

    16.2 How would you measure the time spent in a context switch? 上下文转换发生在两个进程之间,比如让一个等待进程进入执行和让一个运行进程进 ...

  5. 【译】Design For Maturing Android-为日渐成熟的Android做设计

    为日渐成熟的Android做设计 [声明] 本篇博文英文版原文来自Smashing Magazine,本人经Smashing Magazine邮件授权后翻译,转载请注明出处.谢谢!原文地址. 我将不定 ...

  6. javascript重点笔记

    操作符之间的优先级(高到低):算术操作符 >比较操作符 >逻辑操作符 >"="赋值符号 算术运算符

  7. 使用RestTemplate访问restful服务时遇到的问题

    可以通过通过wireshark抓包,使用Postman发送请求 wireshark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示网络封包的详细信息.使用wireshark的人必 ...

  8. ruby rails_autolink不能加载的原因

    从rails 3.1.0开始,默认在ActionView::Helper::TextHelper中的auto_link方法已经被移除,放到了第三方的gem里:rails_autolink.遂想试一下其 ...

  9. （leetcode：选择不相邻元素，求和最大问题）：打家劫舍（DP：198/213/337）

    题型:从数组中选择不相邻元素,求和最大 (1)对于数组中的每个元素,都存在两种可能性:(1)选择(2)不选择,所以对于这类问题,暴力方法(递归思路)的时间复杂度为:O(2^n): (2)递归思路中往往 ...

  10. WinForm 进度条

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...