文档章节

js闭包浅了解

达摩码者
 达摩码者
发布于 2015/04/08 21:57
字数 929
阅读 202
收藏 21

js闭包浅理解

要理解闭包,得先知道js的变量作用域,在js中,有两种变量作用域:

  • 全局作用域
  • 局部作用域

一、在函数内可以访问全局变量

比如,下面的例子:

<!--lang:js-->
<script>
    var n = 100;
    function f1(){
        console.log(n);
    }
    f1()//返回100
</script>

上面的例子很简单,下面是另一种情况。

二、在函数外无法读取函数内的局部变量

还是一个小例子:

<!--lang:js-->
<script>
function f1(){
    n = 100;
}
f1();
console.log(n);//返回100
</script>

咦?怎么回事,不是无法读取内部的局部变量吗?怎么可以再控制台输出??

这里有个注意的地方,在函数内定义局部变量,得用var进行声明,否则的话定义的还是全局变量!

<!--lang:js-->
<script>
function f1(){
    var n = 100;
}
f1();
console.log(n);//error
</script>

这些是不是也很容易理解?那么我们就继续讨论下去。上面说了,我们在函数外无法访问函数内的局部变量,那么,这就是绝对的吗?在函数外就永远不能获得函数内的局部变量了吗?

必然不是!

三、如何从函数外访问函数内的局部变量?

很多时候我们需要访问函数内的局部变量,当然用常规方式肯定不行,那么我们就得变通一下:

我么可以在函数内在定义一个函数,就像这样:

<!--lang:js-->
<script>
function f1(){
    n = 100;
    function f2(){
        console,log(n);
    }
}
</script>

那么在f1中的所有局部变量对于f2都是可见的,但是反过来f2中的局部变量却不让f1看到。这就是js特有的“链式作用域”结构。

那么,既然f2可以访问f1的内容,我们就让f2作为返回值,这样,我们不就可以在f1外部读取它的内部变量了吗?

那么,我们让f2访问f1,然后在返回f2,就像这样:

<!--lang:js-->
<script>
function f1(){
    var n = 100;
    function f2(){
        console.log(n);
    }
    return f2();
}
f1();
</script>

那么,这个f2函数,就是闭包!

需要注意的是:如果f2是个匿名函数,我们调用的时候需要用两个括号!,这样:

<!--lang:js-->
<script>
function f1(){
    n = 100;
    return function(){
        console.log(n);
    }
}
</script>
f1()();

也比较容易理解,第一个括号读取f1,返回里面的匿名函数,第二个括号就是执行这个函数。

四、闭包

各种资料对于闭包的理解很抽象,从我们的实例来看,闭包就是一个能访问其他函数内部变量的函数!

大家可以以上面的函数f2作为参考分析一下,我们通过正常的方法无法从外部获取f1中的局部变量n,但是f1内部的函数f2便可以访问f1的局部变量n,因为对于f2来说,f1是父辈,就像基因遗传一样,在f2中,可以顺着这个纽带向上去找f1中的变量,这样,f2读取了f1的变量后,我们将f2返回,我们在外部调用f1的时候,返回的是f2,而f2可以读取f1中的变量。

好吧,上面一大段确实很绕,不过,就我自己来看,还是有了一丝清晰的脉络。

因为只有在一个函数内部的函数才可以读取其变量,那么闭包也可以这么理解:

闭包就是定义在一个函数内的函数。

五、其他

关于js闭包的其他知识点,等我巩固好了,在做笔记吧。

内容整理自

© 著作权归作者所有

共有 人打赏支持
达摩码者
粉丝 4
博文 12
码字总数 6735
作品 0
海淀
前端工程师
私信 提问
加载中

评论(4)

达摩码者
达摩码者

引用来自“猪也有理想”的评论

纯操作性,而不知闭包原理
是啊,所以叫浅了解,刚开始系统的学习
猪也有理想
猪也有理想
纯操作性,而不知闭包原理
达摩码者
达摩码者

引用来自“弹一曲Happy颂”的评论

简单明了,分享79
谢谢
中成才
中成才
简单明了,分享79
记一次前端大厂面试 | 掘金技术征文

前言 最近参加了几家杭州大厂的面试,顺利的拿到了自己心仪的offer,积累了一些高频面试题,记录给有需要的同学们。我把面试题归纳整理分为两类,一种是基础试题: 主要考察前端技基础是否扎实...

程序员解决师
09/11
0
0
javascript深入理解js闭包

一、变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种:全局变量和局部变量。 Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量...

Yamazaki
2012/06/15
0
0
理解 Javascript 的闭包

前言:还是一篇入门文章。Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将以例子入手来介绍...

虫虫
2012/03/07
12.7K
30
通过示例学习Javascript闭包

译者按: 在上一篇博客,我们通过实现一个计数器,了解了如何使用闭包(Closure),这篇博客将提供一些代码示例,帮助大家理解闭包。 原文: JavaScript Closures for Dummies 译者: Fundebug 为...

Fundebug
11/21
0
0
关于javascript的学习

本人在北京一直在做PHP这块的编程开发。兴趣点比较喜欢javascript。只是目前的javascript还未达到一定的经验。目前的大概水平是,熟练使用jquery等框架。对于js的执行环境、作用域、闭包等都...

随风随影
2012/12/04
173
4

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud Stream消费失败后的处理策略(二):自定义错误处理逻辑

应用场景 上一篇《Spring Cloud Stream消费失败后的处理策略(一):自动重试》介绍了默认就会生效的消息重试功能。对于一些因环境原因、网络抖动等不稳定因素引发的问题可以起到比较好的作用...

程序猿DD
19分钟前
1
0
Java 使用 pinyin4j 生成汉字拼音

添加 pinyin4j jar包 <dependency> <groupId>com.belerweb</groupId> <artifactId>pinyin4j</artifactId> <version>2.5.0</version> ......

yh32
31分钟前
3
0
Deepin 安装wireshark抓包工具

一、关于deepin和wireshark deepin目前已经发展到15.8了,开发Android毫无压力,在四个月的使用时间里,已经非常习惯了。目前想处理一些网络问题,因此尝试在deepin上安装一个抓包工具。dee...

IamOkay
今天
6
0
Docker镜像仓库服务-Nexus

建立云原生集群系统,建立自己的私有Docker镜像仓库必不可少。一方面可以加快多节点部署容器镜像的下载速度,另一方面是为了安全(容器里存储有系统所有的信息、包括密码、数据库等等,切记不...

openthings
今天
6
0
127.0.0.1 和 0.0.0.0 地址的区别

1. IP地址分类 1.1 IP地址表示 IP地址由两个部分组成,net-id和host-id,即网络号和主机号。 net-id:表示ip地址所在的网络号。 host-id:表示ip地址所在网络中的某个主机号码。 即: IP-a...

华山猛男
今天
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部