变量声明提前、函数声明提前、声明提前的先后顺序

1.变量声明提前

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行的运行。这造成的结果就是，所有的变量的声明语句都会提升到代码的头部，这就叫做变量提升。

function b(){
  console.log(a);  //undefined 
  var a = '哈哈';  //声明变量a并且给a赋值哈哈
  console.log(a)  //哈哈
}
b()

上面代码等同：

function b(){
  var a;
  console.log(a);
  a = '哈哈';
  console.log(a)
}
b()

只是声明提前，赋值并不会提前。

2.函数声明提前

JavaScriplt一共有三种方法定义函数：函数声明、函数表达式、构造函数。

• 函数声明

function print(s){
    console.log(s);
}

• 函数表达式

var print = function (s){
  console.log(s)  
};

• 构造函数

var add = new Function('x', 'y', 'return x + y');
//等同于
function add(x, y){
    return x + y
}

 在同一作用域中，函数声明会提升至此作用域的最顶端 (只有函数声明会提升）。

console.log(a)  //function a(){console.log('哈哈')}
function a(){
   console.log('哈哈')         
}

上面的代码等同于：

function a(){
    console.log('哈哈')
}
console.log(a)

如果是函数表达式，函数不会提升。函数表达式与其他的表达式一样，在使用前必须先赋值。

console.log(f)  //undefined
var f = function (){
  console.log("haha")  
}
console.log(f) //function(){console.log("haha")}

上面代码等同于:

var f;
console.log(f） 
f = function(){
    console.log("haha")
}
console.log(f)  

 

3.声明提前的先后顺序

如果变量名和函数名相同，那么谁会提升至更前呢？

console.log(a);
var a = "哈哈";
function a(){
    console.log("哼哼")
}
console.log(a); //哈哈

上面代码等同于：

function a(){ 
    console.log("哼哼")
}
var a；
console.log(a); //function a(){console.log("哼哼")}
a = "哈哈"; //此时给a赋值"哈哈" 
console.log(a) //哈哈

函数提前之后又声明了变量a，打印出来的为什么是函数而不是undefined呢？因为使用var重新声明一个已经存在的变量，是无效的（会直接忽略）。

var a = 3;
var a;
console.log(a); //3

变量a已经声明并赋值，再次声明而没有赋值，这种声明方式会直接忽略，所以还是会输出3。

 4.参考内容

https://wangdoc.com/javascript/basic/grammar.html

https://wangdoc.com/javascript/types/function.html