ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptの実践で注意すべきポイントまとめ

JavaScriptの実践で注意すべきポイントまとめ

伊谢尔伦
伊谢尔伦オリジナル
2017-07-26 13:44:261009ブラウズ

作成するすべての関数は大文字と小文字を区別します

JavaScript では一重引用符 (「文字列」) と二重引用符 (「文字列」) の間に特別な違いはありません。どちらも文字列の作成に使用できます。ただし、一般原則として。
JavaScript では、スクリプトはオーバーロードをサポートしていません。XHTML 仕様では、すべての XHTML 属性値を二重引用符で囲む必要があるため、ほとんどの WEB 開発者は二重引用符の代わりに単一引用符を使用することを選択します。関数定義は実行中に考慮されませんが、スコープ チェーンで定義された最後の関数が直接使用されます。これは、同じ名前の関数のインスタンスが常に 1 つだけ存在することを意味します。

クロージャは、外部関数が完了した後でもその外部関数にアクセスできる内部関数を指します。実行プロパティと終了プロパティ。変数またはメソッドが参照されると、JavaScript はオブジェクトの実行パスによって形成された使用ドメイン チェーンに沿って使用ドメインを解析し、変数の最後に定義された値を探し、見つかったらその値を使用します。

function initAnchors(event){ 
  for (var i=1; i <=3; i++){ 
    var anchor = document.GetElementById(&#39;anchor&#39; + i); 
    anchor.attachEvent(&#39;onclick&#39;, function() {  
    alert(&#39;my id is anchor&#39; + i); 
    }); 
  } 
}

ページ内にアンカー 1 からアンカー 3 までの ID を持つ 3 つの A 要素があるとします。プログラムは 3 つの A 要素をクリックすると「私の ID はアンカー X です」と表示されますが、実際の操作は次のようになります。各 A 要素をクリックすると、「私の ID はアンカー 4 です」と表示されます。これはなぜでしょうか。クリック イベントの発生時に i の値が実際にドメイン チェーンから取得され、initAnchors() が実行され、i の値が 4 に等しいためです。解決策は次のとおりです。

function registerAnchorListner(anchor,i){ 
  anchor.attachEvent(&#39;onclick&#39;, function() {  
    alert(&#39;my id is anchor&#39; + i); 
  }   
} 
function initAnchors(event){ 
  for (var i=1; i <=3; i++){ 
    var anchor = document.GetElementById(&#39;anchor&#39; + i); 
    registerAnchorListner(anchor,i); 
  } 
} 
var anchor = document.GetElementById(&#39;anchor&#39; + i); 
anchor.attachEvent(&#39;onclick&#39;, function() { 
alert(&#39;my id is anchor&#39; + i); 

});

オブジェクトを反復します。反復は、次のようにスクリプトを作成するときによく使用されます:

var list = [1,2,3,4]; 
for(var i = 0;i < list.length; i++){ 
  alert(list); 
}

もう 1 つの代替の反復方法は、for ループを使用して、(in)list にある各属性を走査することです:

for(var i in list){ 
  alert(list); 
}

list は Array オブジェクトであるため、この時点では、前の反復メソッドを使用した場合と同じ結果が得られます。
ただし、次のように、for(var i in item) メソッドを使用して配列に似ているが配列ではないオブジェクトを操作する場合は特に注意する必要があります

var all=document.getElementsByTagName(&#39;*&#39;); 
for(var i in all){ 
  //对照all元素进行某些操作 
}

この反復プロセスでは、i の値は length と等しくなります、item、およびnamedItem。これにより、コード内で予期しないエラーが発生する可能性があります。場合によっては、オブジェクトの hasOwnProperty() メソッドを使用して、この問題を回避できます。オブジェクトのプロパティまたはメソッドが継承されていない場合、hasOwnProperty() メソッドは true を返します。つまり、ここでのチェックには他のオブジェクトから継承されたプロパティやメソッドは含まれず、配列に割り当てられた要素など、特定のオブジェクト自体に直接作成されたプロパティのみが含まれます。したがって、このチェックを for ループで使用すると、長さは配列 all の真の属性ではなく、配列 all を派生する NameNodeMap オブジェクトから継承される属性であるため、ループは長さ属性をスキップします。

以上がJavaScriptの実践で注意すべきポイントまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。