最简单的例子理解Javascript闭包
理解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闭包的更多相关文章
- 我从来不理解JavaScript闭包,直到有人这样向我解释它...
摘要: 理解JS闭包. 原文:我从来不理解JavaScript闭包,直到有人这样向我解释它... 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正如标题所述,JavaScript闭包 ...
- 深入理解JavaScript——闭包
跟很多新手一样我也是初入前端,对闭包的理解花费的时间和精力相当的多.效果也还行,今天我就来根据自己的理解细致的讲一讲闭包,由于是初入学习的时候不免有一些弯路和困惑,我想信这也是很多跟我一样的人会同样遇 ...
- 深入理解JavaScript闭包【译】
在<高级程序设计>中,对于闭包一直没有很好的解释,在stackoverflow上翻出了一篇很老的<JavaScript closure for dummies>(2016)~ ...
- 深入理解javascript闭包(一)
原文转自脚本之家(http://www.jb51.net/article/24101.htm) 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...
- 我从来不理解 JavaScript 闭包,直到有人这样向我解释它...
正如标题所述,JavaScript 闭包对我来说一直有点神秘,看过很多闭包的文章,在工作使用过闭包,有时甚至在项目中使用闭包,但我确实是这是在使用闭包的知识. 最近看国外的一些文章,终于,有人用于一种 ...
- 理解 JavaScript 闭包
这是本系列的第 4 篇文章. 作为 JS 初学者,第一次接触闭包的概念是因为写出了类似下面的代码: for (var i = 0; i < helpText.length; i++) { var ...
- 【转】深入理解JavaScript闭包闭包(closure) (closure)
一.什么是闭包?"官方"的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述 ...
- 全面理解Javascript闭包和闭包的几种写法及用途
好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一些实用的东西,主要将闭包的写法.用法和用途. 一.什么 ...
- 深入理解JavaScript闭包(closure)
最近在网上查阅了不少javascript闭包(closure)相关的资料,写的大多是非常的学术和专业.对于初学者来说别说理解闭包了,就连文字叙述都很难看懂.撰写此文的目的就是用最通俗的文字揭开Java ...
随机推荐
- IntelliJ IDEA 中安装junit插件
1.在Intellij IDEA 中安装了 Junit,TestNG插件,首先检查一下intellij IDEA 是否在安装时默认安装了这两个插件,检查方法 打开 settings -->Plu ...
- 重温CSS之文档结构
我们来看看几个基本的HTML页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 转:CSS定位属性详解
转载:https://juejin.im/post/5a1bb35ff265da43231ab164 这篇文章对css的绝对定位和相对定位有详细的解释
- js replace,正则截取字符串内容
1.js replace替换,使用 http://www.jb51.net/article/43949.htm 顺便记录一下 e.g. js获取sql中的可替换参数$id,$name."SE ...
- 跟据经纬度实现附近搜索Java实现
现在很多手机软件都用附近搜索功能,但具体是怎么实现的呢>在网上查了很多资料,mysql空间数据库.矩形算法.geohash我都用过了,当数据上了百万之后mysql空间数据库方法是最强最精确的(查 ...
- .NetCore 中使用AppMetrics向InfluxDB中添加监控数据并通过Grafana图像分析
考虑到分布式部署监控环境是所有的请求情况,所以这一块一般在网关GateWay里面加比较省事,聚合在一起的,如果放在api服务中,如果只有1个还好,一旦部署Node多是很痛苦的事情 这天需要添加的Nug ...
- 动态SQL与模糊查询
一: 1.需求 实现多条件查询用户(姓名模糊查询,年龄在指定的最小值与最大值之间) 2.结构目录 3.准备数据与建表 CREATE TABLE d_user( id int PRIMARY KEY A ...
- jQuery-Selectors(选择器)的使用(二、层次篇)(转载)
原文:http://www.cnblogs.com/bynet/archive/2009/12/01/1614405.html 本系列文章导航 jQuery-Selectors(选择器)的使用(一.基 ...
- BZOJ.3624.[APIO2008]免费道路(Kruskal)
题目链接 我们发现有些白边是必须加的,有些是多余的. 那么我们先把所有黑边加进去,然后把必须要加的白边找出来. 然后Kruskal,把必须要加的白边先加进去,小于K的话再加能加的白边.然后加黑边. 要 ...
- 【COGS-2638】数列操作ψ 线段树
题目链接: http://cogs.pro/cogs/problem/problem.php?pid=2638 Solution 用jry推荐的写法即可做到单次$O(log^{2}N)$,不过随机数据 ...