词法作用域

词法作用域是指一个变量在源码中声明的位置作为它的作用域。
同时嵌套的函数可以访问到其外层作用域中声明的变量。

函数中的定义的局部变量只能由函数的内部成员访问,而函数中的內部成员可以访问外部元素。

例:

     function main() {
// a 是 main 函数创建的局部变量
var a = 'aaa';
// b() 是函数内部方法,一个闭包
function b() {
alert(a); // 它使用了父函数声明的变量
}
b();
}
main();

main() 函数创建了本地变量 a 和函数 b()

b()是定义在 main() 内部的内部函数,因此只能在 main() 函数内被访问。 b()没有内部变量,但是由于内部函数可以访问外部函数的变量, b()可以访问 main() 中的变量 a

运行上述代码,我们可以看到 a 的值成功地打印出来。

闭包

概念

比较官方的解释:

一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

第一次看见这个就是一脸懵逼,理解过后可以用一个例子解释一下。

小明穿越了,去到了一个异世界,学习了一些个魔法,然后拯救了异世界,最后回到了地球世界。



异世界的故事虽然结束了,但是小明还会魔法,回到地球后就nb坏了,成为了地球上的大明星。



地球人现在也想学魔法,但是他们没法去异世界学,所以想学魔法只能通过小明。

这里,异世界就是一个函数,里面有魔法、故事、怪兽、知识;

异世界的魔法就是一个局部变量

小明也是一个函数,它会魔法,有知识,经历了这些故事。这时候小明就是一个闭包了。

作用

  • 作为一个函数变量的一个引用,当函数返回时,其处于激活状态。
  • 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。
  • 虽然相比较直接使用全局变量要复杂,但是更加安全稳定,同时避免污染全局变量环境。

用法

有两种思路

  • 声明一个全局变量,由函数内部元素调用 ( 不推荐,依旧污染全局变量 )
    var y;
function a() {
var x = "xxx";
y = function(){
return x;
}
return x;
}
a();
alert(y());
  • 直接返回一个闭包由外界变量接收
    function a() {
var x = "xxx";
return function () {
return x;
}
}
var b = a();
alert(b());

待续

JavaScript 闭包浅析的更多相关文章

  1. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  2. JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  3. JavaScript闭包(Closure)

    JavaScript闭包(Closure) 本文收集了多本书里对JavaScript闭包(Closure)的解释,或许会对理解闭包有一定帮助. <你不知道的JavsScript> Java ...

  4. Javascript闭包和C#匿名函数对比分析

    C#中引入匿名函数,多少都是受到Javascript的闭包语法和面向函数编程语言的影响.人们发现,在表达式中直接编写函数代码是一种普遍存在的需求,这种语法将比那种必须在某个特定地方定义函数的方式灵活和 ...

  5. javascript闭包理解

    //闭包理解一 function superFun(){ var _super_a='a'; function subfuc(){ console.log(_super_a); } return su ...

  6. Javascript闭包深入解析及实现方法

    1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点:1. 作为一个函数变量的一个引用,当函数返回时 ...

  7. javascript闭包和作用域链

    最近在学习前端知识,看到javascript闭包这里总是云里雾里.于是翻阅了好多资料记录下来本人对闭包的理解. 首先,什么是闭包?看了各位大牛的定义和描述各式各样,我个人认为最容易一种说法: 外部函数 ...

  8. JavaScript闭包深入解析

    for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); } --上面这段 ...

  9. JavaScript 闭包系列二(匿名函数及函数的闭包)

    一. 匿名函数 1. 函数的定义,可分为三种 1) 函数声明方式 function double(x) {     return 2*x; } 2)Function构造函数,把参数列表和函数体都作为字 ...

随机推荐

  1. echarts配置环形饼图的参数,以及牵引线显示百分比,中间数据

    最近项目有多处是用echarts的,有环形图,折线图,饼图,总结了一下. 本次主要讲环形图,折线图在下期. 这个是最终的效果图.下面附上代码 //三种占比 var myChartType = echa ...

  2. Spring Bean自动装配有哪些方式?

    Spring 容器能够自动装配 Bean .也就是说,可以通过检查 BeanFactory 的内容让 Spring 自动解析 Bean 的协作者. 自动装配的不同模式: no - 这是默认设置,表示没 ...

  3. CSRF防护

    CSRF防护 (待完善...)

  4. MySQL 8 复制

    MySQL 8.0 支持的复制方法: 传统方法(基于二进制日志文件位置) 新方法(基于GTID) MySQL 8.0 支持的同步类型: 异步复制(内置) 同步复制(NDB集群) 半同步复制(半同步复制 ...

  5. CentOS7安装postgreSQL11

    1.添加PostgreSQL Yum存储库 sudo yum install https://download.postgresql.org/pub/repos/yum/11/redhat/rhel- ...

  6. 网站SEO中服务器优化的三个问题

    网站做好之后,站长第一件事就是想到去做SEO,但是有一些网站在做优化的时候,出现一些奇怪的情况,比如说优化已经不错的网站,排名突然就掉下来了:还有一些网站各项优化工作都是非常认真,但是排名却一直不上来 ...

  7. 如何在vue-cli中使用vuex(配置成功

    前言 众所周知,vuex 是一个专为 vue.js 应用程序开发的状态管理模式,在构建一个中大型单页应用中使用vuex可以帮助我们更好地在组件外部管理状态.而vue-cli是vue的官方脚手架,它能帮 ...

  8. 数据结构(集合)学习之Queue

    集合 框架关系图: Collection接口下面有三个子接口:List.Set.Queue.此篇是关于Queue<E>的简单学习总结. 补充:HashTable父类是Dictionary, ...

  9. React网络请求跨域代理设置

    之前的之所以可以请求其他域名下的网络数据,是因为我们在服务端设置了相关配置,如下所示 如果将其注释掉,再次测试,如下所示 此时便无法跨域操作,接下来介绍下React如何实现跨域代理 (1)分析 Rea ...

  10. springboot web - 启动(4) tomcat

    接第二篇 第二篇里面, 看到容器创建的是 AnnotationConfigServletWebServerApplicationContext 类型. 一 .类图 二. 构造 public Gener ...