JavaScript入门教程笔记(8)-闭包函数和IIFE

秒速五厘米 2022-04-13 09:57 149阅读 0赞

## 1 闭包 ##

闭包（closure）是JavaScript语言的一大特色，也是一个难点。理解闭包，首先要理解变量作用域。

作用域有两种：全局作用域和函数作用域。函数内部可以访问全局变量。

var n = 999;
    function f() {
        console.log(n);
    }
    f(); // 999

上面代码中，函数 f 可以读取全局变量 n。

但是，函数外部不能访问函数内部的变量。

function f() {
        var n = 999;
    }
    console.log(n); // Error

上面代码中，函数内部声明的变量 n 在外部无法访问。

如果一定要得到函数内的局部变量，只有通过变通方法才能实现，那就是在函数内部再定义一个函数。

function f1() {
        var n = 999;
        function f2() {
            console.log(n);
        }
        return f2;
    }
    
    var result = f1();
    result(); // 999

上面代码中，函数f2在f1内部，则f1定义的变量对f2都是可见的，而函数f1的返回值就是f2，所以就可以在外部获得f1的内部变量了。

函数f2就是闭包，即能够读取其它函数内部变量的函数，也可以把闭包简单理解成“定义在函数内部的函数”。

闭包的最大用处有两个，一是可以访问函数内部的变量，二是让这些变量始终保存在内存中，即闭包可以使它的"诞生环境"一直存在。

function createInc(start) {
        return function() {
            return start++;
        };
    }
    
    var inc = createInc(5);
    
    inc(); // 5
    inc(); // 6
    inc(); // 7

上面代码中，通过闭包inc使得函数内部变量start始终在内存中，每一次调用都是在上一次调用基础上进行的。

为什么会这样呢？原因在于inc始终在内存中，而inc依赖于createInc，因此createInc和内部变量start都始终在内存中，不会在调用结束后就被回收。

注意，外层函数每次运行都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，所以内存消耗很大，因此不能滥用闭包。

## 2 立即调用的函数表达式（IIFE） ##

圆括号()是一种运算符，跟在函数名之后，表示调用该函数。比如，print()表示调用print函数。

有时需要在定义函数之后，立即调用该函数。这时，不能在函数定义之后加上圆括号，否则产生语法错误。

function(){/*code*/}(); // Error

上面代码错误的原因是，JavaScript把出 现在行首的function一律解释成语句，认为这一段是函数定义，不应该以圆括号结尾，所以就报错了。

解决方法就是让function不要出现在行首，让引擎将其理解成一个表达式。最简单的处理，就是放在一个圆括号里面。

(function(){ /* code */ }());
    // 或者
    (function(){ /* code */ })();

上面两种写法都以圆括号开头，避免了错误，这就叫做“立即调用的函数表达式”（Immediately-Invoked Function Expression），简称IIFE。

注意，上面两种写法最后的分号都是必须的。如果没有分号，JavaScript会将它们连在一起解释，可能就会报错。

通常情况下，只对匿名函数使用这种“立即执行的函数表达式”。它的目的有两个：一是不必为函数命名，避免了污染全局变量；二是内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。

// 写法一
    var tmp = newData;
    processData(tmp);
    
    // 写法二
    (function() {
        var tmp = newData;
        processData(tmp);
    }());

上面代码中，写法二比写法一更好，因为完全避免了污染全局变量。

*注：本文适用于ES5规范，原始内容来自 [JavaScript 教程][JavaScript]，有修改。*

[JavaScript]: https://wangdoc.com/javascript/index.html

发表评论取消回复

表情：

评论列表（有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript（函数，作用域和闭包）

目录一，什么是函数 1.1，常用系统函数 1.2，函数声明 1.3，函数表达式二，预解析 2.1，函数自调用

矫情吗；*/ 2023年10月15日 13:20/ 0 赞/ 55 阅读

相关 JavaScript函数闭包

文章目录函数闭包导引什么是闭包闭包的例子示例1：示例2：

淩亂°似流年/ 2022年10月21日 03:51/ 0 赞/ 193 阅读

相关闭包 vs 函数 in JavaScript (读书笔记)

\ 函数是一段静态的代码，脚本文件；因此它是一个代码书写时，以及编译期的、静态的概念； \ 闭包则是函数的代码在运行过程中的一个动态环境，是一个运行期的、动态的概念。由于引擎

梦里梦外;/ 2022年10月01日 01:58/ 0 赞/ 176 阅读

相关【JavaScript】匿名函数和闭包

一、匿名函数就是没有名字的函数，闭包是可访问一个函数作用域里变量的函数。 1、普通函数： <span style="font-size:18p

桃扇骨/ 2022年09月26日 02:29/ 0 赞/ 257 阅读

相关【JavaScript】——匿名函数和闭包

前提通过最近一段时间对JavaScript视频的学习，接触到一种新的函数——匿名函数，也是通过对新鲜事物的学习，进而接触到新的一个名词——闭包。首先还是从基础的

蔚落/ 2022年07月24日 05:27/ 0 赞/ 248 阅读

相关 JavaScript闭包学习笔记

JavaScript闭包学习笔记闭包是指有权访问另一个函数作用域中局部变量的函数。闭包的定义简单明了，我们来仔细分析一下这句话。JavaScript中由于只有在进入

ゝ一世哀愁。/ 2022年06月02日 01:19/ 0 赞/ 213 阅读

相关 Javascript学习笔记3 函数表达式闭包

函数声明提升：执行代码之前会先读取函数声明（但是使用函数表达式命名定义函数时，使用前必须赋值） sayhi(); //错误，函数还未赋值 var sa

深碍√TFBOYSˉ_/ 2022年05月29日 02:00/ 0 赞/ 179 阅读

相关闭包与立即调用函数表达式IIFE

JavaScript中闭包和立即执行函数是老生常谈的问题。本人对于很多知识只是过一篇，从未好好总结过。本文是在本人阅读了众多的技术文档后的梳理总结。为什么把闭包和立即调用函数表

雨点打透心脏的1/2处/ 2022年05月18日 06:51/ 0 赞/ 156 阅读

相关 JavaScript入门教程笔记(8)-闭包函数和IIFE

1 闭包闭包（closure）是JavaScript语言的一大特色，也是一个难点。理解闭包，首先要理解变量作用域。作用域有两种：全局作用域和函数作用域。函数内部可以

秒速五厘米/ 2022年04月13日 09:57/ 0 赞/ 150 阅读

相关 JavaScript函数闭包

1、为什么会有闭包 > 由于作用域的原因，我们无法在函数外访问函数里面定义的变量，但有时候我们又会有这样的需求，这个时候我们就需要使用闭包了。 2、什么是闭包 > 在函数

红太狼/ 2022年01月27日 11:41/ 0 赞/ 297 阅读