JS作用域、立即执行函数、闭包

2018-4-25 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

作用域    

首先先介绍一下作用域等一些基础概念。

 每个JavaScript函数都是一个对象,对象中有些属性我们可以访问,但有些不可以,这些属性仅供JavaScript引擎存取,[[scope]]就是其中一个。

[[scope]] : 指的就是我们所说的作用域,其中存储了执行期上下文的集合

作用域链 : [[scope]] 中所存储的执行期上下文对象的集合,这个集合呈链式链接,我们把这种链接叫做作用域链。

运行期上下文  : 当函数执行时,会创建一个称为执行期上下文的内部对象(AO)。一个执行期上下文定义了一个函数执行的环境,函数每次执行时对应的执行环境都是独一无二的,所以多次调用一个函数会导致创建多个执行上下文,当函数执行完毕,它所产生的执行上下文被销毁。

查找变量  :从作用域链的顶端依次向下查找。

下面举一些例子:

[html] view plain copy
  1. function a(){  
  2.     function b(){  
  3.         function c(){  
  4.   
  5.         }  
  6.         c();  
  7.     }  
  8.     b();  
  9. }  
  10. a();  
  11.   
  12.   
  13. a defined a.[[scope]] ----> 0 : GO          //a定义的时候产生GO对象  
  14. a doing   a.[[scope]] ----> 0 : aAO           //a执行的时候新产生AO对象  
  15.                             1 : GO  
  16.   
  17. b defined  b.[[scope]] ----> 0 : aAO            //子级b定义会继承父级a运行时产生的对象  
  18.                              1 : GO   
  19. b doing    b.[[scope]] ---->  0 : bAO            //子级b新产生AO对象  
  20.                               1 : aAO   
  21.                               2 : GO   
  22.                                 
  23. c defined  c.[[scope]] ---->  0 : bAO            //c定义时会继承b运行时产生的属性  
  24.                               1 : aAO   
  25.                               2 : GO                          
  26. c doing     c.[[scope]] ----> 0 : cAO            //c执行时同时又产生新的AO  
  27.                               1 ;bAO   
  28.                               2 : aAO   
  29.                               3 : GO   

立即执行函数

之前学过函数的定义、函数表达式,还有一种函数叫做立即执行函数。

立即执行函数:函数执行过后立即被销毁。

立即执行函数的官方写法:

[html] view plain copy
  1. // 立即执行函数的官方写法  
  2. (function() {} ());  W3C建议此种  
  3. (function() {})();  

针对初始化功能的函数,可以有参数。

[html] view plain copy
  1. var num = function (a,b){  
  2.     return a + b;  
  3. }(1,2);  
  4.   
  5. (function abc(){  
  6.     var a = 123;  
  7.     var b = 234;  
  8.     console.log(a+b);  
  9. }())  

只有表达式才能被执行符号执行,能被执行符号执行的表达式,函数名字会被自动忽略。

[html] view plain copy
  1. function test(){  
  2.     console.log("a");  
  3. }()    会出现语法解析错误,因为括号前面是函数声明  
  4.   
  5. (+ function test( ){  
  6.     console.log('a');  
  7. }())                    -------->打印出a  

下面是一道曾阿里面试题

[html] view plain copy
  1. function test(a, b, c, d){  
  2.     console.log(a + b + c + d);  
  3. }(1, 2, 3, 4);  
  4.   
  5. // 不报错也没有执行        

下面是几道经典的例题,可以参考一下:

[html] view plain copy
  1.   
[html] view plain copy
  1. function test(){  
  2.     var arr = [];  
  3.     for(var i = 0; i < 10; i ++){  
  4.         arr[i] = function (){  
  5.             console.log(i);  
  6.         }  
  7.     }  
  8.     return arr;  
  9. }  
  10. var myArr = test();  
  11. for(var j = 0; j < 10; j++){  
  12.     myArr[j]();  
  13. }    
[html] view plain copy
  1.   
[html] view plain copy
  1. // 输出:10个10  

那么采用立即执行函数呢?会有怎样的结果呢?

[html] view plain copy
  1. function test(){  
  2.     var arr = [];  
  3.     for(var i = 0; i < 10; i ++){  
  4.         (function(j){  
  5.             arr[i] = function (){  
  6.             console.log(j + " ");  
  7.         }  
  8.         }(i))  
  9.     }  
  10.     return arr;  
  11. }  
  12. var myArr = test();  
  13. for(var j = 0; j < 10; j++){  
  14.     myArr[j]();  
  15. }   
[html] view plain copy
  1.   
[html] view plain copy
  1. // 输出结果  0 1 2 3 4 5 6 7 8 9   

大家可以自行思考一下。

闭包

闭包的现象:当内部函数保存到外部时会产生闭包。


闭包会导致原有的作用域链不释放,造成内存泄漏

(内存泄漏:内存占用(比如:手握沙子,握得越紧手里剩得就越少))


闭包触发的情况:

    两个或多个函数互相嵌套,把里面的函数保存到外部,这样的情况一定会产生闭包。从外面还可以调用里面的函数。


闭包的作用:

            实现公有变量

                    eg:函数累加器

            可以做缓存(存储结构)

                    eg:eater

               可以实现封装,属性私有化

                    eg:person()

                模块化开发,防止污染全局变量



[html] view plain copy
  1. // 函数累加器  
  2. function add(){  
  3.     var count = 0;  
  4.     function demo(){  
  5.         count ++;  
  6.         console.log(count);  
  7.     }  
  8.     return demo;  
  9. }  
  10. var counter = add();  
  11. counter();  
  12. counter();  
  13. counter();  
  14. counter();  
  15. counter();  
  16. counter();  
  17.   
  18.   
  19. // eater  
  20. function test(){  
  21.     var food = "apple";  
  22.     var obj = {  
  23.         eatFood : function (){  
  24.             if(food != ""){  
  25.                 console.log("I am eating  " + food);  
  26.                 food = "";  
  27.             }  
  28.             else{  
  29.                 console.log("There is nothing!");  
  30.             }  
  31.         },  
  32.         pushFood : function (myFood){  
  33.             food = myFood;  
  34.         }  
  35.     }  
  36.     return obj;  
  37. }  
  38. var person = test();  
  39. person.eatFood();  
  40. person.eatFood();  
  41. person.pushFood('banana');  
  42. person.eatFood();  

附加一个逗号操作符:

        先看前面的表达式,再看后面的表达式,把后面表达式的计算结构返回

例题:

[html] view plain copy
  1. var f =(  
  2.     function f(){  
  3.         return "1";  
  4.     },  
  5.     function g(){  
  6.         return 2;  
  7.     }  
  8. )();  
  9. console.log(typeof(f));   
  10.   
  11. // -------number  
  12.   
  13. var x = 1;  
  14. if(function f(){}){  
  15.     x += typeof f;  
  16. }  
  17. console.log(x);  
  18. // --------> 1undefined  
  19. 蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: JS作用域、立即执行函数、闭包


Powered by emlog 京ICP备12006971号-1 sitemap