文档章节

js闭包浅了解

达摩码者
 达摩码者
发布于 2015/04/08 21:57
字数 929
阅读 201
收藏 21
点赞 0
评论 4

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
WEB前端学习JavaScript知识点:说清楚深拷贝和浅拷贝的区别

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/28 ⋅ 0

WEB前端学习:BAT前端面试送命题—JS三座大山

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 06/06 ⋅ 0

JavaScript核心概念归纳整理

原文出处: 熊俊漉 JavaScript语言本身是一个庞大而复杂的知识体系,复杂程度不低于任何一门后端语言,本文针对JavaScript语言的核心概念进行简单的梳理,对应的每个知识点仅仅点到为止,不作...

音乐宇Code ⋅ 05/27 ⋅ 0

【译】【nodeschool】【scope-chains-closures】作用域

作用域链与闭包工作 作用域,作用域链,闭包以及垃圾回收它们有一个共同点:那就是它们通常都是手动执行的。闭包实际上是如何工作的?垃圾回收在什么时候发生?作用域链到底是什么? 通过这次...

小草先森 ⋅ 05/14 ⋅ 0

【前端工程师手册】JavaScript作用域拾遗

【前端工程师手册】JavaScript作用域拾遗 昨天总结了一些作用域的知识【前端工程师手册】JavaScript之作用域,但是发表完发现忘记了一些东西,今天拾个遗。 昨天说到了JavaScript中没有块级作...

推荐码发放 ⋅ 05/17 ⋅ 0

JavaScript 内存机制(前端同学进阶必备)

简介 每种编程语言都有它的内存管理机制,比如简单的C有低级的内存管理基元,像,。同样我们在学习JavaScript的时候,很有必要了解JavaScript的内存管理机制。 JavaScript的内存管理机制是:内...

梁音 ⋅ 06/01 ⋅ 0

四月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳 ⋅ 05/02 ⋅ 0

这一次,我们换种姿势学习 javascript

前言 《你不知道的 javascript》是一个前端学习必读的系列,让不求甚解的JavaScript开发者迎难而上,深入语言内部,弄清楚JavaScript每一个零部件的用途。本书介绍了该系列的两个主题:“作用...

程序员解决师 ⋅ 05/29 ⋅ 0

闭包详解二:JavaScript中的高阶函数

注:文章最末尾有个人公众号二维码,会分享更多技术文章等,敬请关注 本文讲解的高阶函数是之前讲解的闭包的续集,所以在学习高阶函数之前,一定要确保对闭包以及作用域的概念已经有了解: ...

lce_shou ⋅ 06/05 ⋅ 0

深入学习JavaScript函数

前言: 函数对于任何一门语言来说都是核心的概念,通过函数可以封装任意多条语句,而且可以在任何地方、任何时候调用执行。而JavaScript中最好的特性就是它对函数的实现。它几乎无所不能。但...

云中玉卷 ⋅ 05/02 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

关于“幂等”操作

一个幂等(idempotent)操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同. 开发中, 我们经常考虑幂等操作的场景有“接口调用”、“MQ消费”、“自动任务”等 接口调用, 可能出现...

零二一七 ⋅ 4分钟前 ⋅ 0

Dubbo服务服务暴露之ProxyFactory Invoker

Dubbo服务暴露过程中有涉及到调用ProxyFactory 中方法获取Invoker对象的过程,现在我们来深究下源码,来看下这个过程是在做些什么,返回的Invoker 对象是什么,我们来看一下代码的切入点: ...

哲别0 ⋅ 19分钟前 ⋅ 0

GP两种连接方式性能测试

GP两种连接方式性能测试 Pivotal import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; public class GPQueryStrin......

仔仔1993 ⋅ 23分钟前 ⋅ 0

jsonrpc-4j代码解析

解析文件 AutoJsonRpcServiceImplExporter JsonServiceExporter AutoJsonRpcServiceImplExporter 路径:com.googlecode.jsonrpc4j.spring.AutoJsonRpcServiceImplExporter AutoJsonRpcServi......

郭恩洲_OSC博客 ⋅ 45分钟前 ⋅ 0

百度搜索

from selenium import webdriver import time brower=webdriver.Firefox() brower.get('http://www.baidu.com') input=brower.find_element_by_id('kw') input.send_keys('中南大学') time.s......

南桥北木 ⋅ 52分钟前 ⋅ 0

tomcat 日志记录器

1、日志记录器是记录消息的组件 日志记录器需要与某个servlet 容器相关联 2、Logger 接口 共定义了5种日志级别:FATAL、ERROR、WARNING、INFORMATION、DEBUGGER setVerbosity 设置级别 setC...

职业搬砖20年 ⋅ 53分钟前 ⋅ 0

Thrift RPC实战(三) Thrift序列化机制

1.Thrift基础架构 Thrift是一个客户端和服务端的架构体系,数据通过socket传输; 具有自己内部定义的传输协议规范(TProtocol)和传输数据标准(TTransports); 通过IDL脚本对传输数据的数据结构...

lemonLove ⋅ 53分钟前 ⋅ 0

网站建设就要像2018世界杯的俄罗斯队大杀四方[图]

今天心情不错,因为昨天晚上观看了世界杯比赛,尤其是对俄罗斯队的大杀四方感到十分霸气侧漏啊,因此我联想到了自己的博客网站,我的博客是去年年底上线的,一直想建设一个关于读书和读后感作...

原创小博客 ⋅ 今天 ⋅ 0

linux 信号机制

signal(SIGPIPE, SIG_IGN); TCP是全双工的信道, 可以看作两条单工信道, TCP连接两端的两个端点各负责一条. 当对端调用close时, 虽然本意是关闭整个两条信道, 但本端只是收到FIN包. 按照TCP协...

xxdd ⋅ 今天 ⋅ 0

my.cnf, my-small.cnf, my-medium.cnf, my-large.cnf

1. my-small.cnf # Example MySQL config file for small systems.## This is for a system with little memory (<= 64M) where MySQL is only used# from time to time and it's importa......

周云台 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部