杂记——彻底认清javascript中的作用域问题

需要了解的知识 预解析 和 变量提升 可翻看我之前的三篇 《JavaScript难点——变量提升和函数提升》

闲话少说，开整。

1、

console.log(a);var a = 1;

解析

var a;            //变量提升 a进入作用域console.log(a);   //输出 undefineda = 1;

2、

console.log(a);var a = 1;console.log(a);var a = 2;console.log(a);

解析

var a;           //变量提升 a进入作用域console.log(a);  //输出 undefineda = 1;           //a被赋值 1 console.log(a);  //输出 1a = 2;           //a被赋值 2 console.log(a);  //输出 2

3、

console.log(a);                    var a = 1;                console.log(a);                    function a(){ console.log(2); }console.log(a);                    var a = 3;        console.log(a);                    function a(){ console.log(4); }console.log(a); 

解析

function a(){ console.log(2); } //函数提升 a进入作用域 声明为函数function a(){ console.log(4); } //函数提升 a被覆盖var a;                          //变量提升 声明被忽略console.log(a);                 //function a(){ console.log(4); }a = 1;                          //a被赋值 1console.log(a);                 //输出 1console.log(a);                 //输出 1a = 3;                          //a被赋值 3console.log(a);                 //输出 3console.log(a);                 //输出 3

4、

var a = 1;function fn1(){    console.log(a);          var a = 2;            }fn1();console.log(a);        

解析

function fn1(){         //函数提升    var a;              //变量提升 a 进入作用域（局部）    console.log(a);     //输出 undefined    a = 2;              //a被赋值 2（局部）}var a;                  //变量提升 a 进入作用域（全局）a = 1;                  //a被赋值 1fn1();                  //调用函数fn1console.log(a)          //输出 1

此处有个小问题需要注意一下，就是代码的执行顺序。要记住，函数声明会连同函数体一起提前，但并没有执行，只有被调用的时候它才会执行。所以上例中的代码执行顺序是：

5、

var a = 1;function fn1(){    console.log(a);           a = 2;}fn1();console.log(a);    

解析

function fn1(){         //函数提升    console.log(a);     //函数体内部作用域中未声明a 去到上一级作用域中找a = 1  输出 1    a = 2;              //a被赋值2 由于没有用var声明 a 属于全局变量不受函数作用域限制}var a;                  //变量提升 a进入作用域（全局）a = 1;                  //a被赋值 1fn1();                  //调用函数fn1console.log(a);         //输出 2

6、

var a = 1;function fn1(a){            console.log(a);                         a = 2;     console.log(a);             }fn1();console.log(a);   

解析

function fn1(a){       //函数提升 a由函数形参进入作用域（局部）相当于var a;    console.log(a);    //输出 undefined    a = 2;             //a被赋值 2(局部)    console.log(a)     //输出 2}var a;                 //变量提升 a进入作用域（全局）a = 1;                 //a被赋值 1（全局）fn1();                 //调用函数fn1console.log(a);        //输出 1

此处需要注意一下作用域中的名称解析顺序（大致是 语言自身定义 > 函数形参 > 函数声明 > 变量声明），可以翻一下之前的《JavaScript难点——变量提升和函数提升（二）》

7、

var a = 1;function fn1(a){    console.log(a);    a = 2;    console.log(a);}fn1(a);     console.log(a);

解析

function fn1(a){       //函数提升 a由函数形参进入作用域（局部）相当于var a; a = 1;    console.log(a);    //输出 1    a = 2;             //a被赋值 2(局部)    console.log(a);    //输出 2}var a;                 //变量提升 a进入作用域（全局）a = 1;                 //a被赋值 1（全局）fn1(a);                //调用函数fn1 此处函数实参a为全局变量 1console.log(a);        //输出 1

8、

var a = 1;function en(){    var a = 2;    fn();}function fn(){    console.log(a);}en();  

解析

function en(){        //函数提升    var a;            //变量提升 a进入函数作用域（局部）    a = 2;            //a被赋值 2    fn();             //调用函数fn}function fn(){    console.log(a);   //函数作用域中未声明a，去到上一级作用域中找a a = ??}var a;                //变量提升 a进入作用域（全局）a = 1;                //a被赋值 1en();                 //调用函数en

解析到最后，关键就是看函数fn中变量a的上一级作用域是哪里了。是调用他的函数en作用域中？还是它被创建时所在的全局作用域中呢？

答案请自行查看…