Que's Blog

WebFrontEnd Development

0%

Javascript闭包作用

闭包是什么

个人觉得闭包其实是一个很抽象的概念,因为很难用一个词语特别清晰的表达这个概念。从当前个人知识体系讲,我以为闭包是Javascript特殊的变量作用域造成的一个特殊现象,它使得Javacript的函数内部可以访问到外部变量,但是外部变量却无法访问函数内部私有变量(使用var声明的变量),而闭包则是将内外部变量结合起来的一座桥梁。
MDN的定义是:闭包是指函数有自由独立的变量。换句话说,定义在闭包中的函数可以“记忆”它创建时候的环境。

闭包的作用

闭包有两个作用:

1. 使得在函数外部可以访问到原本访问不到的变量。
2. 闭包始终被存在内存中可以用来存储变量。

闭包场景

场景一 访问函数内部变量

code:

1
2
3
4
5
6
7
8
function getMyName(){
var myName = "Tom";
function returnMyName(){
return myName;
}
returnMyName();
}
console.log(getMyName()) //"Tom"

在这个场景下,由于子作用域可以访问到上级作用域,所以getMyName函数作为其内部函数returnMyName的上级作用域,其属性myName可以被returnMyName访问到。因此,虽然在getMyName外部虽然无法直接获取myName的值,但是通过闭包,却可以获取到其内部的属性。

场景二 存储变量

code:
JS:

1
2
3
4
5
6
7
function changeBg(color){
return function(color){
document.body.style.background = color;
}
}
var red = changeBg(red);
document.getElementById("red").onclick = red;

HTML:

1
<a href="" id="red"></a>

这里仅仅是一个改变背景为红色的按钮,但是也可以添加更多为其他颜色的按钮,这样,存储变量的目的就达到了。

总结一下

闭包是javascript特殊的变量作用域行为导致的,由此,javascript可以有更丰富的特性。
它本质上,是对函数作用域的深入应用。而这,就是编程基础的重要之所在。