JavaScript での変数のホイスト Hoisting_javascript のヒント

というのは、この記事を書いているときに百度で情報を探していたところ、庭友達の記事を見つけたので、とてもよく書かれていたのですが、書いた後で諦めたくなかったので、いろいろ参考にさせていただきました。それから！ ~~

[翻訳] JavaScript Scoping and Hoisting

ご理解のほどよろしくお願いいたします。

1 つ。犯罪現場

まず、非常に単純なコードを見てみましょう:

コードをコピーします コードは次のとおりです。

var v='Hello World';
alert(v);

これについては疑いの余地なく、「Hello World」が表示されます。 。はい、続けましょう。

コードの一部を調べています:

コードをコピーします コードは次のとおりです:

var v='Hello World';
(function(){
alert(v);
})()

実行後、予想どおり、「Hello World」が表示されます。

さて、ここからが楽しい部分です。次に、次のコードを確認します。

コードをコピーします コードは次のとおりです:

var v=' Hello World';
(function(){
alert(v);
var v='愛してる';
})()

これは面接の質問です。面接官は結果はどうですかと尋ねます。どう答えますか？

まずは結果を見てみましょう!

結果は未定義ですか?それはあなたが上で考えたことと同じですか？

わかりました、神秘的になろうとするつもりはありません。実は、ここに罠が隠されています - JavaScript の変数ホイスティング (ホイスティング)

2.徹底した分析

それでは、プロモーションとは何かを説明しましょう。その名の通り、下にあるものを上に持ち上げるという意味です。 JSでは、後ろで定義したもの（変数や関数）を前の定義に昇格させることです。

改善点を説明する前に、まず js のスコープの問題を見てみましょう。

スコープは、JavaScript 初心者にとって最も混乱する部分の 1 つです。実際、初心者だけでなく、スコープを完全に理解できない経験豊富な JavaScript プログラマーにもたくさん会いました。 JavaScript のスコープが非常に複雑である理由は、JavaScript が C 言語ファミリーのメンバーに非常によく似ているためです。次の C プログラムを見てください:

コードをコピーします コードは次のとおりです:

#include
int main() {
int x = 1; // 1
if (1) ) {
int x = 2;
printf("%d, ", x) // 2
}
printf("%dn", x); }

このプログラムの出力は 1,2,1 です。これは、C シリーズ言語にはブロック レベルのスコープがあり、if ステートメントと同様に、新しい変数がこのブロック レベルのスコープで宣言されるためです。これらの変数は外側のスコープには影響しません。しかし、JavaScript の場合はそうではありません。 Firebug で次のコードを試してください:

コードをコピーします コードは次のとおりです:

var x = 1;

console.log(x); // 1
if (true) {
console.log(x); 🎜> }
console.log(x);// 2



このコードでは、Firebug は 1、2、2 を表示します。これは、JavaScript には関数レベルのスコープがあるためです。これは C ベースの言語とはまったく異なります。 if ステートメントと同様、ブロックは新しいスコープを作成しません。新しいスコープを作成するのは関数のみです。

C、C#、C#、または Java に精通しているほとんどのプログラマにとって、これは予期せぬことであり、歓迎されません。幸いなことに、JavaScript 関数には柔軟性があるため、この問題には解決策があります。関数内に一時スコープを作成する必要がある場合は、次のように実行します。





コードをコピーします

コードは次のとおりです。 : function foo() { var x = 1;

if (x) {

(function () {
var x = 2;
// 他のコード
}());
}
// x は 1 のままです。
}



この側面は非常に柔軟であり、ブロック内だけでなく、一時的なスコープを作成する必要があるどこでも使用できます。ただし、時間をかけて JavaScript のスコープを理解することを強くお勧めします。これは本当に強力で、この言語の私のお気に入りの機能の 1 つです。スコーピングをよく理解するとホイスティングも理解しやすくなります。

2.1 変数の昇格
変数の昇格は非常に簡単で、変数を関数の先頭に持ち上げることです。説明する必要があるのは、変数のプロモーションは変数の宣言のみをプロモートし、代入はプロモートしないということです。

例:

3 つの変数を定義します:

コードをコピー コードは次のとおりです。

(function(){
var a='One';
var b='Two';
var c='Three';
} )()

実際には次のようになります:

コードをコピー コードは次のとおりです。次のように:

(function(){
var a,b,c;
a='One';
b='Two';
c= 'Three';
})()

この時点で変数が発生します。

それでは、最初のコードに戻りましょう。エラーが報告されるのはなぜですか?実際、上記の変数プロモーションのオリジナルと js のスコープ (ブロックレベルのスコープ) に基づいた分析によれば、上記のコードは実際には次のようになります。

コードをコピー コードは次のとおりです。

var v='Hello World';
(function(){
var v;
alert(v) ;
v='I love you';
})()

プロンプトに「未定義」と表示されるのはそのためです。

ここから、JS コードを記述するときは、上で示した例 var a, b, c; のように、ブロックレベルのスコープの先頭に変数を置く必要があることも学びました。事故を防ぎます。

2.2 機能のリフティング
機能のリフティングとは、機能全体を前面に押し出すことです。

jsコードを書く場合、関数表現と関数宣言の2つの書き方があります。ホイストできるのは関数宣言フォームのみであることに注意することが重要です。

関数宣言方法の改善 [成功]

コードをコピー コードは次のとおりです。 🎜>

function myTest(){
foo();
function foo(){
alert("私は foo からです");
}
myTest() ;

関数式モードの昇格 [失敗]

コードをコピー コードは次のとおりです:

function myTest(){

foo();
var foo =function foo(){
alert("I am from foo");
}
}
myTest();


結果は次のとおりです:

左側でエラーが報告されました。あなたに嘘はありません。

ここで大まかに理解できるはずです。 ~
ははは。 。
今後とも Beta Rabbit をよろしくお願いいたします

作者: Lanny☆Lan Dongcai