作用域链

  在某个作用域访问某个变量或者函数时,会首先在自己的局部环境作用域中搜寻变量或者函数,如果本地局部环境作用域中有该变量或者函数,则就直接使用找到的这个变量值或者函数;如果本地局部环境作用域中没有搜寻到要使用的变量或者函数名,那么就会在上一层的环境作用域中继续寻找,如果在上一层环境作用域中寻找到要使用的变量或者函数名,那么就使用上一层环境作用域中的变量或者函数名;否则,如果在上一层仍旧没有找到要使用的变量名或者函数名,就会继续找上一层的上一层作用域,以此类推,直到进入到全局环境中,如果都没有找到的话,那么就认为是undefined(未声明、未定义)。

  换句话说,如果在局部环境中没有找到变量或者函数,就在上一层寻找,知道找到为止,最终都没找到的话,就是undefined。

闭包

  先看下面一个例子:

function demo(){
var name="abc";
}
console.log(name);//undefined

  上面的代码很好理解,定义在demo函数内部的name变量,在外部是访问不到的。

  你可能会说,都没有调用demo(),怎么可能得到name变量的值,如你所愿:

function demo(){
var name="abc";
}
demo();
console.log(name);//undefined

  事实上,即使调用了demo()函数之后,name变量在函数外部也是访问不到的。

  但是有很多种方法可以让外部可以访问name变量。

方法1:将name声明为全局变量

function demo(){
name="abc";
}
demo();
console.log(name);//abc
console.log(window.name);//abc

  name声明为全局变量之后,也就是成为window对象的一个属性而已。

  这个方法最好不要使用,不然会造成环境中太多的全局变量,一旦有重复声明,那么就会造成重复声明之前的那些变量值改变,导致错误。

方法2:将name变量在函数中返回

function demo(){
var name="abc";
return name;
}
console.log(demo());

  这种方式很常用,因为很符合一般人的思维。

方法3:使用闭包

function demo(){
var name="abc";
return function(){
return name;
}
}
var test = demo();
console.log(test());//abc

  

闭包的概念

  网上有很多中关于闭包的说法,我觉得其中有一种特别好理解:

闭包就是在一个函数中又定义了一个函数,内部函数可以访问到外部函数作用域内的变量,此时,定义的这个内部函数就叫做闭包。

并且,无论内部函数在哪里调用,都能访问到外部函数作用域中的变量。

  看上面那个方法3中的demo函数,内部定义了一个函数,内部函数访问外部函数(demo)作用域中的name变量,内部函数称为闭包。

为什么要使用闭包

function demo(){
var name="abc";
return name;
}
console.log(demo());

  就以上面的例子而言,如果想要获取demo函数中的name值,那么就需要调用一下demo函数,虽然在调用函数之后,可以获取内部的name值,但是函数调用结束,其中的name变量就已经在内存中被销毁了。

  闭包就可以解决这个问题,使用闭包的话,在调用外部函数之后,外部函数的变量并不会立即销毁,而会一直保存。所以使用闭包有可能会引起内存占用大的情况。

题外话

  请看下面的代码:

var i = 10
(function(x){
console.log(x)
})(i)
//输出10

  上面的代码看着的确很别扭,可以简化一下:

i = 10;
var demo = function(x){
console.log(x)
}
demo(i)

  没错,其实就是利用的匿名函数赋值给变量,然后利用变量加圆括号来调用函数。

i = 10;
(function(x){//x是定义的形参
console.log(x)
})(i) //i是传递给函数的实参

  

  可以看一下这种用法的示例:

function demo(){
var funcArr = new Array();//funArr是保存函数的数组
for(var i=0;i<10;i++){
funcArr[i] = function(){
console.log(i) //每次调用函数的时候,打印i值
}
}
return funcArr; //返回保存函数的数组
}
var func = demo();
func[1]() //10
func[2]() //10

  上面的代码并没有按照想象中运行,并没有func[1]()输出1,func[2]()输出2

  这是因为JavaScript没有块级作用域的原因,解决方法就可以利用上面的用法:

function demo(){
var funcArr = new Array();//funArr是保存函数的数组
for(var i=0;i<10;i++){
funcArr[i] = (function(x){
return function(){
console.log(x) //每次调用函数的时候,打印x值,x是形参,i才是实参
}
})(i)
}
return funcArr; //返回保存函数的数组
}
var func = demo();
func[1]() //1
func[2]() //2

  

  闭包使用最多的场景接收:保存环境变量,将返回的函数中要使用的某些现场变量,防止返回的函数的某些参数受到外界影响。

JavaScript 作用域链与闭包的更多相关文章

  1. 个人理解的javascript作用域链与闭包

    闭包引入的前提个人理解是为从外部读取局部变量,正常情况下,这是办不到的.简单的闭包举例如下: function f1(){ n=100; function f2(){ alert(n); } retu ...

  2. 深入javascript作用域链到闭包

    我之前用过闭包,用过this,虽然很多时候知道是这么一回事,但是确实理解上还不够深入.再一次看javascript高级程序设计这本书时,发现一起很多疑难问题竟然都懂了,所以总结一下一些理解,难免有错, ...

  3. javascript 作用域链及闭包,AO,VO,执行环境

    下面的文章内容会根据理解程度不断修正. js变量作用域: 定义:变量在它申明的函数体以及函数体内嵌套的任意函数体内有定义. function AA(){ var bb='我是AA内部变量'; func ...

  4. JavaScript作用域链与闭包的理解

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域 链的工作原理. 1. 全局作用域(Global Scope) (1)最外层函数和 ...

  5. 【进阶2-2期】JavaScript深入之从作用域链理解闭包(转)

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记   https://github.com/yygmind/blog/issues/18 红宝书(p178)上对于闭包的定义:闭包是指有权访问另外一 ...

  6. 《浏览器工作原理与实践》<10>作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?

    在上一篇文章中我们讲到了什么是作用域,以及 ES6 是如何通过变量环境和词法环境来同时支持变量提升和块级作用域,在最后我们也提到了如何通过词法环境和变量环境来查找变量,这其中就涉及到作用域链的概念. ...

  7. 在chrome开发者工具中观察函数调用栈、作用域链与闭包

    在chrome开发者工具中观察函数调用栈.作用域链与闭包 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量 ...

  8. 在chrome开发者工具中观察函数调用栈、作用域链、闭包

    在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象,闭包,this等关键信息的变化.因此,断点调试对于快 ...

  9. JS详细图解作用域链与闭包

    JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...

随机推荐

  1. 快速对Mysql添加索引的五个方法

    1.添加PRIMARY KEY(主键索引) mysql>ALTER TABLE `table_name` ADD PRIMARY KEY ( `column` ) 2.添加UNIQUE(唯一索引 ...

  2. 离线安装Cloudera Manager 5和CDH5(最新版5.9.3) 完全教程(六)CM的安装

    一.角色分配 Cloudera Manager Agent:向server端报告当前机器服务状态. Cloudera Manager Server:接受agent角色报告服务状态,以视图界面展现,方便 ...

  3. Blinker 后台数据分析

    如何解析出后台服务器认证信息,供自己的设备连接. 测试程序 天气 增加了 Debug输出信息功能 1手机APP添加控件信息   2硬件烧录程序 #define BLINKER_PRINT Serial ...

  4. 在 Virtual Box 安装 Mac Os 并安装 Qt 开发应用

    导读 由于 Beslyric-for-X 项目开发需要,开始尝试在 Mac Os 下开发 Qt 应用.尝试成功后,记录于此,希望对有类似需求的人有所帮助. 本文以开发 Beslyric-for-X 为 ...

  5. 零基础入门到精通:Python大数据与机器学习之Pandas-数据操作

    在这里还是要推荐下我自己建的Python开发学习群:483546416,群里都是学Python开发的,如果你正在学习Python ,小编欢迎你加入,大家都是软件开发党,不定期分享干货(只有Python ...

  6. 人生苦短之学习Python50本书籍(包涵基础、算法、机器学习、模块、爬虫框架、树莓派等)总有你想要的书籍

    很多小伙伴说想学习想学习但是没有学习书籍,我给大家分享一大波学习书籍,具体的可以自己往下翻 ​<"笨办法学"Python3> Zed Shaw 著 (2018年5月) ...

  7. 画线函数Glib_Line算法的研究

      在这里首先先简单把我对函数的功能的理解阐述一下,方便后面的分析:Glib_Line函数实现的功能是通过参数给定(x1,y1,x2,y2,color),来确定起点(x1,y1)和终点(x2,y2)两 ...

  8. TCP/IP协议--TCP的超时和重传

    TCP是可靠传输.可靠之一体现在收到数据后,返回去一个确认.但是不能完全避免的是,数据和确认都可能丢失.解决这个办法就是,提供一个发送的重传定时器:如果定时器溢出时还没收到确认,它就重传这个报文段. ...

  9. Django学习篇(web框架的由来)

    Python的WEB框架有 Django.Tornado.Flask 等多种 ,Django相较与其他WEB框架其优势为: 大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多 ...

  10. windows服务中对外提供API接口

    public class SendMqService { private static bool isExcute = true; private static HttpListener listen ...