javascript_javascript スキルにおける変数スコープと変数プロモーションの詳細な紹介

変数スコープ
「変数のスコープは、変数が存在するコンテキストを表します。アクセスできる変数と、変数にアクセスする権限があるかどうかを指定します。」

変数のスコープはローカルスコープとグローバルスコープに分かれます。

ローカル変数 (関数レベルのスコープ)
他のオブジェクト指向プログラミング言語 (C、Java など) とは異なり、JavaScript にはブロックレベルのスコープ (中括弧で囲まれた) がありません。 ; の場合、JavaScript には関数レベルのスコープがあります。つまり、関数内で定義された変数は、関数内で、または関数内の関数によってのみアクセスできます (クロージャを除く。これについては数日以内に記事を書きます)。 。

関数レベルのスコープの例:

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

var name = "Richard" ;

function showName () {
var name = "Jack" // この showName でのみアクセス可能 function
console.log (name); // Jack
}
console.log (name); // リチャード: グローバル変数

にはブロック スコープがありません:

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

var name = "Richard" ;
// この if ステートメント内のブロックは、名前変数のローカル コンテキストを作成しません
if (name) {
name = "Jack"; // この名前はグローバル名変数であり、ここでは「Jack」に変更されています
console.log (name); // Jack: 依然としてグローバル変数
}

// ここで、name 変数は同じグローバル名変数です。ただし、if ステートメントで変更されました
console.log (name) // Jack;

// var キーワードを使用することを忘れないでください。
// var キーワードを使用せずに変数を宣言すると、その変数はグローバル変数になります。
// ローカル変数を var キーワードで宣言しない場合、ローカル変数はグローバル スコープの一部になります
var name = "Michael Jackson";

function showCelebrityName () {
console.log (名前);
}

function showOrdinaryPersonName () {
name = "Johnny Evers";
console.log (名前);
}
showCelebrityName (); // Michael Jackson

// 名前はローカル変数ではなく、単にグローバル名変数を変更するだけです
showOrdinarypersonName () // Johnny Evers

//グローバル変数は、有名人の名前ではなく、Johnny Evers になりました
showCelebrityName () // Johnny Evers

// 解決策は、var キーワード
関数 showOrdinaryPersonName (); を使用してローカル変数を宣言することです。 {
var name = "Johnny Evers"; // 現在、name は常にローカル変数であり、グローバル変数は上書きされません
console.log (name);
}
// ローカル変数優先順位はグローバル変数よりも大きいです
//グローバル スコープの変数がローカル スコープで再度宣言された場合、ローカル スコープでこの変数を呼び出すと、ローカル スコープで宣言された変数が最初に呼び出されます:
var name = "Paul";

function users () {
// ここで、name 変数はローカルであり、グローバル スコープ内の同じ名前の変数より優先されます
var name = "Jack";

// 名前の検索は、グローバル スコープで関数の外側を調べようとする前に、関数内で開始されます
console.log (name); >
ユーザー () // ジャック
;

グローバル変数

関数の外で宣言されたすべての変数はグローバル スコープ内にあります。ブラウザ環境では、このグローバル スコープは Window オブジェクト (または HTML ドキュメント全体) です。
関数の外で宣言または定義されたすべての変数はグローバル オブジェクトであるため、この変数はどこでも使用できます。たとえば、

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

// 名前と性別は含まれていませんfunction

var myName = "zhou";
var sex = "male";

//それらはすべてウィンドウ オブジェクト内にあります
console.log(window.myName); // paul
console.log('sex' in window);

変数が var キーワードを使用せずに初めて初期化/宣言された場合、その変数は自動的にグローバル スコープに追加されます。

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

function showAge(){
//年齢の初期化時には var キーワードは使用されないため、グローバル変数になります
age = 20;
console.log(age);
}

showAge(); //20
console.log(age); //年齢はグローバル変数であるため、ここでも出力は 20

setTimeout 関数はグローバル スコープで実行されます

setTimeout の関数はグローバル スコープ内にあるため、関数内で this キーワードが使用される場合、this キーワードはグローバル オブジェクト (ウィンドウ) を指します。

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

var Value1 = 200;
var Value2 = 20 ;
var myObj = {
Value1 : 10,
Value2 : 1,

caleculatedIt: function(){
setTimeout(function(){
コンソール.log( this.Value1 * this.Value2);
}, 1000);
}
}

myObj.caleculatedIt() //4000;

グローバル スコープの汚染を避けるために、通常、宣言するグローバル変数はできるだけ少なくします。
変数のホイスト
すべての変数宣言は、関数の先頭 (変数が関数内にある場合) またはグローバル スコープの先頭 (変数がグローバル変数の場合) にホイストされます。例を見てみましょう:

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

function showName () {
console .log ( "名: " name);
var name = "Ford";
console.log ("姓: " name);
}

showName ();
// 名: unknown
// 姓: Ford

// unknown が最初に出力される理由は、ローカル変数名が関数の先頭にホイストされているためです
//つまり、最初に呼び出されるのはこのローカル変数です。
// コードが JavaScript エンジンによって実際に処理される方法は次のとおりです。

function showName () {
var name; / 名前がホイストされます (割り当てが以下で行われるため、この時点では未定義であることに注意してください)
console.log ("First Name: " name) // First Name: unknown

name = "Ford "; // 名前には値が割り当てられています

// 現在の名前は Ford
console.log ("Last Name: " name); // 姓: Ford
}

関数宣言は変数宣言を上書きします
関数宣言と変数宣言 (注: これは単なる宣言であり、値が割り当てられているわけではありません) がある場合、変数名と関数名これらはすべて同じであるため、外側のスコープの先頭にプロンプ​​トが表示されますが、関数の優先順位が高いため、変数の値は関数によって上書きされます。

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

// 変数と関数は両方ともnamed myName
var myName;?
function myName () {
console.log ("Rich");
}

// 関数宣言は変数名をオーバーライドします
console.log(myName のタイプ);

ただし、この変数または関数に値が割り当てられている場合、他の変数または関数でそれを上書きすることはできません。

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

// ただし、この例では変数assign は関数宣言をオーバーライドします
var myName = "Richard"; // これは関数宣言をオーバーライドする変数割り当て (初期化) です。

function myName () {
console.log ("リッチ") ;
}

console.log(typeof myName); // 文字列

最後のポイント、厳密モードでは、最初に宣言せずに変数に値を代入すると、エラーが報告されます。