JavaScript作用域闭包简述

作用域

  技术一般水平有限,有什么错的地方,望大家指正。

  作用域就是变量起作用的范围。作用域包括全局作用域,函数作用域以块级作用域,ES6中的let和const可以形成块级作用域。

  除了块级作用域,在函数外面声明的变量可以在任何一个地方被访问到,这些变量的作用域都是全局作用域,全局作用域中的变量可以再任何一个地方使用:

var a = "zt";
function fn1(){
console.log(a);
}
function fn2(){
console.log(a);
}
fn1();
fn2();

  在函数里面声明的变量只能在当前函数内使用,这些变量的作用域我们称为函数作用域,只在当前函数内有效:

function fn1(){
var a = "zt";
console.log(a);
}
function fn2(){
console.log(a)
}
fn1();
fn2();//报错提示a没有定义

  函数内定义的变量只在当前函数内有效,在函数以外的地方是不能被访问到的,fn2函数内没有定义a,全局作用域中也没有a使用一个不存在的变量所以报错。

作用域链

  作用域是可以嵌套的比如在全局作用域里面创建一个函数,函数里面可以在创建一个函数,这样就发生了作用域的嵌套,作用域链可以把作用域链接起来。当使用一个变量的时候,会优先在当前作用域内去寻找变量,如果当前作用域内不存在就会去上层作用域去寻找一直到全局作用域,如果还不能找到变量就会报错。  

var a = "global";
function fn1(){
console.log(a);
}
fn1();

作用域是静态的

  我们先看一个例子:

  var flag = "outer";
function demo(){
var flag = "inner";
function inner(){
console.log(flag);
}
return inner;
}
var fn = demo();
fn();//inner
  var flag = "outer";
function demo(){
var flag = "inner";
fn();
}
function fn(){
console.log(flag);
}
demo();//outer

  通过这两个例子我们可以看出函数的作用域是静态的,一个函数不管在哪被调用,它的作用域都是声明时的作用域。函数的作用域在声明时就已经被创建,在调用函数时会去访问他已经创建的作用域。

闭包

  闭包在MDN中的定义为:闭包是指那些可以访问独立变量的函数,所以在定义上我们可以把所有的函数都看做是闭包。闭包即密闭的空间,我们可以很自然的想到函数,因为函数就会生成一个密闭的空间,如果函数想称为一个闭包只需要在使用一个外部变量即可(使用外部变量的函数就是闭包)。通过闭包可以给我们带来一些便利,就是可以在高等级的作用域使用低等级作用域中的变量:

  function demo(){
var flag = "test";
return function(){
console.log(flag);
}
}
demo()();

  我们把demo函数里面的函数通过return使其可以在外部使用,我们已经说过作用域都是静态的,这样我们在外部使用return的函数时,就可以看到我们在全局作用域中调用函数最后输出了demo函数里面的"test"。

  这样我们可以做一些更有意义的事:

  var data = [];
function demo(){
var data = [];
return{
add:function(a){
data.push(a);
},
print:function(){
console.log(data);
}
}
}
var tool = demo();
tool.add(1);
tool.add(2);
tool.add(3);
tool.print();//[1, 2, 3]

  我们可以利用demo函数里面的data来存储我们的信息而且不用担心它被破坏(demo里面的data被私有化),而且我们也可以在外部在声明一个同名的data来存储别的信息,这两个不会产生任何冲突。

  闭包也可以帮我们解决一些小问题:

  for(var i=0;i<4;i++){
setTimeout(function(){
console.log(i);
});
}

  我们预期的结果是打印当前循环的i值结果输出全是4。先解释一下出现这么情况的原因:JS是一种单线程的语言,而setTimeout是异步的,只有当我们的代码执行完成以后setTimeout的处理函数才会执行,而执行的时候i的值已经是4了所以最终的输出全是4。

  我们可以通过闭包来解决这一问题:

  for(var i=0;i<4;i++){
(function(i){
setTimeout(function(){
console.log(i)
})
}(i))
}

  闭包可以形成一个独立的作用域这样每次循环都会有一个独立的函数作用域,循环完成后虽然i的值仍然是4但是setTimeout的处理函数在寻找i的时候会优先找到作为参数的i,而每一个参数i都表示当次循环的i,利用闭包我们可以完美的解决这种问题。

  在我们实际开发的过程中,遇到这种情况我们就可以通过闭包来解决,我们所说的"这种情况"通常有三个特点:

  1.首先有一个循环

  2.循环里面会创建函数,并且函数是延后执行的

  3.这些延后执行的函数会使用一个共同的变量,并且这个共同的变量和当前的循环值有关系

  我们按照这个规律套一下上面的代码:

  循环有了,每次循环也会生成一个函数,这些函数也都是在循环完成后才能执行,而且每一个函数都使用共同的i,而i就是当前的循环值,正好符合我们的三个特点。我们通过(function(){}())这种方式(匿名函数自执行)来形成一个闭包达到我们预期的目的。

  更深层次的了解,可以在网上查阅相关资料。

转载自网络

JavaScript作用域闭包简述的更多相关文章

  1. javascript作用域(Scope),简述上下文(context)和作用域的定义

    网页制作Webjx文章简介:这篇文章将正面解决这个问题:简述上下文(context)和作用域的定义,分析可以让我们掌控上下文的两种方法,最后深入一种高效的方案,它能有效解决我所碰到的90%的问题. 作 ...

  2. JavaScript作用域闭包(你不知道的JavaScript)

    JavaScript闭包.是JS开发project师必须深入了解的知识. 3月份自己曾撰写博客<JavaScript闭包>.博客中仅仅是简单阐述了闭包的工作过程和列举了几个演示样例,并没有 ...

  3. javascript作用域和闭包之我见

    javascript作用域和闭包之我见 看了<你不知道的JavaScript(上卷)>的第一部分--作用域和闭包,感受颇深,遂写一篇读书笔记加深印象.路过的大牛欢迎指点,对这方面不懂的同学 ...

  4. 读《你不知道的JavaScript(上卷)》后感-作用域闭包(二)

    github原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们, ...

  5. 《前端之路》之四 JavaScript 的闭包、作用域、作用域链

    04:JavaScript 的闭包 一.定义: 常规定义: 闭包的定义: 有权利访问外部函数作用域的函数. 通俗定义: 1.函数内部包含了函数.然后内部函数可以访问外部函数的作用域. 2.内部函数可以 ...

  6. JavaScript 作用域和闭包——另一个角度:扩展你对作用域和闭包的认识【翻译+整理】

    原文地址 --这篇文章有点意思,可以扩展你对作用域和闭包的认识. 本文内容 背景 作用域 闭包 臭名昭著的循环问题 自调用函数(匿名函数) 其他 我认为,尝试向别人解释 JavaScript 作用域和 ...

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

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

  8. 关于Javascript作用域及作用域链的总结

    本文是根据以下文章以及<Javascript高级程序设计(第三版)>第四章相关内容总结的. 1.Javascript作用域原理,地址:http://www.laruence.com/200 ...

  9. JavaScript作用域链

    之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包,觉得写得很清晰,可以简单理解闭包产生原因,但看评论都在说了解了作用域链和活动对象才能真正理解闭包,起初不以为然,后来在跟公司同事交流的时 ...

随机推荐

  1. ie7下<a></a>标签不反应

    view中: <a href="Trading?id=@dr["id"]"> <div class="sy_img_div" ...

  2. Jquery属性获取——attr()与prop()

    今天在项目中使用<select></select>下拉菜单时,使用juery操作,使页面加载完菜单默认选中的值为2,我一开始的操作如下: <!--html部分--> ...

  3. SAP中数字计算时溢出捕获

    CLEAR:g_vol. CATCH SYSTEM-EXCEPTIONS arithmetic_errors = OTHERS = . g_vol = gwa_input-laeng * gwa_in ...

  4. sqlmap笔记

    sqlmap -u "注入链接" --其他参数或命令 (-v 1表示回显出注入过程) [判断指定字段是否存在注入点]当链接包含两个参数时,可用-p开关选择要注入的参数,例检测id是 ...

  5. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q88-Q91)

    Question 88  You are designing a SharePoint 2010 application that stores data in a list named Base L ...

  6. Android九宫格界面实现点击每个格点击跳转界面

    刚开始有个任务就是做一个九宫格界面,后来有个任务就是实现点击每个格并跳转界面实现每个格的功能.下面我就介绍一下我是如何实现该功能的 首先写一下我的想法是: 登录成功后显示一个九宫格界面,每个九宫格的每 ...

  7. 我参加了51CTO博客大赛,求投票!

    我是张传波,也是Fireball(火球). 我参加了51CTO博客大赛,距离网络投票截止没有几天了,求投票!我的参赛链接:http://blog.51cto.com/contest2013/82313 ...

  8. (视频)《快速创建网站》 4.1 为啥造软件不同于造汽车,为啥是软件就一定会有Bug - 构建开发运维一体化(DevOps)

    本文是<快速创建网站>系列的第9篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...

  9. mysql常用函数汇总

    一.数学函数ABS(x)   返回x的绝对值BIN(x)   返回x的二进制(OCT返回八进制,HEX返回十六进制)CEILING(x)   返回大于x的最小整数值EXP(x)   返回值e(自然对数 ...

  10. 网络编程2--毕向东java基础教程视频学习笔记

    Day 23 08 Udp接收端09 Udp键盘录入数据方式10 Udp聊天11 TCP传输12 TCP传输213 TCP练习14 TCP复制文件 08 Udp接收端 需求:定义一个应用程序,用于接收 ...