作用域与闭包

         //作用域
                /* 执行上下文
                 * 范围:一段<script>或者一个函数
                 * 全局:变量定义、函数声明;       一段<script>
                 * 函数:变量定义、函数声明、this、arguments; 函数
                 * PS: 函数声明 与 函数表达式区别
                 * */
                 
                 fn()
                 function fn(){
                     //函数声明
                 }    
                 //fn1() //undefined var fn1=undefined
                 var fn1=function(){
                     //函数表达式
                 } 
                 
                 //2. this
                 /* 构造函数 new
                  * 对象属性  obj
                  * 普通函数   window
                  * call apply
                  * */
                 
                 //无块级作用域
                 if(true){
                     var name= 'xxx'
                 }
                 console.log(name)  //xxx
                 
                 //函数和全局作用域
                 var a=100;
                 function fn2(){
                     var a=200
                     console.log('fn2',a)
                 }
                 console.log('g',a)  //100
                 fn2()    //200
                 
                 //作用域链  自由变量不断向父级去找
                 var a=100;
                 function fn3(){
                     var b=200;
                     
                     //当前作用域没有定义的变量,叫自由变量
                     console.log(a)
                     console.log(b)
                 }
                 fn3()
                 
                 //闭包
                 function F1(){
                         var c =100;
                         //返回函数
                         return function(){ //父级作用域是F1而不是全局
                             console.log(c)  //自由变量去他父级作用域找
                         }
                 }
                 
                 var f1=F1();
                 var c= 200
                 f1()
                 
                 //作用域在定义时就确定了 而不是执行时
                 //闭包
                 //1、函数作为返回值;
                 //2、函数作为参数传递
                 
                 
                 function F1(){
                     var a=100;
                     return function(){
                         console.log(a)
                     }
                 }
                 var f1=F1();
                 function F2(fn){
                     var a=200;
                     fn();
                 }
                 F2(f1);
                 
                 /* 1.变量提升的理解
                  * `变量定义
                  * `函数声明()
                  * */
                 
                 //3.10个a
                 for (var i=0; i<10; i++) {
                     (function(i){
                         var a=document.createElement('a');
                         a.innerHTML=i+'<br>'
                         a.addEventListener('click',function(e){
                             e.preventDefault();
                             alert(i)
                         })
                         document.body.appendChild(a)
                     })(i)
                 }
                 
                 //4.如何理解作用域
                 //1.自由变量 2、作用域链,即自由变量查找 3、闭包的两个场景
                 
                 //5.闭包 实际应用中主要用于封装变量,收敛权限
                 
                 function isFirstLoad(){
                     var _list= []
                     return function(id){
                         if (_list.indexOf(id)>= 0) {
                             return false;
                         } else{
                             _list.push(id)
                             return true
                             
                         }
                     }
                 }
                 
                 var firstLoad = isFirstLoad()
                 firstLoad(10) //true
                 firstLoad(10) //false
                 firstLoad(20)  //true

 

posted @ 2017-08-10 14:12  菜鸟一小只  阅读(194)  评论(0编辑  收藏  举报