JavaScript について知らなかったこと - 変数の巻き上げ

序文

JavaScript の場合、var a = 2; は 2 つの操作です。var a はコンパイルフェーズのタスク、a = 2 は実行フェーズのタスクです。したがって、すべての宣言は、コードが実行される前に、それぞれのスコープの最上位に「移動」されます。このプロセスは「促進”。

---

1. 変数の宣言と代入?

宣言が最初にあり、割り当てが続きます。
宣言自体のみがホイストされ、代入やその他の実行ロジックはそのまま残ります。

console.log(a); // undefined
var a = 10;

// 等价于
var a;
console.log(a); // undefined
a = 10;

2. 関数宣言

関数宣言自体はホイストされており、ただし、関数式の代入を含む演算はホイスティングされません。(通常の変数に関数を割り当てた動作と理解できます)。

// 函数提升
bar();  // 1
function bar(){
    
    
    console.log("1");
}

// 等价于
function bar(){
    
    
    console.log("1"); 
}
bar();  // 1

// 函数表达式提升
foo(); // TypeError
bar(); // ReferenceError
var foo = function bar(){
    
    
    //...
}

// 等价于
var foo;
foo(); // TypeError
bar(); // ReferenceError
foo = function(){
    
    
    var bar = ...
}

3. 機能の優先順位

関数が最初にプロモートされ、通常の変数が後でプロモートされます。
以下の例: 関数宣言は通常の変数の前に昇格されるため、後続の var foo は繰り返し宣言となり無視されます。

foo(); // 1
var foo;
function foo() {
    
    
    console.log("1");
};
foo = function() {
    
    
    console.log("2");
};

// 等价于
function foo() {
    
    
    console.log("1");
};
foo(); // 1
foo = function() {
    
    
    console.log("2");
};

---

要約する

特に通常の var 宣言と関数宣言が混在している場合は、重複した宣言を避けるように注意してください。そうしないと、多くの問題が発生します。