JS 函数提升&变量提升以及函数声明&函数表达式的区别

感谢原文作者：迟早会有猫

原文链接：https://www.cnblogs.com/SidselLoong/p/10515809.html

今天看js的变量提升问题，里面提到了函数提升。然后发现自己之前一直把函数声明和函数表达式弄错，导致函数提升出错

一、变量提升

console.log(a)
var a=100 //undefined
console.log(a)//100

提升后相当于

var a; //变量提升，全局作用域范围内，此时只是声明，并没有赋值
console.log(a); //undefined
a=100 //此时赋值
console.log(a) //100

二、函数提升

注意：js中创建函数有两种方式：函数声明和函数表达式。只有函数才能函数提升！！！

（因为之前一直没有分清函数声明和函数表达式，所以在函数提升上经常出错 ==）

先简单认识下函数声明和函数表达式

//函数声明
  function fn1(){
    console.log(12)
  }
  //函数表达式
  var fn2 = function () {
    console.log(222)
  }

f1() //123
f2() //error:f2 is not a function
// 函数声明
function f1() {
  console.log(123)
}
// 函数表达式
var f2 = function() {
  console.log(222)
}

提升后

// 函数声明-----提升
function f1() {
  console.log(123)
}
var f2;
f1() //123
f2() //error:f2 is not a function
// 函数表达式
f2 = function() {
  console.log(222)
}

2.1函数提升

fn('zhangsan') //zhangsan 20
  function fn(name) {
    age = 20
    console.log(name,age)
    var age
  }

提升后相当于

function fn(name) {
    var age; //变量提升，定义age
    age=20; //变量赋值
    console.log(name,age)
  }
  fn('zhangsan')

2.2函数表达式

 fn1('lisi')//fn1 is not a function
  var fn1=function (name){
    age = 20
    console.log(name,age)
    var age
  }

提升效果

var fn1;
  fn1('lisi')//fn1 is not a function
  fn1=function (name){
    var age;
    age = 20
    console.log(name,age)
  }

我的理解

变量提升：将变量声明提至当前scope的最顶部，赋值语句留在原地！所以在赋值语句前调用会出现undefined。

函数提升：分为两种，一种是纯函数提升，一种是函数表达式提升，函数表达式实质上就是变量提升，另外函数提升的优先级比变量提升高！

另外查阅

https://www.runoob.com/js/js-hoisting.html

https://www.cnblogs.com/liuhe688/p/5891273.html

https://www.cnblogs.com/damonlan/archive/2012/07/01/2553425.html

https://zhuanlan.zhihu.com/p/43607950