JS的預解析

JS的預解析是指在代碼執行之前，JavaScript引擎會先對代碼進行一次掃描，將變數聲明和函數聲明提升到當前作用域的頂部，以便在代碼執行時能夠正確地訪問這些變數和函數。這個過程也被稱為“提升”。

具體來說，在預解析過程中，JavaScript引擎會將函數聲明和變數聲明提升到當前作用域的頂部，而不管它們實際上在代碼中的位置。這意味著，無論變數和函數聲明出現在代碼的哪個位置，它們在代碼執行之前就已經被處理了，可以在代碼中任何位置被訪問。

需要註意的是，只有函數聲明和變數聲明才會被提升，而不是變數的賦值操作。如果變數聲明和賦值操作同時出現在同一行代碼中，只有變數聲明會被提升到作用域頂部，而變數的值仍然會在代碼執行時賦值。

預解析在JavaScript中的具體表現有以下幾點：

1. 函數聲明提升 ：在預解析階段，JavaScript引擎會將函數聲明（而非函數表達式）提升到作用域頂部。這意味著，在代碼中函數聲明可以出現在函數調用之後，甚至可以出現在函數內部，但仍然可以被正確識別和調用。註意， 函數聲明既提升也定義 。

例如，下麵的代碼中，函數 foo() 在預解析階段被提升到了作用域頂部，因此可以在函數 bar() 內部被正確調用：

bar(); // hello

function bar() {
  foo(); // 可以調用函數 foo()
  
  function foo() {
    console.log('hello');
  }
}

2. 變數聲明提升 ：在預解析階段，JavaScript引擎也會將變數聲明提升到作用域頂部，但是不會提升變數的賦值操作。這意味著，變數可以在聲明之前被使用，但是如果在聲明之前進行賦值操作，會得到undefined。

例如，下麵的代碼中，變數 x 在聲明之前被使用，但是在聲明之前進行賦值操作會得到undefined：

console.log(x); // undefined

var x = 10;

3. 函數表達式不提升 ：在預解析階段，JavaScript引擎不會將函數表達式提升到作用域頂部，只會提升變數聲明。因此，在使用函數表達式定義的函數之前，必須先定義變數。

例如，下麵的代碼中，函數 foo() 是通過函數表達式定義的，因此必須先定義變數 foo 才能調用該函數：

foo(); // Uncaught TypeError: foo is not a function

var foo = function() {
  console.log('hello');
};

JS的預解析還有一些需要註意的細節，包括以下幾點：

1. 函數聲明和變數聲明的作用域 ：在預解析階段，函數聲明和變數聲明的作用域是整個函數或全局作用域。這意味著，在函數內部聲明的函數和變數可以在整個函數內部被訪問，而在全局作用域聲明的函數和變數可以在整個腳本中被訪問。

2. 函數聲明和變數聲明的優先順序 ：在預解析階段，函數聲明的優先順序高於變數聲明。這意味著，如果同名函數和變數同時聲明，函數聲明會覆蓋變數聲明。

例如，下麵的代碼中，變數 x 和函數 x() 同名，但是在預解析階段，函數 x() 會覆蓋變數 x ：

console.log(x); // function x() {...}

var x = 10;

function x() {
  console.log('hello');
}

3. 非全局作用域的預解析 ：在非全局作用域（如函數作用域）中，預解析只會發生在該作用域內。這意味著，在函數內部聲明的函數和變數只會被提升到該函數作用域的頂部，而不會影響到其他函數或全局作用域。

例如，下麵的代碼中，函數 bar() 內部的變數 x 只會在函數作用域內被提升到作用域頂部，而不會影響到全局作用域或其他函數的作用域：

function foo() {
  bar();

  function bar() {
    console.log(x); // undefined
    var x = 10;
  }
}

foo();

總的來說，預解析是JavaScript中的一個重要概念，可以幫助我們更好地理解變數和函數的作用域和生命周期。瞭解預解析的規則和特點，可以幫助我們編寫更加規範和可讀性更好的JavaScript代碼。

當然，現在用了let、const和函數式表達式等，可以避免因為變數提升等帶來的小麻煩。