js中变量声明提升和函数声明提升

js中变量提升和函数提升

变量声明提升

1. 变量定义

可以使用var定义变量，变量如果没有赋值，那变量的初始值为undefined。

2.变量作用域

变量作用域指变量起作用的范围。变量分为全局变量和局部变量。全局变量在全局都拥有定义；而局部变量只能在函数内有效。
在函数体内，同名的局部变量或者参数的优先级会高于全局变量。也就是说，如果函数内存在和全局变量同名的局部变量或者参数，那么全局变量将会被局部变量覆盖。

3.函数作用域和声明提前

JavaScript的函数作用是指在函数内声明的所有变量在函数体内始终是有定义的，也就是说变量在声明之前已经可用，所有这特性称为声明提前，即JavaScript函数里的所有声明（只是声明，但不涉及赋值）都被提前到函数体的顶部，而变量赋值操作留在原来的位置。

var scope = 'global';
function f(){
    console.log(scope);//undefined
    var scope = 'local';
    console.log(scope);//'local'
}

上面代码其实是这样的

var scope = 'global';
function f(){
    var scope;    //变量声明提升到函数顶部
    console.log(scope);
    scope = 'local';    //变量初始化依然保留在原来的位置
    console.log(scope);
}

函数声明提升

1.函数的两种创建方式

• 函数声明

• 函数表达式

  ==函数声明才会提升，函数表达式属于变量提升==

  看下面代码

console.log(b);  //2
console.log(c);  //undefined
function b(){  
    return 2;  
}  
var c=function(){  
    return 3;  
}  

函数声明语句将会被提升到外部脚本或者外部函数作用域的顶部

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

这个例子涉及到了变量声明提升和函数声明提升。正如前面说到的函数声明提升，函数声明function getName(){}的声明会被提前到顶部。而函数表达式var getName = function(){}则表现出变量声明提升。因此在这种情况下，getName也是一个变量，因此这个变量的声明也将提升到底部，而变量的赋值依然保留在原来的位置。需要注意的是，函数优先，虽然函数声明和变量声明都会被提升，但是函数会首先被提升，然后才是变量。因此上面的函数可以转换成下面的样子:

function getName(){    //函数声明提升到顶部
    console.log(1);
}
var getName;    //变量声明提升
getName = function(){    //变量赋值依然保留在原来的位置
    console.log(2);
}
getName();    // 最终输出：2

所以最终的输出结果是：2。在原来的例子中，函数声明虽然是在函数表达式后面，但由于函数声明提升到顶部，因此后面getName又被函数表达式的赋值操作给覆盖了，所以输出2。

---

有几个例子加深理解：

var a = 10;
 function test(){
     a = 100;
     console.log(a);//100
     console.log(this.a);//10
     var a;
     console.log(a);//100
 }
 test();

//相当于下面代码
var a =10;
function test(){
    var a;
    a = 100;
    console.log(a);//100
    console.log(this.a);//10
    console.log(a);//100
}

---

var a = 100;
 function test(){
     console.log(a);//undefied
     var a = 10;
     console.log(a);//10
 }
 test();

 //相当于下面代码
 var a = 100;
 function test(){
     var a;
     console.log(a);
     a = 10;
     console.log(a);
 }
 test()