JavaScript 闭包浅析
词法作用域
词法作用域是指一个变量在源码中声明的位置作为它的作用域。
同时嵌套的函数可以访问到其外层作用域中声明的变量。
函数中的定义的局部变量只能由函数的内部成员访问,而函数中的內部成员可以访问外部元素。
例:
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 闭包浅析的更多相关文章
- 《Web 前端面试指南》1、JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- JavaScript闭包(Closure)
JavaScript闭包(Closure) 本文收集了多本书里对JavaScript闭包(Closure)的解释,或许会对理解闭包有一定帮助. <你不知道的JavsScript> Java ...
- Javascript闭包和C#匿名函数对比分析
C#中引入匿名函数,多少都是受到Javascript的闭包语法和面向函数编程语言的影响.人们发现,在表达式中直接编写函数代码是一种普遍存在的需求,这种语法将比那种必须在某个特定地方定义函数的方式灵活和 ...
- javascript闭包理解
//闭包理解一 function superFun(){ var _super_a='a'; function subfuc(){ console.log(_super_a); } return su ...
- Javascript闭包深入解析及实现方法
1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点:1. 作为一个函数变量的一个引用,当函数返回时 ...
- javascript闭包和作用域链
最近在学习前端知识,看到javascript闭包这里总是云里雾里.于是翻阅了好多资料记录下来本人对闭包的理解. 首先,什么是闭包?看了各位大牛的定义和描述各式各样,我个人认为最容易一种说法: 外部函数 ...
- JavaScript闭包深入解析
for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); } --上面这段 ...
- JavaScript 闭包系列二(匿名函数及函数的闭包)
一. 匿名函数 1. 函数的定义,可分为三种 1) 函数声明方式 function double(x) { return 2*x; } 2)Function构造函数,把参数列表和函数体都作为字 ...
随机推荐
- echarts配置环形饼图的参数,以及牵引线显示百分比,中间数据
最近项目有多处是用echarts的,有环形图,折线图,饼图,总结了一下. 本次主要讲环形图,折线图在下期. 这个是最终的效果图.下面附上代码 //三种占比 var myChartType = echa ...
- Spring Bean自动装配有哪些方式?
Spring 容器能够自动装配 Bean .也就是说,可以通过检查 BeanFactory 的内容让 Spring 自动解析 Bean 的协作者. 自动装配的不同模式: no - 这是默认设置,表示没 ...
- CSRF防护
CSRF防护 (待完善...)
- MySQL 8 复制
MySQL 8.0 支持的复制方法: 传统方法(基于二进制日志文件位置) 新方法(基于GTID) MySQL 8.0 支持的同步类型: 异步复制(内置) 同步复制(NDB集群) 半同步复制(半同步复制 ...
- CentOS7安装postgreSQL11
1.添加PostgreSQL Yum存储库 sudo yum install https://download.postgresql.org/pub/repos/yum/11/redhat/rhel- ...
- 网站SEO中服务器优化的三个问题
网站做好之后,站长第一件事就是想到去做SEO,但是有一些网站在做优化的时候,出现一些奇怪的情况,比如说优化已经不错的网站,排名突然就掉下来了:还有一些网站各项优化工作都是非常认真,但是排名却一直不上来 ...
- 如何在vue-cli中使用vuex(配置成功
前言 众所周知,vuex 是一个专为 vue.js 应用程序开发的状态管理模式,在构建一个中大型单页应用中使用vuex可以帮助我们更好地在组件外部管理状态.而vue-cli是vue的官方脚手架,它能帮 ...
- 数据结构(集合)学习之Queue
集合 框架关系图: Collection接口下面有三个子接口:List.Set.Queue.此篇是关于Queue<E>的简单学习总结. 补充:HashTable父类是Dictionary, ...
- React网络请求跨域代理设置
之前的之所以可以请求其他域名下的网络数据,是因为我们在服务端设置了相关配置,如下所示 如果将其注释掉,再次测试,如下所示 此时便无法跨域操作,接下来介绍下React如何实现跨域代理 (1)分析 Rea ...
- springboot web - 启动(4) tomcat
接第二篇 第二篇里面, 看到容器创建的是 AnnotationConfigServletWebServerApplicationContext 类型. 一 .类图 二. 构造 public Gener ...