最简单的例子理解Javascript闭包

时间:2022-04-15 00:17:31

理解Javascript的闭包非常关键,本篇试图用最简单的例子理解此概念。

function greet(sth){
return function(name){
console.log(sth + ' ' + name);
}
} //hi darren
greet('hi')('darren');

或者可以写成这样:

var sayHi = greet('hi');
sayHi('darren');

我们要提的问题是:为什么greet的内部函数能使用sth这个变量?

其内部大致运作如下:

→ 创建全局上下文

→ 执行var sayHi = greet('hi');语句,创建greet上下文,变量sth存储在greet上下文中。

→ 继续执行greet函数内的语句,返回一个匿名函数,虽然greet上下文从堆栈上消失,但sth变量依旧存在于内存的某个空间。

→ 继续执行sayHi('darren');创建了sayHi上下文,并试图搜寻sth变量,但在sayHi这个上下文中没有sth变量。sayHi上下文会沿着一个作用域链找到sth变量对应的那个内存。 外层函数就像一个闭包,其内部函数可以使用外部函数的变量。

一个闭包的简单例子

function buildFunctions(){
var funcArr = []; for(var i = 0; i < 3; i++){
funcArr.push(function(){console.log(i)});
} return funcArr;
} var fs = buildFunctions();
fs[0](); //
fs[1](); //
fs[2](); //

以上,为什么结果不是0, 1, 2呢?

--因为i作为一个闭包变量,当前值为3,被内部函数使用。要实现想要的效果,可以在遍历的时候每一次遍历创建一个独立的上下文使其不受闭包影响。而自触发函数可以实现独立上下文。

function buildFunctions(){
var funcArr = []; for(var i = 0; i < 3; i++){
funcArr.push((function(j){
return function(){
console.log(j);
};
}(i)));
} return funcArr;
} var fs = buildFunctions();
fs[0](); //
fs[1](); //
fs[2](); //

本篇的两个例子正好体现了闭包的2个方面:一个是内部函数使用闭包变量,另一个是把内部函数写在自触发函数中从而避免受闭包影响。

最简单的例子理解Javascript闭包的更多相关文章

  1. 我从来不理解JavaScript闭包,直到有人这样向我解释它&period;&period;&period;

    摘要: 理解JS闭包. 原文:我从来不理解JavaScript闭包,直到有人这样向我解释它... 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正如标题所述,JavaScript闭包 ...

  2. 深入理解JavaScript——闭包

    跟很多新手一样我也是初入前端,对闭包的理解花费的时间和精力相当的多.效果也还行,今天我就来根据自己的理解细致的讲一讲闭包,由于是初入学习的时候不免有一些弯路和困惑,我想信这也是很多跟我一样的人会同样遇 ...

  3. 深入理解JavaScript闭包【译】

    在<高级程序设计>中,对于闭包一直没有很好的解释,在*上翻出了一篇很老的<JavaScript closure for dummies>(2016)~ ...

  4. 深入理解javascript闭包(一)

    原文转自脚本之家(http://www.jb51.net/article/24101.htm) 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...

  5. 我从来不理解 JavaScript 闭包,直到有人这样向我解释它&period;&period;&period;

    正如标题所述,JavaScript 闭包对我来说一直有点神秘,看过很多闭包的文章,在工作使用过闭包,有时甚至在项目中使用闭包,但我确实是这是在使用闭包的知识. 最近看国外的一些文章,终于,有人用于一种 ...

  6. 理解 JavaScript 闭包

    这是本系列的第 4 篇文章. 作为 JS 初学者,第一次接触闭包的概念是因为写出了类似下面的代码: for (var i = 0; i < helpText.length; i++) { var ...

  7. 【转】深入理解JavaScript闭包闭包&lpar;closure&rpar; &lpar;closure&rpar;

    一.什么是闭包?"官方"的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述 ...

  8. 全面理解Javascript闭包和闭包的几种写法及用途

    好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一些实用的东西,主要将闭包的写法.用法和用途.  一.什么 ...

  9. 深入理解JavaScript闭包&lpar;closure&rpar;

    最近在网上查阅了不少javascript闭包(closure)相关的资料,写的大多是非常的学术和专业.对于初学者来说别说理解闭包了,就连文字叙述都很难看懂.撰写此文的目的就是用最通俗的文字揭开Java ...

随机推荐

  1. 走进AngularJs&lpar;六&rpar; 服务

    今天学习了一下ng的service机制,作为ng的基本知识之一,有必要做一个了解,在此做个笔记记录一下. 一.认识服务(service) 服务这个概念其实并不陌生,在其他语言中如java便有这样的概念 ...

  2. Android按需添加Google Play服务

    以前无论使用何种Google Play服务,都是直接在gradle文件中引用一个库. compile 'com.google.android.gms:play-services:9.4.0' 这直接导 ...

  3. DataGridView隐藏列用CSS实现

    隐藏DataGridView某一列,用CSS控制 CSS Code: .hidden{ display:none;} c# Code: <asp:BoundField DataField=&qu ...

  4. eclipse-统计代码行数

    使用Eclipse可以方便的统计工程或文件的代码行数,方法如下: 1.点击要统计的项目或许文件夹,在菜单栏点击Search,然后点击File...  2.选中正则表达式(Regular express ...

  5. 大四实习准备3&lowbar;java多线程

    4.25.27无耻地懒散了.....26号陪女朋友去了.今天28号,继续加油! 2015-4-28 Java 多线程 (java中类不能多继承,可以多层继承:接口则都可以) 定义和创建: 方法一:继承 ...

  6. Entity Framework 学习高级篇1—改善EF代码的方法(上)

    本节,我们将介绍一些改善EF代码的相关方法,如NoTracking,GetObjectByKey, Include等. l         MergeOption.NoTracking 当我们只需要读 ...

  7. C&plus;&plus;之IO操作

    可参考自: C++之标准设备IO操作流 C++之预定义类型IO格式控制 C++之文件IO操作流

  8. oracle 游标简单示例

    1.游标的概念以及作用 游标(Cursor)可以使用户想操作数组一样对查询出来的结果集进行操作,可以形象的看做一个变动的光标,其实际行是一个指针,它在一段Oracle存放数据查询结果集或数据 操作集的 ...

  9. SpringBoot的打包失败

    打包是根据pom.xml文件来打的包. 如果使用Maven的默认打包,只会将src/main下的java和resources里面的内容打进Jar包中. 通过maven-assembly-plugin这 ...

  10. logger&period;debug的用处

    原文:https://www.cnblogs.com/xiangkejin/p/6426761.html logger.debug的用处 简单的说,就是配合log的等级过滤输出 根据你log4j的配置 ...