1、作用域

“javascript没有块级作用域”。所谓“块”,就是大括号“{}”中间的语句。例如if语句:

再比如for语句:

所以,我们在编写代码的时候,不要在“块”里面声明变量,要在代码的一开始就声明好了。以避免发生歧义。如:

在声明变量时,全局代码要在代码前端声明,函数中要在函数体一开始就声明好。除了这两个地方,其他地方都不要出现变量声明。

javascript除了全局作用域之外,只有函数可以创建作用域。

作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。

2、作用域和执行上下文

作用域只是一个“地盘”,一个抽象的概念,其中没有变量。要通过作用域对应的执行上下文环境来获取变量的值。同一个作用域下,不同的调用会产生不同的执行上下文环境,继而产生不同的变量的值。所以,作用域中变量的值是在执行过程中产生的确定的,而作用域却是在函数创建时就确定了。

所以,如果要查找一个作用域下某个变量的值,就需要找到这个作用域对应的执行上下文环境,再在其中寻找变量的值。

3、从【自由变量】到【作用域链】

在A作用域中使用的变量x,却没有在A作用域中声明(即在其他作用域中声明的),对于A作用域来说,x就是一个自由变量。如下图

在调用函数时,函数中的变量取值要到创建这个函数的那个作用域中取值——是“创建”,而不是“调用”,切记切记!!!

  • 总结一下取自由变量时的这个“作用域链”过程:(假设a是自由量)(重点记住)

第一步,现在当前作用域查找a,如果有则获取并结束。如果没有则继续;

第二步,如果当前作用域是全局作用域,则证明a未定义,结束;否则继续;

第三步,(不是全局作用域,那就是函数作用域)将创建该函数的作用域作为当前作用域;

第四步,跳转到第一步。

例如:在fn函数中,取自由变量x的值时,要到哪个作用域中取?——要到创建fn函数的那个作用域中取——无论fn函数将在哪里调用

4、真正的主角登场了:闭包

闭包的两种应用场景:函数作为返回值;函数作为参数传递!!!!!!!!

第一,函数作为返回值

如上代码,bar函数作为返回值,赋值给f1变量。执行f1(15)时,用到了fn作用域下的max变量的值。至于如何跨作用域取值,可以参考上一章。

第二,函数作为参数被传递

如上代码中,fn函数作为一个参数被传递进入另一个函数,赋值给f参数。执行f(15)时,max变量的取值是10,而不是100(因为fn创建作用域是全局作用域,而不是调用的匿名执行函数内)。

  • 带闭包的作用域和执行上下文的场景是:(最重要,一定要看明白)

第一步,代码执行前生成全局上下文环境,并在执行时对其中的变量进行赋值。此时全局上下文环境是活动状态。

第二步,执行第17行代码时,调用fn(),产生fn()执行上下文环境,压栈,并设置为活动状态。

第三步,执行完第17行,fn()调用完成。按理说应该销毁掉fn()的执行上下文环境,但是这里不能这么做。注意,重点来了:因为执行fn()时,返回的是一个函数。函数的特别之处在于可以创建一个独立的作用域。而正巧合的是,返回的这个函数体中,还有一个自由变量max要引用fn作用域下的fn()上下文环境中的max。因此,这个max不能被销毁,销毁了之后bar函数中的max就找不到值了。

因此,这里的fn()上下文环境不能被销毁,还依然存在与执行上下文栈中。

——即,执行到第18行时,全局上下文环境将变为活动状态,但是fn()上下文环境依然会在执行上下文栈中。另外,执行完第18行,全局上下文环境中的max被赋值为100。如下图:

第四步,执行到第20行,执行f1(15),即执行bar(15),创建bar(15)上下文环境,并将其设置为活动状态。

执行bar(15)时,max是自由变量,需要向创建bar函数的作用域中查找,找到了max的值为10。这个过程在作用域链一节已经讲过。

这里的重点就在于,创建bar函数是在执行fn()时创建的。fn()早就执行结束了,但是fn()执行上下文环境还存在与栈中,因此bar(15)时,max可以查找到。如果fn()上下文环境销毁了,那么max就找不到了。

使用闭包会增加内容开销,现在很明显了吧!

第五步,执行完20行就是上下文环境的销毁过程

【深入理解javascript】闭包的更多相关文章

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

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

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

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

  3. 【转】深入理解JavaScript闭包闭包(closure) (closure)

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

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

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

  5. 深入理解JavaScript闭包(closure)

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

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

    闭包(closure)是Javascript语言的一个难点.也是它的特色,非常多高级应用都要依靠闭包实现. 一.什么是闭包? 官方"的解释是:闭包是一个拥有很多变量和绑定了这些变量的环境的表 ...

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

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

  8. 深入理解Javascript闭包概念

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

  9. 轻松理解JavaScript闭包

    摘要 闭包机制是JavaScript的重点和难点,本文希望能帮助大家轻松的学习闭包 一.什么是闭包? 闭包就是可以访问另一个函数作用域中变量的函数. 下面列举出常见的闭包实现方式,以例子讲解闭包概念 ...

  10. 【译】理解JavaScript闭包——新手指南

    闭包是JavaScript中一个基本的概念,每个JavaScript开发者都应该知道和理解的.然而,很多新手JavaScript开发者对这个概念还是很困惑的. 正确理解闭包可以帮助你写出更好.更高效. ...

随机推荐

  1. leetCode练习题

    1.求二叉树的最小深度: public class Solution { public int run(TreeNode root) { if(root==null) return 0; int l ...

  2. Servlet基本用法(一)基本配置

    一.前言 Java Servlet是一个基于Java技术的Web组件,运行在服务器端,由Servlet容器所管理,用于生成动态的内容.Servlet是平台独立的Java类,编写一个Servlet实际上 ...

  3. iOS - UITabBarController中的坑

    当你创建一个继承与UITabBarController的子类 并想给其自定义构造方法 传一些值的时候这时候问题出现了: 在创建的时候里面的init方法回调用了 viewdidload,导致每次传值的时 ...

  4. 如何用微信小程序模仿豆瓣首页

    程序思路: 用微信自带组件swiper来实现轮播图 用豆瓣提供的api(这里使用的电影api)来获取最近的电影数据[豆瓣api地址] 获取数据用微信的request方法,只需要提供豆瓣api的url链 ...

  5. 利用按钮打开tabBar页面

    场景:当tabBar上有个人中心的时候,这里假设需要登陆才可以看到个人中心A页面,在A页面onload中先判断是否登陆,如果没有登陆就跳转到登陆页面B,待输入用户名和密码,点击登陆按钮后再跳转到A页面 ...

  6. wireshark和RawCap跟踪并解决中文乱码问题

    一.问题概述 说下程序的架构. 有个后台管理系统A,在页面修改数据后,会用httpClient发http请求给系统B: 系统B做了异步机制,收到A发的请求后,将数据封装为Mq消息发给RabbitMq, ...

  7. nginx upstream 实现负载均衡

    如果Nginx没有仅仅只能代理一台服务器的话,那它也不可能像今天这么火,Nginx可以配置代理多台服务器,当一台服务器宕机之后,仍能保持系统可用.具体配置过程如下: 1. 在http节点下,添加ups ...

  8. MYSQL的索引和常见函数

    MySQL的索引 索引机制 MySQL属于关系型数据库,为了提高查询速度,可以创建索引. 索引:由表中的一个或多个字段生成的键组成,这些键存储在数据结构(B树或者hash表中),于是又分为B树索引(I ...

  9. Implicit conversion from enumeration type 'enum CGImageAlphaInfo' to different enumeration type 'CGBitmapinfo' (aka) 'enum CGBitmapInfo')

    The constants for specifying the alpha channel information are declared with the CGImageAlphaInfo ty ...

  10. 使用zsh 替换 bash

    摘自:http://macshuo.com/?p=676#wechat_redirect Shell是Linux/Unix的一个外壳,你理解成衣服也行.它负责外界与Linux内核的交互,接收用户或其他 ...