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

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

闲话少说，开整。

1、

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

解析

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

2、

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

解析

var a;           //变量提升 a进入作用域
console.log(a);  //输出 undefined
a = 1;           //a被赋值 1 
console.log(a);  //输出 1
a = 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被赋值 1
console.log(a);                 //输出 1
console.log(a);                 //输出 1
a = 3;                          //a被赋值 3
console.log(a);                 //输出 3
console.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被赋值 1
fn1();                  //调用函数fn1
console.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被赋值 1
fn1();                  //调用函数fn1
console.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();                 //调用函数fn1
console.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为全局变量 1
console.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被赋值 1
en();                 //调用函数en

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

答案请自行查看…