浅谈Js作用域以及执行期上下文

作为一个爱美丽也爱学习的程序媛，现在和大家聊一聊js作用域以及执行期上下文那些事儿、、、

作用域

这个有点不知道怎么说，感觉这个名词已经够直白了，作用域顾名思义就是其作用范围，如下代码所示：

 
 

   
   

    
    

   
   
   
   

    
    

     
     var a = 'hello' ;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     function demo1 (){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     var b = 0;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     console.log(a);  //hello
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     console.log(b);  //报错 Uncaught ReferenceError: b is not defined
    
    
   
   
 
 

这就是作用域导致的错误，变量b在函数demo1中定义，属于局部变量，只能在demo1中才可以被调用，而变量a定义在最外层，即全局，任何地方都可以使用这个变量，顺便还想提一下的是变量提升、函数声明提升以及函数表达式声明提升。

 
 

   
   

    
    

   
   
   
   

    
    

     
     console.log(a)  //undefined
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     console.log(demo1) //ƒ demo1(){ console.log("nice"); }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     console.log(demo2)  //undefined
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     var a = 10 ;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     function demo1(x,y){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	var aa = 10;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             x="hello";
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             function demo3(){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 console.log("我是demo3");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             var demo4 = function (){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 console.log("我是demo4");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	console.log("nice");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     var demo2 = function(){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	var cc = 20 ;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	console.log("not nice");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     demo1();
    
    
   
   
 
 

 

Javascript是解释性语言，解释一行执行一行，但是在解释之前，浏览器会通篇扫描一下整体的语法结构是否符合规则，否则将不会解释代码，直接报错。

 

在函数demo1要执行，但还没执行的一刻，系统会创建一个AO对象。

 

• 第一步    创建AO对象

 
 

   
   

    
    

   
   
   
   

    
    

     
     AO｛
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     ｝
    
    
   
   
 
 

 

• 第二步     将函数内所有的形参和变量声明存储到AO对象中

 
 

   
   

    
    

   
   
   
   

    
    

     
     AO{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          x:undefined,
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          y:undefined,
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          aa:undefined,
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         demo3:function demo3(){......},
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         demo4:unedfined
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
      }
    
    
   
   
 
 

• 第三步     将函数内所有的形参和变量声明存储到AO对象中

 
 

   
   

    
    

   
   
   
   

    
    

     
     AO{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          x:"hello",
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          y:undefined,
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          aa:10,
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          demo3:function demo3(){......},
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          demo4:function (){console.log("我是demo4"); }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     } 
    
    
   
   
 
 

• 第四步     将所有函数声明和函数名作为AO对象中的Key，函数的整体内容作为value，存储到AO对象中（注：由于这是最后一个步奏，所以优先级最高，当函数声明的函数名与变量的名字相同的情况下，最终函数的整体内容会覆盖原先变量中的内容 )

 
 

   
   

    
    

   
   
   
   

    
    

     
     AO{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          x:"hello",
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          y:undefined,
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          aa:10,
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          demo3:function demo3(){......},
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          demo4:function (){console.log("我是demo4"); }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     } 
    
    
   
   
 
 

所以......在函数开始执行后调用的都是AO中存储的对象，还有GO，GO面对的是window对象，所有的函数都至少又两个执行期上下文，一个是全局的GO，还有一个本身的AO,当访问函数内部变量时，函数会首先从自己的执行期上下文自上而下的搜索，如果没有，就会到全局的GO中寻找，当函数执行结束，函数指向AO的指针则会断掉，等到再次执行函数时，又会生成一个新的AO对象。

这个到这就结束了，如果其中又说的不对的地方，欢迎指出！！！