首页 > 其他分享 >41. JS闭包的原理和作用

41. JS闭包的原理和作用

时间:2022-10-11 18:26:30浏览次数:47  
标签:闭包 funTwo 函数 41 num var JS funOne

1. 前言

闭包(closures)是 Javascript 语言的一个难点,也是它的特色,很多高级应用都是依靠闭包实现的。闭包与变量的作用域以及变量的生命周期密切相关,本节我们就来简单介绍一下。

2. 什么是闭包

所谓闭包,指的就是一个函数。当两个函数彼此嵌套时,内部的函数就是闭包。

因为在 JavaScript 中,函数属于对象,对象又是属性的集合,而属性的值又可以是对象,所以我们可以在函数内部再定义函数。例如在函数 A 中定义了函数 B,然后在函数外部调用函数 B,这个过程就是闭包。

闭包的形成条件是内部函数需要通过外部函数 return 给返回出来,如下例所示:

function funOne(){    // 外部函数
    var num = 0;      // 局部变量
    function funTwo(){   // 内部函数
        num++;                 
        return num;
    }
    return funTwo;
}
var fun = funOne();             // 返回函数 funTwo

以上代码就构成了一个闭包,其实就是函数 fun。

3. 闭包的用途

在介绍闭包的作用之前,我们先来了解一下 JavaScript 中的 GC(垃圾回收)机制。

在 JavaScript 中,如果一个对象不再被引用,那么这个对象就会被 GC 回收,否则这个对象会一直保存在内存中。在上面的例子中,内部函数 funTwo() 定义在外部函数 funOne() 中,因此 funTwo() 依赖于 funOne(),而全局变量 fun 又引用了 funTwo(),所以 funOne() 间接的被 fun 引用。因此 funOne() 不会被 GC 回收,会一直保存在内存中,如下例所示:

function funOne(){
    var num = 0;
    function funTwo(){
        num++;
        console.log(num);
    }
    return funTwo;
}
var fun = funOne();
fun();      // 输出:1
fun();      // 输出:2
fun();      // 输出:3
fun();      // 输出:4

num 是外部函数 funOne() 中的一个变量,它的值在内部函数 funTwo() 中被修改,函数 funTwo() 每执行一次就会将 num 加 1。根据闭包的特点,函数 funOne() 中的变量 num 会一直保存在内存中。

当我们需要在函数中定义一些变量,并且希望这些变量能够一直保存在内存中,同时不影响函数外的全局变量时,就可以使用闭包。

4. 闭包的高级用法

上面介绍的是闭包最原始的写法,在实际开发中,通常会将闭包与匿名函数结合使用,如下例所示:

var funOne = (function(){
    var num = 0;
    return function(){
        num++;
        return num;
    }
})();
console.log(funOne());      // 输出:1
console.log(funOne());      // 输出:2
console.log(funOne());      // 输出:3

此外,同一个闭包机制可以创建多个闭包函数出来,它们彼此没有联系,都是独立的,如下例所示:

function funOne(i){
    function funTwo(){
        console.log('数字:' + i);
    }
    return funTwo;
};
var fa = funOne(110);
var fb = funOne(111);
var fc = funOne(112);
fa();       // 输出:数字:110
fb();       // 输出:数字:111
fc();       // 输出:数字:112

  

标签:闭包,funTwo,函数,41,num,var,JS,funOne
From: https://www.cnblogs.com/jiajunling/p/16780159.html

相关文章

  • 第1章-JSP 简介
    目录什么是JSP安装配置JSP运行环境JSP页面JSP页面简介设置Web服务目录JSP运行原理JSP与JavaServlet的关系HTML与JavaScript什么是JSP★JSP是JavaServerPage的缩写,是......
  • 初识node.js[2]
    一、什么是node.jsnode.jsisajavascriptruntimebuiltonchrome'sV8JavaScriptengine.node.js是一个基于chromeV8引擎的JavaScript运行环境。官网:https://nod......
  • javabean、xml、json、map之间的相互转换
    javabean转map利用cglib的BeanMap类实现转换importorg.springframework.cglib.beans.BeanMap;/****@Title:beanToMap*@Description:javabean转map*@parambean*......
  • JS关于日期的处理
    JS格式化日期//格式化日期Date.prototype.Format=function(fmt)//author:meizzvaro={"M+":this.getMonth()+1,//月份"d+":this.getDate......
  • 40. JS调试(Debug)教程[简明版]
    1.前言在JavaScript开发过程中,代码可能存在一些语法或者逻辑上的错误,导致程序不能得到我们想要的结果,这时就需要我们找到并修复这些错误,我们将查找和修复错误的过程称......
  • 使用SheetJs导出Excel设置指定单元格格式
    vartbl=document.getElementById('sheetjs');varwb=XLSX.utils.table_to_book(tbl);varws=wb.Sheets["Sheet1"];//getthecurrentsheetconsole.log(ws......
  • 38. JS表单验证(附带示例)
    1.前言表单是Web应用(网站)的重要组成部分,通过表单可以收集用户提交的信息,例如姓名、邮箱、电话等。由于用户在填写这些信息时,有可能出现一些错误,例如输入手机号时漏掉了......
  • 39. JS动画效果的实现(附带示例)
    1.前言在学习CSS时我们知道,通过CSS可以实现简单的动画效果,但对于比较复杂的动画,使用CSS实现起来就会比较麻烦。除了可以使用CSS来实现外,也可以使用JavaScript......
  • 初识node.js[1]
    一、浏览器中JavaScript组成部分JS核心语法【变量、数据类型;循环、分支、判断;函数、作用域、this;etc...】WebApi【DOM;BOM;Ajax;...】为什么JavaScript可以在浏览器内运行......
  • nlohmann / json 使用
       下载地址   https://github.com/nlohmann/json/tree/develop/single_include/nlohmann/json.hpp  引入工程  json.hpp是源文件包含了所有的函数,引入......