これ、これ、これを JavaScript でもう一度議論してください、超包括的な (古典的な)_JavaScript スキル

JavaScript はスクリプト言語であるため、学習が簡単であると多くの人が考えています。それどころか、JavaScript は関数型プログラミング、クロージャ、プロトタイプベースの継承などの高度な機能をサポートしています。この記事では、JavaScript の this キーワードを 1 つの例として取り上げ、さまざまな状況でのその意味を簡単かつ簡単な方法で分析し、この状況の理由、Dojo などの JavaScript ツールで提供される this をバインドする方法を説明します。 JavaScriptのthisキーワードを正しく使いこなしてこそ、JavaScript言語の閾値に入ることができると言えます。

この js については、多くの人が説明していますが、とても高機能に見えます。理解できたでしょうか。

まず、スクリプト ホームからよりハイエンドなものを引用します。はい、これです

さて、これが私のイライラする説明です

引数: これは変数でもプロパティでもありません。値を割り当てることはできません。常に、それを呼び出すオブジェクトを指します。

あまりにも漠然としているように感じますが、最も重要なことを覚えておいてください。「これを呼び出すオブジェクトは常にそれを指している」ので、これを呼び出すオブジェクトを見つければ、これが誰を指しているのかがわかります。

alert(this); 

見てください、ポップアップするものは何ですか? それは「オブジェクトウィンドウ」または「オブジェクト」です。つまり、それはどちらのオブジェクトですか?

alert(this === window); 

結果は「true」なので、これを呼び出すオブジェクトは window になります

2.

var test = function(){
  alert(this);
}
test(); 

上に表示される内容は「alert(this)」と同じですか?

var test = function(){
  alert(this === window);
 }
test(); 

上記のコードを実行すると、「true」が表示されますか?

この問題はこれで終わりですか？

それがそんなに単純なら、なぜ多くの人がこの鳥について議論するのでしょうか?

3.

また来てください

var test = function(){
  alert(this === window);
 }
new test(); 

ねえ、今回はなぜ「偽」なの?

「this は常にそれを呼び出すオブジェクトを指す」ということを覚えておいてください。「2.」は関数ですが、このコードを呼び出す直接オブジェクトは「ウィンドウ」です。その呼び出しはまだ「window」です (関数はオブジェクトですが、それを呼び出すのは別のオブジェクトですので、混乱しないでください)。「3.」では、「new」が使用されます。これは実際には変更されています。コンストラクターは、作成時に新しい空のオブジェクトを作成します。つまり、「new test()」は新しいオブジェクトを作成し、このオブジェクトは関数「test」のコードを指します。したがって、これはウィンドウ オブジェクトではなくなり、このコンストラクターによって作成された新しいオブジェクトになります。

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
test.b(); 

上記の議論により、それはもう明らかです。

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test1.b(); 

つまり、結果が "false" であるとは考えていません。それは間違っています。'test1' の値は 'test' ですが、'test1' はまだ 'test' のオブジェクトではありません。新しいオブジェクト、今のところは理解しています。両方とも同じオブジェクトを参照しています。証明として以下のコードを示します。

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test.a = 2;
alert(test1.a); 

「1」が出たら、叱りに来てください

6. 次に、複合体全体

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test);
   }
  }
 }
test.b.b1(); 

これは「本当」ですか、それとも「嘘」ですか?

上記の理論によれば、次のコードで明らかなように、現時点では「this」は「test」によって直接呼び出されるのではなく、「test.b」によって呼び出されます

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test.b);
   }
  }
 }
test.b.b1(); 

7. より複雑にする方がよい

var test = function(){
  var innerTest = function(){
   alert(this === test);
  }
  innerTest();
 }
test(); 

上記の理論によれば、「innerTest」は「test」によって呼び出され、「this」は「test」を指します。
さて、間違いは「innerTest」を呼び出した人にあります。実際、これらの関数はすべて「window」オブジェクトによって呼び出されます。たとえ 1,000 個のレイヤーをネストしても、各関数は「window」オブジェクトによって呼び出されます。証拠となるコードの一部

var test = function(){
  var innerTest = function(){
   alert(this === window);
   var innerTest1 = function(){
    alert(this === window);
   }
   innerTest1();
  }
  innerTest();
 }
test(); 

8. もう一つの特別なもの

var test = function(){
  alert(this === window);
 }
var test1 = {
}
test.apply(test1); 

この関数の機能は、「オブジェクトのメソッドを呼び出して、現在のオブジェクトを別のオブジェクトに置き換える」ということなので、当然、「window」オブジェクトは「test1」に置き換えられます。それは「偽」です。これを証明する次のコードは

var test = function(){
  alert(this === test1);
 }
 var test1 = {
  }
test.apply(test1); 

そうすると、「call」なども同様になります

9. リテラル継承とは異なる別のプロトタイプ継承

var test = function(){
 }
 var my = function(){
  this.a = function(){
   alert(this === mytest2);
  }
 }
 var mytest = new my();
 test.prototype = mytest;
 var mytest2 = new test();
 mytest2.a(); 

10. 残っているもの、おそらく「dom」オブジェクト

<script>
  var mytest = function(context){
   alert(context.getAttribute('id'));
   alert(this === window);
  }
 </script>
 <div id="test" onclick="mytest(this)">aaaa</div> 

You should understand after reading the above, the 'this' in it respectively represents Shenma