技術標籤：JavaScript·基礎web全棧學習

文章目錄

• • • 一、全域性變數的時候
    • 二、在區域性變數的時候
    • 三、函式表示式和函式宣告
    • • 3.1、當函式表示式和函式一樣的情況
    • 四、總結

一、全域性變數的時候

• 規則

(1)、在執行前提取script裡面的所有全域性變數，但是隻是宣告，不賦值
（2）、提升function,函式的提升是直接將整個函式整體提升到作用域的最開始位置，相當於剪下過去的樣子
（3）明提升到它所在作用域的頂端去執行，到我們程式碼所在的位置來賦值。

<script>
    console.log(num1);
    console.log(fn1);
    console.log(fn1());
    console.log(num2);


    var num1=10;
    function fn1() {
            var num2=10;
    }
</script>
 

• 總結

(未用變數宣告的變數是全域性變數),尤其是在函式裡面
函式沒有返回值的時候執行列印時undefined

<script>
    console.log(num1);
    console.log(fn1);
    console.log(fn1());
    console.log(num2);


    var num1=10;
    function fn1() {
        var num2=10;
        console.log("我是函式");
    }
</script>

• 我們可以看到函式宣告在後面是可以在前面執行的，但是變數不可以

二、在區域性變數的時候

• 規則和全域性一樣，在function內部進行變數提升

<script>
    var num1=10;
    function fn1() {
        console.log(num1);
      var  num1=20;
    }

    console.log(num1);
    fn1();
</script>

三、函式表示式和函式宣告

  //函式宣告
  function fn1(){
    console.log(12)
  }
  //函式表示式
  var fn2 = function () {
    console.log(222)
  }
//函式表示式
  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)
  }
<script>
    f1() ;//123
    f2() ;//error:f2 is not a function
    // 函式宣告
    function f1() {
        console.log(123)
    }
    // 函式表示式
    var f2 = function() {
        console.log(222)
    }
</script>
// 函式宣告-----提升
function f1() { 
  console.log(123)
}
var f2;//函式表示式按照變數方式提升
f1() //123
f2() //error:f2 is not a function
// 函式表示式
f2 = function() {
  console.log(222)
}
 

3.1、當函式表示式和函式一樣的情況

f1() ;//123
f1() ;//123
// 函式宣告
function f1() {
    console.log(123)
}
// 函式表示式
var f1 = function() {
    console.log(222)
}
f1();//222

• 函式表示式這個只會在執行的時候會覆蓋，但是宣告不會有影響

四、總結

• 通常JS引擎在正式執行之前進行一次預編譯，在這個過程中，會將函式宣告以及變數宣告提升至作用域的頂端，並且賦值是undefined，這個過程叫提升
• js 並不是在我們定義一個變數的時候，宣告完成之後立即賦值，而是把所有用到的變數全部宣告之後，再到變數的定義的地方進行賦值，變數的宣告的過程就是變數的提升。
• 過程

//提升之前
var a = 1;

var b = 2;

//預編譯之後

var a;

var b;

a = 1;

b = 2;

//提升之前

function foo() {

var a = 1;

console.log(a);

console.log(b);

var b = 2;

}

foo();

//提升之後

function foo() {

var a;

var b;

a = 1;

console.log(a); // 1 

console.log(b); // undefined 

b = 2;

}

foo();

變數在宣告提升的時候，是全部提升到作用域的最前面，一個接著一個的。但是在變數賦值的時候就不是一個接著一個賦值了，而是賦值的位置在變數原本定義的位置。原本js定義變數的地方，在js執行到這裡的時候，才會進行賦值操作，而沒有執行到的變數，不會進行賦值操作。所以變數的提升，提升的其實是變數的宣告，而不是變數的賦值。