js提升机制（hoisting）

Posted 2020-08-14

这是我申请博客园写的第一篇文章，想把这两天学习的关于js的变量和函数提升机制（hoisting）记录下来。

从网上看到这么一段代码：

 var c = 2;

 function c(){

　　c = 22;

　　console.log("c="+c);

 }

 c();//会报错，变量提升机制导致的（c is not a function）

问运行结果是什么，然后不假思索的就以为是22，因为c=22这行看起来就是对外面的全局变量c重新定义了

但是实际上不是的，这句话不会执行到c()的时候会报错（number is not a function）,有点蒙蔽，这是怎么了，查了好久，才知道js有个提升机制，变量和函数（函数声明的方式有提升机制，函数表达式没有这个机制）都有提升机制，而且函数提升机制的优先级高于变量的，这也就是说当函数名和变量名相同的时候，拿上面这个例子来说，c被提升到代码最前端，并且被赋值为一个函数，然后才会 被赋值为2，上面的代码等效于下面这个：

var c = function c(){

　　c = 22;

　　console.log("c="+c);

};

c = 2;

c();

执行的时候，c先被赋值为一个函数，然后紧接着又被赋值为数字2，这样在这句赋值语句下面执行c()的时候，c就不是函数了，而是数字，如果在c = 2;这句话的上面执行c()的话，就没有问题了，结果是c = 22;

 

再来看另一个问题，函数声明和函数表达式有什么不同，就是下面这两种情况：

d();//1

function d(){//方式1

　　alert("1");

}

 

d();//undefined is not a function

var d = function(){//方式2

　　alert("1");

};

这两种声明函数方式不同之一在于：

方式1可以在d声明之前使用d()来调用函数，方式2却不可以

 

这个也是可以用变量提升机制来解释的，方式1的写法和下面这个等价：

var d = function d(){

　　alert("1");

};

d();

所以执行没有问题，但是第二种写法的函数就没有变量提升机制，好像也可以用这个方式来解释，第二种写法等价于下面这样：

var d;

d();

d = function(){

　　alert("1")

};

这样的话，执行d()的时候，d还没有被定义为函数，只是被声明了，所以会执行报错。（这样应该可以解释的通，不对的地方，请务必让我知道）

 

来看个复杂点的例子：

var a = 1;

function b() {        //变量提升机制：如这个例子所示，执行b()时

　　console.log(a);   // function a(){}

　　a = 10; //这可不是对外面的全局变量a定义哦

　　console.log(a); //10(局部变量)

　　var a = 11;

　　console.log(a); //11(局部变量)

　　return;

　　function a(){

　　　　alert("abc");

　　}

}

b();

console.log(a); //1(全局变量) 

 

上面的例子等价于下面这样：

var b = function b(){

　　var a = function a(){

　　　　alert("abc");

　　}

　　console.log(a);

　　a = 10;

　　console.log(a);

　　a = 11;

　　console.log(a);

　　return;

}

var a;

a = 1;

b();

console.log(a);

 

不知道写的这点东西对大家有没有一点帮助呢？