关于Javascript中声明变量、函数的笔记

一、概念

1、变量声明

在JavaScript中，变量一般通过var关键字（隐式声明，let关键字声明除外）进行声明，如下通过var关键字声明a,b,c三个变量（并给其中的a赋值）：

var a=1,b,c;                    //关键字显式声明变量a,b,c,并给a赋值
console.log(a);                 //1

//由于b,c已声明但未赋值，因此输出"undefined"
console.log(b);                 //undefined
console.log(c);                 //undefined

//如果变量未声明，则输出未声明的报错信息
console.log(d);                 //Uncaught ReferenceError: d is not defined(…)

2、函数声明

在JavaScript中，函数一般直接通过关键字function进行声明（匿名函数除外）。如下通过function关键字声明一个a函数（或直接var声明一个变量a再赋值为一个函数，此时为函数表达式，但是两种方式都是声明的a最终得到的都是一个函数）：

function a(){
    //.......
}
console.log(a);  //function a(){ //...... }  函数声明

var a = function(){
　　//......
}
console.log(a);  //函数表达式

二、区别

在JavaScript的执行机制中（预编译阶段），变量声明和函数声明是存在优先级的，函数声明的优先级大于变量声明。若同时声明一个函数和变量，函数名称和变量名称相同，则声明的变量无效，通过typeof我们可以看到，无论声明先后顺序，如果声明同名的函数和变量，则只有声明的函数有效，而声明的变量无效（相当于同名的函数覆盖了变量）。也就是：对于var声明的变量如果未赋值，则function定义的重名变量会覆盖掉var的声明；而当var声明的变量已被赋值，则function定义的重名变量无效。如下代码所示：

var a;
function a() {
    alert("哈哈！")
}
console.log(a);     //显示function函数定义

//声明顺序调过来也是一样的结果
function a() {
　　alert("哈哈！")
} 
var a; 
console.log(a);  // 显示function函数定义

//如果在上述情况下(javascript预编译阶段)，直接给变量a赋值，则有以下结果（函数声明无效），声明顺序调过来也一样结果
function a() {
　　alert("哈哈！");
}
var a = 1;

alert(typeof a);         //number,这是因为这时候javascript进入了代码解释执行阶段。变量a被赋值了数值1,所以输出为number类型
console.log(a);         //1  

原因：JavaScript的执行环境上下文相关。预编译阶段只有所有变量声明提前，执行阶段赋值表达式执行，导致重名声明失效，以执行结果为当前变量值。

三、参考资料

1. Javascript变量预解析与函数声明提前
2. Scope Cheatsheet
3. JavaScript执行顺序详细介绍