一篇文章带你了解JavaScript 函数闭包

Karen110
• 阅读 1085

大家好,我是前端进阶者。

JavaScript变量属于 本地 或者 全局 范围,使用闭包可以让私有变量成为可能。

一、全局变量

一个函数可以访问所有定义在函数 内部 的变量。

function myFunction() {
    var a = 4;
    return a * a;
}

一篇文章带你了解JavaScript 函数闭包

但是函数也可以访问定义在函数 之外 的变量。


var a = 4; //全局变量
function myFunction() {
   return a * a; 
}

一篇文章带你了解JavaScript 函数闭包

第一个例子中,a是一个局部变量.。局部变量只能在定义的函数内使用。

全局变量可以被页面(和窗口)中所有脚本使用(和更改),具有相同名称的全局变量和局部变量是不同的变量。修改一个,不修改其他。

没有关键字var创建的变量,总是全局的,即使是在函数中创建的。

二、变量的生命周期

全局变量只要应用程序(窗口/网页)存在,它就存在。

局部变量生命周期较短。它们在函数被调用时被创建,当函数完成时被删除。

三、为什么需要闭包?

假设要使用一个变量来计数某物,并且希望该计数器可用于所有函数。可以使用一个全局变量和一个增加计数器的函数。这个时候就需要闭包。

案例:一个计数器


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>项目</title>
</head>
<body style="background-color: aqua;">
<p>使用全局变量计数</p>

<button type="button" onclick="myFunction()">计数!</button>

<p id="demo">0</p>

<script>
var counter = 0;

function add() {
return counter += 1;
}

function myFunction() {
document.getElementById("demo").innerHTML = add();
  /* the counter is now equal to 3*/
    } 
</script>
</body>
</html>

一篇文章带你了解JavaScript 函数闭包

注:

计数器只被add()函数改变。问题是,页上的任何脚本可以改变计数器,无需调用add(),如果在函数中声明计数器,没有调用的时候,没有人能改变它 add()。


function add() {
   var counter = 0; //局部变量
   counter += 1;
}

add();
add();
add();

一篇文章带你了解JavaScript 函数闭包

每次都要调用add()函数,计数器被设置为1。

四、JavaScript嵌套函数

所有函数都可以访问全局作用域。

事实上,在JavaScript中,所有函数都能访问它们外部的变量。JavaScript支持嵌套函数. 嵌套函数可以访问它们 上面(外部) 的作用域。

实例中, 内部函数 plus() 在父函数中可以访问 counter 变量。


function add() {
   var counter = 0;
   function plus() {counter += 1;}
   plus();    
   return counter;
}

完整代码:


<!DOCTYPE html>
<html>
<title>项目</title>

<body style="background-color: aqua;">

<h2> JavaScript嵌套函数</h2>

<p id="output"></p>

<script>
function outer() {
var counter = 0;

function inner() {
counter++;
}
inner();
return counter;
}

document.getElementById("output").innerHTML = `计数器是: ${outer()}`;
</script>

</body>
</html>

一篇文章带你了解JavaScript 函数闭包

如果能从外部调用plus()函数,这可能已经解决了计数器的困境,还需要找到一种方法来执行 counter = 0 只执行一次,需要闭包。

五、JavaScript 闭包

自调用函数

变量add被分配了自调用函数的返回值,自调用函数只运行一次. 它将counter设置为零(0),并返回函数表达式。

var add = (function () {
   var counter = 0;
   return function () {return counter += 1;}
})();

add();
add();
add();

// the counter is now 3

这样 add 变成了一个函数. "精彩的" 部分是它可以在父作用域中访问counter。

一篇文章带你了解JavaScript 函数闭包

注:

这就是所谓的 JavaScript 闭包, 它使函数有“私有”变量成为可能。counter受匿名函数的作用域保护, 并且只能使用add函数修改。

六、总结

本文基于JavaScript基础。从函数的基本概念,(变量和全局 )。函数为什么需要闭包,使用闭包可以让私有变量成为可能。通过案例(计数器)的讲解, 以及对嵌套函数中闭包的应用能够更好的理解。

丰富的效果图的展示,能够帮助更好的去理解闭包这一概念。

希望能够帮助你更好的学习JavaScript 。

**-----**------**-----**---**** End **-----**--------**-----**-****

一篇文章带你了解JavaScript 函数闭包

往期精彩文章推荐:

一篇文章带你了解JavaScript 函数闭包

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】:https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
2年前
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript有函数作用域:这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域:它们只能在函数中访问。JS://codeherecann
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Jacquelyn38 Jacquelyn38
2年前
你不可不知的JS面试题(第三期)
1、什么是闭包?如图所示,闭包就是一个定义在函数内部的函数,其作用是将函数内部和函数外部连接起来。大家知道,作用域的问题,就是在函数内部定义的变量称为局部变量,外部取不到值。下面我们通过代码来更加详细地看一下:function A()       let x  1;       return function B()           c
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
小嫌 小嫌
2年前
Javascript中的变量提升
定义JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们。就好像是变量声明和函数声明被提升了代码的顶部一样。sayHi()//Hithere!functionsayHi()console.log('Hithere!')name'JohnDoe'console.log(name)//JohnDoevarn
菜园前端 菜园前端
1年前
为你解惑JS作用域和作用域链知识
原文链接:变量作用域一个变量的作用域(scope)是程序源代码中定义这个变量的区域。全局变量拥有全局作用域,在JavaScript代码中的任何地方都是可以访问的。然而在函数内声明的变量只能在函数体内访问,它们是局部变量,作用域是局部性的。函数参数也是局部变
Wesley13 Wesley13
2年前
JS 闭包(内存溢出与内存泄漏)(垃圾回收机制)
1.有关闭包定义闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量闭包的特性:函数内再嵌套函数内部函数可以引用外层的参数和变量参数和变量不会被垃圾回收机制回收
Stella981 Stella981
2年前
JavaScript函数——闭包
闭包概念只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁例子functionouter(){varlocalVal30;returnlocalVal;}
Stella981 Stella981
2年前
JavaScript 使用闭包保护变量 防止污染
使用JavaScript编写插件或团队协作时,可使用闭包来解决此类以下两个问题:1、定义过多全局变量,可能会造成全局变量命名冲突;2、在插件内定义变量,需要保护该变量不被轻易修改;优点:可以把局部变量驻留在内存中,可以避免使用全局变量;在调用过后不会被垃圾机制回收;缺点:避免滥用闭包,占用更多内存的缺点,用完要及时让垃圾回收器回收(fn