什么是声明提前？

在了解声明提前之前，你得明白函数的定义方式和变量的定义方式以及作用域的概念。

1、函数创建方式

【声明方式】：
 语法：
     function 函数名(){
         函数体;
     }
 【直接量方式】:
 语法：
     var 函数名 = function(){
         函数体;
     }
     

2、作用域

 【全局作用域】：
      全局变量和全局函数，在页面任何位置都可以调用
 【函数作用域】：
      局部变量和局部函数，在【当前函数调用是内部可用】
      
 变量使用规则：优先使用局部的，局部没有找全局，全局没有就报错
 
 缺点：
 1、千万不要再函数中对未声明的变量直接赋值，否则会引起全局污染 -- 全局污染（全局没有的东西，突然被局部添加上）
     解决：使用变量之前先声明变量
 2.局部可以使用全局变量，但是全局不能使用局部的
     解决：函数添加return，返回结果/值

在程序正式之前，将var声明的变量(轻)和function【声明】的函数(重)集中提前到当前作用域的顶部但赋值留在原地

注：函数一定是【声明方式】创建的，而不是直接量方式创建的！！！

举例：

例1：

代码：
    var a;
    console.log(a);//undefined
    a=1;
    console.log(a);//1

结果：undefined 1
原理：定义一个变量a不赋值，直接输出会输出a的默认值为undefined，接着赋值给a=1所以输出结果为1;

例2：

代码：
    var a=10;
    function f1(){
        console.log(a); //undefined
        var a=20;
        console.log(a); //20
    }
    f1();
    console.log(a); //10
    
结果：undefined 20 10
等同于：
    var a = 10;
    function f1(){
        var a;
        console.log(a);
        a = 20;
        console.log(a);
    }
    f1();
    console.log(a);

例3：

代码：
    function fn(){
        console.log(1);
    }
    fn(); //2
    function fn(){
        console.log(2);
    }
    fn();  //2
    var fn=100;
    fn();  //报错:Uncaught TypeError: fn is not a function,因为当前的fn值为100，而不是一个函数
    
结果：2 2 错误
等同于：
   var fn;
   function fn(){
       console.log(1);
   }
   function fn(){
       console.log(2);
   }
   fn();
   fn();
   fn = 100;
   fn();

例4：

代码：
    function fn(){
        console.log(1)
    }
    fn(); //1
    var fn=100;
    var fn=function(){
        console.log(2)
    }
    fn(); //2
    
结果：1 2
等同于：
    var fn;
    var fn;
    function fn(){
        console.log(1);
    }
    fn();
    fn = 100;
    fn = function(){
        console.log(2);
    }
    fn();

例5：

代码：
   var fn=function(){
        console.log(1);
    }
    fn(); //1
    function fn(){
        console.log(2);
    }
    fn(); //1
    var fn=100;
    function fn(){
        console.log(3)
    }
    fn(); //报错：Uncaught TypeError: fn is not a function
    
结果：1 1 报错
等同于：
   var fn;
   function fn(){
       console.log(2);
   }
   function fn(){
        console.log(3)
   }
   fn = function(){
       console.log(1);
   }
   fn();
   fn();
   fn = 100;
   fn();

例6：

代码：
    function fn(){
        console.log(1)
    }
    fn(); //3
    var fn=function(){
       console.log(2);
    }
    function fn(){
       console.log(3)
    }
    var fn=function(){
       console.log(4);
    }
    fn(); //4
    
结果：3 4
等同于：
    var fn;
    function fn(){
        console.log(1);
    }
    function fn(){
        console.log(3);
    }
    fn();
    fn = function(){
        console.log(2);
    }
    fn = function(){
        console.log(4);
    }
    fn();

例7：

代码：
    function f1(){
        console.log(a); //10
        a=20;
        console.log(a); //20
    }
    console.log(a);  //undefined
    var a=10;
    f1();
    console.log(a);  //20
    a=100;
    console.log(a);  //100
    
结果：undefined 10 20 20 100
等同于：
    var a;
    function f1(){
        console.log(a)
        a = 20;
        console.log(a);
    }
    console.log(a);  
    a = 10;
    f1();
    console.log(a);
    a = 100;
    console.log(a);