javascript变量声明提升

今天偶然看到一篇前段web开发工程师的一道面试题,要求你解释下javascrtip中的变量声明提升,虽然主要是做后台的,但也经常关注前台的东西,但是从来没听过这个,经过在网上查阅了资料下,发现原来javascript的作用域以前的理解还不够深,而这个变量声明提升将有助于我们更好的理解javascript的作用域。

不管是javascript的新手还是老手(对于笔者来说至少是新手拉 - -)对于js来说作用域一直是很麻烦的事,虽然网上的这样的文章很多,但是当随便一个希奇古怪的代码放在你的身边时,你可能就对他束手无策,比如先看下面的代码:

var name = 'qiguo';

function hello(){

name = 'chenqiguo';

}

hello();

alert(name);

这是一段很简单的javascript代码,相信对大家来说都不难,最开始赋值name变量为'qiguo'，在函数内部我们让name又指向了'chenqiguo'，所以最后的结果就是'chenqiguo'

那么我们把上面的代码稍微修改下,如下:

var name = 'qiguo';

function hello(){

name = 'chenqiguo';

return;

function name(){}

}

hello();

alert(name);

注意一下,我们在上面增加了一个function name(){},那么此时name的值为什么呢？ 还是为原来的'chenqiguo'吗？请大家都动手做一下,把这段代码丢在你的浏览器器中去运行下看下结果,吃惊吧？ 既然打印出来的值是'qiguo'，而不再是以前的'chenqiguo'了，这是为什么呢？ 我们只是hello的函数内部中声明了一个与当前变量相同的名称的函数,似乎函数内部的name变量已经不起作用了，是这样吗？ 如果看到这里你已经明白了其中的原理,那么下面的东西可能已经不适合你了。

这里我就不谈javascript的作用域,关于作用域的例子网上已经太多,而且很多讲的很详细,如果对javascript的作用域还没有基础的朋友,我建议大家先去看下javascript作用域的基础知识

好,说了这么多好像似乎还是没有解释上面的那个name变量的问题，不要慌,下面进入本文的正题，但是在此前我们先要讨论核心思想,就是本文的标题,javascript的变量声明提升.

什么叫变量声明提升,以名字来看,似乎就是把当前的变量值往当前的作用域向上提升.在此，我们先看下面一个例子:

function test() {

func1();

func2();

var func1 = function () {

alert('这个不会运行');

}

function func2() {

alert("这个会运行");

}

}

test();

代码会运行什么?呵呵，大家看到alert里面的内容想必也知道了func1不会运行,而func2会运行,那么到底为什么呢？因为在javascript函数声明与变量声明经常会被JavaScript引擎隐式地提升到当前作用域的顶部,也就是说变量func1(实际指向一个匿名函数)和函数func2都会被隐式它指向test函数作用域下的顶部,而变量func1在函数执行时才会被赋值，在调用func1()的时候func1变量指向的匿名函数压根就没有值，所以会报错func1 is not a function

好，再回到我们文章最开始的时候那个例子.

var name = 'qiguo';

function hello(){

name = 'chenqiguo';

return;

function name(){}

}

hello();

alert(name);

这里的代码hello函数内部因为变量提升实际上已经相当于:

function hello(){

var name = function();

name='chenqiguo';

return;

}

这里的name实际上已经是在修改函数内部的name,不会影响全局的name所以最后得到的是'qiguo ',可能有人要问为什么声名不让变量声名在前了,这是因为javascript的语言的特性所造成的，函数的声明大于变量的声明,所以我们才能得到这个想要的结果

注:因为水平有限，如果有讲错的地方还望原谅