变量提升题

  1. var a = 1;
  2. function fn(a) {
  3.     console.log(a); 
  4.     var a = 2;
  5.     function a() {}
  6.     console.log(a); 
  7. }
  8. fn(a); 
  9. console.log(a);
  1. console.log(a)
  2. var a=12; 
  3. function fn(){
  4.     console.log(a); 
  5.     var a=13;   
  6. }
  7. fn();   
  8. console.log(a);
  1. console.log(a)
  2. var a=12; 
  3. function fn(){
  4.     console.log(a); 
  5.     a=13;   
  6. }
  7. fn();   
  8. console.log(a);
  1. console.log(a);
  2. a=12;
  3. function fn(){
  4.     console.log(a);
  5.     a=13;   
  6. }
  7. fn();
  8. console.log(a);
  1. console.log(foo); 
  2. {
  3.     console.log(foo);
  4.     function foo() {}
  5.     console.log(foo); 
  6.     foo = 1;
  7.     console.log(foo); 
  8. }
  9. console.log(foo);

答案解析

  1. /*
  2.  * EC(G)
  3.  *    a  --> 1
  4.  *    fn --> 0x000  作用域链[[scope]]:EC(G)
  5.  * 变量提升:
  6.  *   var a;   
  7.  *   function fn(a) {...};
  8.  * 代码执行:
  9.  *   fn(a) 跳掉函数体内
  10.  */
  11. var a = 1;
  12. function fn(a) {
  13.    /*
  14.     *    EC(FN)
  15.     *    a --> 1 
  16.     *      -->赋值了一个函数地址为0x001[scope]:EC(FN)
  17.     *     -->2
  18.     *   变量提升 var a (私有)
  19.     */
  20.     console.log(a); // =>函数
  21.     var a = 2;  
  22.     function a() {}
  23.     console.log(a); // =>2
  24. }
  25. fn(a); 
  26. console.log(a);// =>1 （全局）
  1. /*
  2.  * EC(G)
  3.  *    a  --> 12
  4.  *    fn --> 0x000  作用域链[[scope]]:EC(G)
  5.  * 变量提升:
  6.  *   var a;   
  7.  *   function fn(a) {...};
  8.  * 代码执行:
  9.  *   fn() 跳掉函数体内
  10.  */
  11. console.log(a)
  12. var a=12; 
  13. function fn(){
  14.      /*
  15.      * EC(FN)
  16.      *   a --> 13
  17.      * 作用域链:<EC(FN),EC(G)> 
  18.      * 形参赋值:--
  19.      * 变量提升:var a;(私有)
  20.      */
  21.     console.log(a);  // =>undefined 变量提升但没赋值
  22.     var a=13;   
  23. }
  24. fn();   
  25. console.log(a); // =>12 （全局）
  1. /*
  2.  * EC(G)
  3.  *    a  --> 12
  4.  *    fn --> 0x000  作用域链[[scope]]:EC(G)
  5.  * 变量提升:
  6.  *   var a;   
  7.  *   function fn(a) {...};
  8.  * 代码执行:
  9.  *   fn() 跳掉函数体内
  10.  */
  11. console.log(a)
  12. var a=12; 
  13. function fn(){
  14.      /*
  15.      * EC(FN)
  16.      *   a --> 因为内部没有所以去全局寻找
  17.      * 作用域链:<EC(FN),EC(G)> 
  18.      * 形参赋值:--
  19.      * 变量提升:--
  20.      */
  21.     console.log(a); // =>12
  22.     a=13;    //修改了全局都a值
  23. }
  24. fn();   
  25. console.log(a); // =>13
  1. console.log(a); //=>报错 Uncaught ReferenceError: a is not defined
  2.                 // a 为声明 直接报错 下面也不会运行
  3. a=12;
  4. function fn(){
  5.     console.log(a);
  6.     a=13;   
  7. }
  8. fn();
  9. console.log(a);

一道同名块级作用域题

  1. console.log(foo); 
  2. {
  3.     console.log(foo); 
  4.     function foo() {1}
  5.     console.log(foo); 
  6.     foo = 1;
  7.     console.log(foo); 
  8.     function foo() {2}
  9.     foo = 3;
  10.     console.log(foo); 
  11. }
  12. console.log(foo);

知识点

  1. 块级作用域中函数和var变量被提升到全局作用域但并不赋值 let和const不会被提升
  2. 如果是函数和var随后在块级作用域中会被提升到顶部 并且函数赋值堆地址
  3. 当块级作用域执行遇到函数创建时，浏览器会把在创建函数之前对同名变量（foo）的所有操作同步给全局一份（这是为了兼容ES5又兼容ES6）但创建函数之后对同名变量的操作就只会在其私有作用域下了不会到全局
  1. /*
  2.  * EC(G)
  3.  *    foo  --> 1
  4.  * 变量提升:
  5.  *   var foo; 开始时但并不赋值  
  6.  *   foo() 
  7.  * 代码执行:
  8.  *   fn(a) 跳掉函数体内
  9.  */
  10. console.log(foo);  // =>undefined 
  11. {
  12.     console.log(foo);  // =>函数(0x002)
  13.     function foo() {1} //变量提升到全局:foo; 开始时但并不赋值 
  14.                        //随后提升到块级作用域顶部 赋值函数堆地址此时是return 1的函数(0x001)
  15.     console.log(foo);  // =>函数(0x002)
  16.     foo = 1;  //此时修改了 foo的值 但如果没有函数(0x002)的存在，只修改了块级作用域的foo值不会全局的
  17.     console.log(foo); // =>1 
  18.     function foo() {2}  // @1 -- 和1一样 赋值函数堆地址此时修改成return 2的函数(0x002)
  19.                         // @2 --遇到函数(0x002)创建 此时会把之前对foo的 修改同步给全局一份 全局的    --> foo值为1了        
  20.     foo = 3; //此时修改了 foo的值 但后面没有了函数创建 所以只修改块级作用域的foo 
  21.     console.log(foo); // =>3 块级作用域的foo 
  22. }
  23. console.log(foo); // =>1 全局的