エラー分析: 9 つの JavaScript トラップとコメント_JavaScript スキル

JavaScript の 9 つの落とし穴から、JavaScript のよくある 9 つの落とし穴を紹介します。これはそれほど深い技術的な問題ではありませんが、注意を払うことでプログラミングが容易になり、これは「生活を楽にする」と呼ばれるもので、いくつかのトラップについて著者はさまざまなコメントをしています。

1. 最後のコンマ
このコードのように、最後のコンマに注目してください。これは言語学的観点からは適切です (Python の同様のデータ型の辞書ではこれが可能です)。 IE は構文エラーを報告しますが、言語は不明瞭です。人間の目で確認できるのは数千行のコードだけです。

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]


2. これ
の参照は次のコードのように変更されます:

<input type="button" value="Gotcha!" id="MyButton">
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

あなたほど上手ではありません 答えが「JavaScript ルール」ではないことを祈ります。 MyObject.ClickHandler を実行すると、コードの赤い行で、this の参照は実際には document.getElementById("theText") の参照を指します。これは次のように解決できます: <input type="button" value="Gotcha!" id="theText">

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

基本的に、これは JavaScript のスコープの問題です。調べてみると、解決策が複数あることがわかります。

3. ID 泥棒
JavaScript で HTML ID と同じ変数名を使用しないでください。次のコード:

<input type="button" id="TheButton">

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、
を実行するために更新する必要があります]

IEオブジェクトが未定義のエラーであることを報告します。

4. 文字列は、

のように最初に一致する のみを置き換えます。

<script> var theObj = { city : "Boston", state : "MA", } </script> <script> var MyObject = function () { this.alertMessage = "Javascript rules"; this.ClickHandler = function() { alert(this.alertMessage ); } }(); document.getElementById("theText").onclick = MyObject.ClickHandler </script>[Ctrl A すべて選択 注: <script> var MyObject = function () { var self = this; this.alertMessage = "Javascript rules"; this.OnClick = function() { alert(self.value); } }(); document.getElementById("theText").onclick = MyObject.OnClick </script>外部 Js を導入する必要がある場合は、<script> TheButton = get("TheButton"); </script> を実行するために更新する必要があります]<script> var fileName = "This is a title".replace(" ","_"); </script>
実際、結果は「This_is a title」になります。JavaScript では、String.replace の最初のパラメータは正規表現である必要があります。したがって、正しいアプローチは次のとおりです:


var fileName = "これはタイトルです".replace(/ /g,"_");


5.場合によっては、mousein
を意味することもありますが、これはイベントのバブリングによって引き起こされます。 IEにはmouseenterやmo​​useleaveがありますが、標準ではありません。著者は、この問題を解決するために YUI などのライブラリを使用することをお勧めします。

6. parseInt は基本システムに基づいています
これは常識ですが、多くの人は parseInt に基本システムを指定する 2 番目のパラメーターがあることを無視しています。たとえば、parseInt("09") の答えが 9 だと思うなら、それは間違いです。ここでは、文字列は 0 で始まり、parseInt は 8 進数で処理するため、8 進数では 09 は無効であり、ブール値 false は数値に変換されて 0 になります。したがって、正しいアプローチは parseInt(" です。 09", 10).

7. for...in... はすべてを走査します
次のようなコードがあります:


var arr = [ 5,10, 15]
var total = 1;
for ( var x in arr) {
total = total * arr[x]
}

;そうじゃないですか？しかし、ある日、それが機能しなくなり、私に返される値は NaN (ハロー) になりました。先ほどライブラリを紹介しました。このようにして、このライブラリは Array のプロトタイプを書き換えていることがわかり、arr にはもう 1 つの属性 (メソッド) があり、for...in... がそれを走査します。したがって、次のようにする方が安全です:


for ( var x = 0; x total = total * arr[x]; }

実際、これは基本クラスのプロトタイプを汚染することによって引き起こされる害の一例でもあります。

8. イベント ハンドラーの罠
これは実際には、イベント ハンドラーがオブジェクトの属性として使用される場合にのみ存在する問題です。たとえば、window.onclick = MyOnClickMethod のようなコードは、以前の window.onclick イベントを上書きし、IE のコンテンツがリークする可能性があります (また最悪です)。 IE が DOM 2 イベント登録をサポートしない前は、作成者は、YUI などのライブラリを使用して問題を解決することを提案していました:


YAHOO.util.Event.addListener(window, "click", MyOnClickMethod) ;

これも常識ですが、初心者は間違いを犯しやすいです。

9. フォーカス ポーカス
新しい入力テキスト要素を作成し、そこにフォーカスを移動します。


var newInput = document .createElement("input");
document.body.appendChild(newInput);
newInput.select();エラー（何度も吸う）。原因としては、 focus() を実行した時点で要素がまだ存在していないことが考えられます。したがって、実行を遅らせることができます:


var newInput = document.createElement("input");
newInput.id = "TheNewInput";
document.body.appendChild(newInput) ;
setTimeout(function(){ //ここではクロージャを使用して書き直しました。興味がある場合は、元のテキストと比較してください。
document.getElementById('TheNewInput').focus();
document.getElementById(' TheNewInput').select();}, 10);

実際には、JavaScript にはさらに多くの落とし穴があり、そのほとんどはパーサーの不適切な実装によって引き起こされます。これらのことは通常、教科書には載っておらず、開発者間の経験の共有に頼るしかありません。ありがたいことに、私たちはインターネット時代に生きており、遭遇する質問の多くは通常 Google で見つけることができます。