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使用一个不存在的变量所以报错。

作用域链

JavaScript作用域闭包简述

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

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)) }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/c4fa1fcd8d0081f7cfa6e1201c1268bf.html