javascriptの中で非歩と閉鎖が生む困惑

9659 ワード

JavaScript

ここでは特に何を話すつもりはありません.何がクローズドですか?これらの内容はブログの園でもういっぱい書きました.しかし、これらの内容が多く出てきました.初心者が全部握っているという意味ではないです.ですから、よくある例を使って分析してみます.この問題に対して困惑している学生に悟りを覚えることができるかもしれません.前のブログ「一つの面接問題からクローズドを分析する」では、クローズドとは何かを分析しましたが、その例の応用シーンは複雑で、初心者には不向きです.ここではもっと一般的な例を挙げます.
もしこのような需要があるならば、メニューの中の各項目をクリックして、クリックした内容を表示して、対応する内容のページは以下の通りです.

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
</head>
<body>
 <ul>
     <li>list 0</li>
     <li>list 1</li>
     <li>list 2</li>
     <li>list 3</li>
     <li>list 4</li>
 </ul> 
 <script type="text/javascript">

 </script>
</body>
</html>

まず問題のあるjsコードを来ました.これはこのように実現されました.

  var items =  document.querySelectorAll('li');
  var len = items.length;

  for(var i =0;i<len;i++){
      items[i].onclick = function(){
          alert('list '+i)
      }
  }

この時、私はすべてのliラベルが邦に決められてクリックしたことを発見しました.とてもよさそうですが、いくつか注文したら、問題が来ました.私はどのlistタグを注文しても、弾いたのは全部list 5です.これはまたどんな原因ですか?
熱心なネットユーザーはすぐに「イジェクトしたiは循環後の値だから」と返答しました.
1:弾いたのは循環した後の値ですが、なぜそれぞれのliタグに事件が重なったのですか?
2:第5のli元素だけが邦の事件に行くことができるのではないですか?ページの上根本はこの元素を貯蓄しないで、クリックする時ではないですか?間違いを報告するべきですか?
このような返答を説明して、問題をはっきり説明していないだけではなくて、かえって更に多くの疑問を増加して、まさかそうではありませんか?ここで疑問を生む根本的な原因は非同期の過程があることにあります.循環コードは同期で、クリック操作は非同期です.
このプロセスをゲームで実証します.
運動場には4人の子供(4つのli元素に対応)が立っています.先生は順番にゲームのルールを教えてくれます.(循環に対応して)ルールはこのようです.ゲームが始まりました.先生は黒板に1を書きました.悪いと思いましたが、2に変えました.そして3に変えました.最後に4に変えました.子供たちは先生が直してくれるのを見ています.長い間ゲームを始めました.
どちらの子供も論点がなくて、彼が答えたのは全部「4」です.彼らが見たのは先生が最後に書いた数字です.
私たちはもう一度戻って先のコードを見ます.

 var items =  document.querySelectorAll('li');
  var len = items.length;

  for(var i =0;i<len;i++){
     // i=0   ， items[0]      ，     。
    //items[i]            
      items[i].onclick = function(){
          //     i                  
         //        ，          。             cpu      
          alert('list '+i)
      }
  }

さっきのゲームは先生が望んだものではなかったです.今回は黒板を字を書いた小さな紙に変えて、ルールを話している間に紙を各自に渡しました.そうしたら、子供たちは自分の数字を手に取っています.先生が名前を注文する時、彼らは自分の紙切れの数字を出しました.先生は自分のアイデアに満足しています.
私達のこのプログラムはiを小さい紙切れにしてどのように事前にすべてのli元素に伝えますか?
方法1:
liにマーキングをして、ポイントの時にこのマークの値をとります.

  var items =  document.querySelectorAll('li');
  var len = items.length;

  for(var i =0;i<len;i++){
      items[i].setAttribute('i',i);
      items[i].onclick = function(){
          i = this.getAttribute("i");
          alert('list '+i)
      }
  }

方法二:
クローズドの特性を利用する

  var items =  document.querySelectorAll('li');
  var len = items.length;

  for(var i =0;i<len;i++){
      items[i].onclick = (function(){
          var t = i;
          return function(){
              alert('list '+t)
          } 
      })()
  }

方法3:クローズドバッグを利用すると分かりにくいです.他の方法に変えます.

  var items =  document.querySelectorAll('li');
  var len = items.length;

  for(var i =0;i<len;i++){
       
      items[i].onclick = function(t){
              alert('list '+t)
      }.bind(this,i)
  }

まとめてみます
以上の3つの形式の小さい紙切れを使って参を伝えるが、目的はすべてサイクルの後で、それぞれのliの回転関数の上のパラメーターはすべて確定することができることを保証するためです.このような小さい紙切れは非同期の問題を解決する上で、1つの役に立つ技巧です.
异歩の问题については、まだたくさんあります.时间の関系で、いちいち列挙しなくなりました.
もしこの文章があなたの役に立つと思いましたら、【紹介してください】をクリックして、私と一緒に勉強したいですか?

Javascriptは、連動メニューを更新しない方法を実現します.