文档章节

js闭包浅了解

达摩码者
 达摩码者
发布于 2015/04/08 21:57
字数 929
阅读 201
收藏 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
我所认识的JavaScript的闭包特性

闭包是一个比较抽象的概念,尤其是对js新手来说。在这里,我就我个人的理解j简单谈一下: 闭包:官方解释是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量...

longteng2013
2013/08/25
0
0
javascript深入理解js闭包

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

Yamazaki
2012/06/15
0
0
JavaScript 需要掌握的知识

1.不仅仅是面试,JavaScript 开发者都应该知道的十个概念(https://my.oschina.net/editorial-story/blog/1529543) 2. 深入理解javascript原型和闭包(完结)(http://www.cnblogs.com/wangfup...

IT追寻者
2016/06/25
0
0
从闭包函数的变量自增的角度 - 解析js垃圾回收机制

前言 感觉每一道都可以深入研究下去,单独写一篇文章,包括不限于闭包,原型链,从url输入到页面展示过程,页面优化,react和vue的价值等等。 代码实现 原理 因为times变量一直被引用,没有被...

燕儿199606
06/20
0
0
深入理解JavaScript闭包

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

柯楠
2012/11/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

高三暑假我是怎么想开去学linux系统的

高三的时候,我有一句口头禅:“老了老了,现在做题越来越迟钝了”。当时整天日夜苦读,体重日益增加,脸色越来越黯淡,我在终于熬过了高考的时候,简直心里面乐得开了花。我终于可以去做自己...

linuxprobe16
18分钟前
0
0
Python 获得命令行参数的方法

需要模块:sys 参数个数:len(sys.argv) 脚本名: sys.argv[0] 参数1: sys.argv[1] 参数2: sys.argv[2]

编程老陆
25分钟前
0
0
链队

队列用链表来表示时,需要用两个变量来记录队列两端的变化:theFront,theBack. 根据链接方向的不同,链队有两种链接方式(其实就是链表的头插入节点和尾插入节点,头删除节点和尾删除节点)。...

Frost729
29分钟前
0
0
IDEA toString() json模板

public java.lang.String toString() {java.lang.StringBuilder builder = new java.lang.StringBuilder();#set ($i = 0)#foreach ($member in $members)#if ($i == 0)builder.appen......

Mtok
38分钟前
0
0
Dubbo内核实现之SPI简单介绍

Dubbo采用微内核+插件体系,使得设计优雅,扩展性强。那所谓的微内核+插件体系是如何实现的呢!即我们定义了服务接口标准,让厂商去实现(如果不了解spi的请谷歌百度下), jdk通过ServiceLo...

明理萝
43分钟前
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部