函数声明和变量声明提升

 

var a; // 声明一个变量，标识符为a 
function a() { // 声明一个函数，标示符也为a 
} 
alert(typeof a); 

显示的是“function”，即function的优先级高于var。 
有人觉得这是代码顺序执行的原因，即a被后执行的funcion覆盖了。好，将它们调换下。　

function a() { 
} 
var a; 
alert(typeof a); 

结果仍然显示的是“function”而非“undefined”。即函数声明优先于变量声明。 
我们把代码稍作修改，声明a时同时赋值。 

function a() { 
} 
var a = 1; // 注意此处 
alert(typeof a); 

这时显示的是“number”却不是“function”了，这相当于 

function a() { 
} 
var a; 
a = 1; // 注意此处 
alert(typeof a); 

即把“var a = 1”拆分为两步。 a被重新赋值了，自然是最后的那个值。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

变量声明提升

1、变量定义

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

2、变量作用域

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

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

JavaScript的函数作用是指在函数内声明的所有变量在函数体内始终是有定义的，也就是说变量在声明之前已经可用，所有这特性称为声明提前（hoisting），即javascript函数里的所有声明（只是声明，但不涉及赋值）都被提前到函数体的顶部，而变量赋值操作留在原来的位置。如下面例子： 
注释：声明提前是在JavaScript引擎的预编译时进行，是在代码开始运行之前。

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

由于函数内声明提升，所以上面的代码实际上是这样的

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

经过这样变形之后，答案就就非常明显了。由于scope在第一个console.log(scope)语句之前就已经定义了，但是并没有赋值，因此此时scope的指是undefined.第二个console.log(scope)语句之前，scope已经完成赋值为’local’，所以输出的结果是local。

函数声明提升

1、函数的两种创建方式

• 函数声明
• 函数表达式

函数声明语法

f('superman');
function f(name){
    console.log(name);
}

运行上面的程序，控制台能打印出supemran。 
函数表达式语法

f('superman');
var f= function(name){
    console.log(name);
}

运行上面的代码，会报错Uncaught ReferenceError: f is not defined(…),错误信息显示说f没有被定义。 
为什么同样的代码，函数声明和函数表达式存在着差异呢？ 
这是因为，函数声明有一个非常重要的特征：函数声明提升，函数声明语句将会被提升到外部脚本或者外部函数作用域的顶部（是不是跟变量提升非常类似）。正是因为这个特征，所以可以把函数声明放在调用它的语句后面。如下面例子，最终的输出结果应该是什么？：

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

可能会有人觉得最后输出的结果是1。让我们来分析一下，这个例子涉及到了变量声明提升和函数声明提升。正如前面说到的函数声明提升，函数声明function getName(){}的声明会被提前到顶部。而函数表达式var getName = function(){}则表现出变量声明提升。因此在这种情况下，getName也是一个变量，因此这个变量的声明也将提升到底部，而变量的赋值依然保留在原来的位置。因此上面的函数可以转换成下面的样子:

function getName(){    //函数声明提升到顶部
    console.log(1);
}

var getName;    //变量声明提升

getName = function(){    //变量赋值依然保留在原来的位置
    console.log(2);
}
getName();    // 最终输出：2

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

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

你不知道的JavaScript（上卷）    一书的第40页中写到：函数会首先被提升，然后才是变量。

console.log(foo);   
function foo(){
    console.log("函数声明");
}
var foo = "变量"

输出为：
function foo(){
    console.log("函数声明");
}
疑问：函数先提升，接着变量再提升，但函数优先级比变量更高，所以console.log(foo)会是一个函数；

这段代码相当于

function foo(){
    console.log("函数声明");
}
var foo；
console.log(foo);   
foo = "变量"

 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

JavaScript中变量和函数声明的提升

现象：

1.在JavaScript中变量和函数的声明会提升到最顶部执行。

2.函数的提升高于变量的提升。

3.函数内部如果用var声明了相同名称的外部变量，函数将不再向上寻找。

4.匿名函数不会提升。

5.不同<script>块中的函数互不影响。

函数声明提升高于变量声明

//同时声明变量a和函数a
var a;
function a() {} 
alert(typeof a);  //显示的是"function"，初步证明function的优先级高于var。

//先声明函数后声明变量，证明上边的例子不是function覆盖了变量
function a() {}
var a; 
alert(typeof a);  //显示的仍是"function",而不是"undefined"，即function的优先级高于var。

//声明了变量的同时赋值
function a() {}
var a = 1;
alert(typeof a);  //number,此时不是function了。
//说明："var a=1"相当于"var a;a=1",即先声明，后赋值，"a=1"相当于把a重新赋值了，自然就是number!

函数内部用var定义了和外部相同的变量，函数将不再向上找外部的变量

var value = 'hello';
function  show() {
    alert(value);
    if (!value) {
        var value = 'function';
    }
    alert(value);
}
show() //此处调用函数依次弹出 "undefined", "function"

//上例相当于
var value = 'hello';
function  show() {
　　var value;  //注意这行
    alert(value);
    if (!value) {
        value = 'function';  //这行去掉var
    }
    alert(value);
}
show()
//1.如果上列中show内部定义value未用var,则会用到外部的变量，弹出"hello", "hello"。 
//2.如果函数内部未定义value,也能获取到外部的value值。

匿名函数不会向上提升

getName()
var getName = function () {
    alert('closule')
}
function getName() {
    alert('function')
}
getName()

//上边的代码相当于
function getName() {  //函数向上提升
    alert('function')
}
getName()
var getName = function () {
    alert('closule')
}
getName()

//代码执行分别弹出 "function", "closule"

不同<script>块中的函数互不影响

<script>
    getName()
    var getName = function () {
        alert('closule')
    }
<script>
<script>
    function getName() {
        alert('function')
    }
<script>

//代码执行报错：TypeError: getName is not a function
//因为第一个<script>块中getName()函数未定义,匿名函数又不会向上提升

 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

还有一个很疑惑的就是

function bar(){
        console.log(a);
    }
bar();
var a = 33333;
bar();

输出结果竟然是undefined和33333，为什么第二个能够得到33333？

 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

function testOrder(arg) {
    console.log(arg); // arg是形参，不会被重新定义
    console.log(a); // 因为函数声明比变量声明优先级高，所以这里a是函数
    var arg = 'hello'; // var arg;变量声明被忽略， arg = 'hello'被执行
    var a = 10; // var a;被忽视; a = 10被执行，a变成number
    function a() {
        console.log('fun');
    } // 被提升到作用域顶部
    console.log(a); // 输出10
    console.log(arg); // 输出hello
}; 
testOrder('hi');

/* 输出：
hi 
function a() {
        console.log('fun');
    }
10 
hello 
*/