首页 > 代码库 > js提升机制(hoisting)

js提升机制(hoisting)

这是我申请博客园写的第一篇文章,想把这两天学习的关于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);

 

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

js提升机制(hoisting)