文档章节

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
记一次前端大厂面试 | 掘金技术征文

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

程序员解决师
09/11
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
我所认识的JavaScript的闭包特性

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

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

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

Yamazaki
2012/06/15
0
0
从闭包函数的变量自增的角度 - 解析js垃圾回收机制

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

燕儿199606
06/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7防火墙firewalld操作

firewalld Linux上新用的防火墙软件,跟iptables差不多的工具。 firewall-cmd 是 firewalld 的字符界面管理工具,firewalld是CentOS7的一大特性,最大的好处有两个:支持动态更新,不用重启服...

dingdayu
今天
1
0
关于组件化的最初步

一个工程可能会有多个版本,有国际版、国内版、还有针对各种不同的渠道化的打包版本、这个属于我们日常经常见到的打包差异化版本需求。 而对于工程的开发,比如以前的公司,分成了有三大块业...

DannyCoder
今天
2
0
Spring的Resttemplate发送带header的post请求

private HttpHeaders getJsonHeader() { HttpHeaders headers = new HttpHeaders(); MediaType type = MediaType.parseMediaType("application/json; charset=UTF-8"); ......

qiang123
昨天
3
0
Spring Cloud Gateway 之 Only one connection receive subscriber allowed

都说Spring Cloud Gateway好,我也来试试,可是配置了总是报下面这个错误: java.lang.IllegalStateException: Only one connection receive subscriber allowed. 困扰了我几天的问题,原来...

ThinkGem
昨天
26
0
学习设计模式——观察者模式

1. 认识观察者模式 1. 定义:定义对象之间一种一对多的依赖关系,当一个对象状态发生变化时,依赖该对象的其他对象都会得到通知并进行相应的变化。 2. 组织结构: Subject:目标对象类,会被...

江左煤郎
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部