JavaScript 変数のscope_javascript スキルの使用における一般的なエラーの概要

今日、rainweb のブログでこの非常に良い記事を見つけたので、これを共有する必要があると感じました。この記事を注意深く読むと、js のスコープについての理解が新たなレベルに上がると思います。

序文: JavaScript の変数スコープは、しばしば頭痛や混乱を引き起こす問題です。以下は、10 の質問を通して、頻繁に発生するエラーが発生しやすい状況を簡単にまとめたものです。

質問 1

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

var name = ' casper'; // 疑いなく出力: casper

コードをコピーします。 > コードは次のとおりです: alert(name); //エラー: 存在しない変数が使用された場合でもオブジェクトが未定義であるため、エラーが発生します age = 24; // 特に問題はありませんが、年齢は定義されていませんか? Rhinoceros の本を読んで理解してください。 //未定義の変数に値を代入すると、以下と同等のグローバル変数が作成されます。 var age = 24

質問 3

コードをコピー

コードは次のとおりです。 alert(name) //name は以下で定義されています。ここにエラーがあるはずです。 ?間違っている！ここに表示されます: unknown var name = 'casper';

説明: JavaScript コードが解析されると、var で宣言された変数が検索され、事前に宣言されます。プロセスは次のとおりです。

コードをコピーします

コードは次のとおりです。 var name; / / name 変数を宣言するだけですが、値は割り当てられていないため、次のようになります: unknown alert(name);

質問 4

コードをコピーします

コードは次のとおりです。 var name = 'casper' function show(){ alert(name);

name = 'hello' // グローバル変数名の値を 'hello' に変更します

}
show(); // 出力: casper


質問 5

コードをコピーします

コードは次のとおりです: var name = 'casper'; function show(){alert(name); //出力: 未定義、死にたいですか? var name = 'hello'; // 注: 質問 4 と比較してください。ここでは名前の前に追加の var があります。

} show( : 外部グローバル変数と同じ名前のローカル変数がある場合、ローカル変数が最初に使用されます。ここに名前があります)

function show( ){ var name;alert(name); name = 'hello' }
質問 6



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

var list = [1,2,3];
function show(){ if(typeof list === '未定義')
{ list = [ ]; }
alert(list.length);

show(); // 結果: 3、一目で分かりますか? 質問 7 に進んでください。 🎜> 質問 7

コードをコピーします

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




>var list = [1,2,3];

function show(){
if(typeof list === 'unknown' )
{ var list = [];質問 6 では、もう 1 つあります。 var

} alter(list.length) }; show(); //結果 :0、あなたは突然死にたいと思いますか? 説明: JavaScript にはブロックレベルのスコープ (つまり、{} によって制限されるスコープ) がありません。関数内で宣言されたすべての変数は、どこにあるかに関係なく、ステートメントは関数全体で定義されます。これは C とは異なります。考え方をすぐに変えて時代に遅れないようにしましょう それでは、show メソッドの実際の内部解析ロジックを見てみましょう

Copy code


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


function show(){ var list; //list はローカル変数であり、ここではまだ使用できません Assignment
if(リストの種類 === '未定義'){

リスト = [] }
アラート(リストの長さ) };
質問 8

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

alert(typeof show) ); / /結果: 関数、あなたの目を信じてください、正しく読みました。
function show(){}

説明: の form ステートメントに似た JavaScript コードの解析プロセス。 function show() 関数は、var で宣言された変数と同様に、関数の宣言と定義は同時に完了しますが、var で宣言された変数の代入は後で完了するという違いがあります。
質問 9

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

alert(typeof show) / /結果: 未定義です。もう一度磨き直してください。目、正しく読みました。
var show = function(){}

説明: 関数を定義する 2 つのプロセスにはいくつかの違いがあります。関数定義と関数式の使用
関数定義: function show(){}
関数式: var show = function(){}
関数定義メソッドを使用して、関数を事前に定義します。関数式を使用 宣言方法と関数定義は var で宣言したローカル変数と同じです。関数宣言は事前に行われますが、関数定義位置は変わりません。

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

var show;
show = function(){

質問 10

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

var data = {name:'casper'};
function data(){ warning('casper') }
data(); //TypeError: オブジェクトは関数ではありません

モニターを壊したいという衝動はありますか? 。 。この時点ではデータは実際には {name:'casper'} であり、オブジェクトは関数として呼び出されるため、エラーが報告されます
前述したように、関数 (関数定義を通じて) によって宣言された変数と var 宣言は拡張されます。順序は次のとおりです:

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

関数 data(){alert('casper');
} var data = {name:'casper'};

、結果は異なります:

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

var data = {name:'casper'};
var data = function (){ //関数式で関数を宣言
alert('casper') }
data(); // 結果: casper

の組み合わせ Wen が次のようにプロセスを推測するのは難しくありません:

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

var data = {name:'casper'}; /結果: キャスパー