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

今天看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)
  }