Javascript でのこのキーワードの使用法の詳細な説明

これは、非常に誤解され、誤って使用されやすい Javascript の機能です。したがって、次の記事では、JavaScript でのこのキーワードの問題に関する関連情報を紹介します。この記事のテスト問題は、必要な方は一緒に参照してください。

はじめに

Javascript はオブジェクトベースの動的言語です。つまり、すべてがオブジェクトです。非常に典型的な例として、関数も通常のオブジェクトと見なされます。 Javascript は特定の設計パターンを通じてオブジェクト指向プログラミングを実装できますが、この「ポインタ」はオブジェクト指向プログラミングを実現する上で非常に重要な機能です。この記事では、JavaScript の this キーワードが指す関連コンテンツについて詳しく説明します。最初に簡単なテストを行ってみましょう。すべて正解した場合は、これ以上読む必要はありません。

テストの質問

最初の質問

RREEEE

2番目の質問

RREEEE

3番目の質問質問

<script>
 var str = &#39;zhangsan&#39;;

 function demo() {
  var str = &#39;lisi&#39;;
  alert(this.str);
 }
 window.demo(); // ??

 var obj = {
  str: "wangwu",
  say: function() {
   alert(this.str);
  }
 }
 obj.say(); // ??

 var fun = obj.say;
 window.fun(); // ??
</script>

4番目の質問

<script>
 var username = &#39;zhangsan&#39;;

 (function() {
  var username = &#39;lisi&#39;;
  alert(this.username); // ??
 })()

 function demo() {
  var username = &#39;wangwu&#39;;

  function test() {
   alert(this.username);
  }

  test(); // ??
 }
 demo();
</script>

答え

• 最初の質問: zhangsan wanguu zhangsan

• 2番目の質問: zhangsan zhangsan

• 質問3 : 私の名前は張山です 私の名前は張山です

• 質問4: zhangsan zhangsan zhangsan lisi wangwu

(下に詳細な分析があります)

this

• は関数を呼び出すオブジェクトを指します

• オブジェクトレス呼び出し関数/匿名関数の自己呼び出し (これはウィンドウを指します)

• 新しい

• apply/call 呼び出しによって生成されたオブジェクト

1. 呼び出し関数を指すオブジェクト

<script>
 function Person() {
  this.username = &#39;zhangsan&#39;;
  this.say = function() {
   alert(&#39;我叫&#39; + this.username);
  }
 }

 var p = new Person();
 p.say(); // ??

 var p1 = new Person();
 p1.say(); // ??
</script>

• グローバル関数 (demo) は window オブジェクトのメソッドに属します。 window は、demo を呼び出します。したがって、this は、say メソッドを呼び出し、this は、obj() を指します。 ) はグローバル関数であり、ステートメント fun は obj で単純な関数を受け取り、それを呼び出しません (obj.say() が呼び出される関数です)。このとき、fun は関数 (function(){alert) です。 (this.str);}), 次に、fun() が関数を呼び出すと、this はその関数を呼び出したウィンドウ

• を指し、次に this はwho

• を指します。 2. オブジェクトレス関数呼び出し/匿名関数self-call->this window

<script>
 var username = &#39;zhangsan&#39;;

 function demo() {
  alert(this.username)
 }

 var obj1 = {
  username: "lisi"
 };
 var obj2 = {
  username: "wangwu"
 };

 demo(); // ??
 demo(obj1); // ??
 demo(obj2); // ??
 demo.call(obj1); // ?? 
 demo.apply(obj2); // ??
</script>

を指します。匿名関数には名前がないため、testを呼び出す人が誰を指すかがwindow

にリンクされます。もちろん、テスト後は、ウィンドウによって呼び出されることはありません。誰も気にしない場合は、ウィンドウを指します。これは、呼び出す所有者がいないメインレス関数と同等です。 3. new で生成されたオブジェクト 価値あるものにするためには、new を使用して関数内の属性とメソッドを使用します

• 4. apply/call call

• まず、apply()/call() が何であるかを理解しましょうは？

apply()/call(): 最後に関数が呼び出されますが、内部の this は thisObj

<script>
 // this:指向调用函数的对象
 var str = &#39;zhangsan&#39;;

 function demo() {
  var str = &#39;lisi&#39;;

  //this->window
  console.log(this);
  alert(this.str);
 }
 window.demo(); // zhangsan

 var obj = {
  str: "wangwu",
  say: function() {
   // this->obj
   alert(this.str);
  }
 }
 obj.say(); // wangwu

 var fun = obj.say;
 window.fun(); // zhangsan
</script>

注: 関数 function が呼び出されますが、this は thisObj を指します。関数内で thisObj を指します (オブジェクトの内部ポインターを変更します)

2. thisObj がパラメーターを渡さない場合、デフォルトでグローバル オブジェクトになります

• 3. call()/apply() の接続と相違点

連絡先: 関数は同じで、最初のパラメータはすべて thisObj です
違い: さらにパラメータが渡される場合

call() の実際のパラメータは 1 つずつリストされています

実際のパラメータapply() のすべては 2 番目の配列パラメータに配置されます

apply()/call() の理解例:

<script>
 // 2.匿名函数自执行|匿名函数|无主函数 this->window
 var username = &#39;zhangsan&#39;;

 // 匿名函数自执行 this->window
 (function() {
  var username = &#39;lisi&#39;;
  console.log(this); // window
  alert(this.username); // zhangsan
 })()

 function demo() {
  var username = &#39;wangwu&#39;;

  // 无主函数 this->window
  function test() {
   // this->window
   alert(this.username);
  }

  test(); // zhangsan
 }
 demo();
</script>

this の 4 番目の使用例

<script>
 // 3.通过new的对象：this指向产生的对象
 // 函数
 function Person() {
  // 属性
  this.username = &#39;zhangsan&#39;;
  // 方法
  this.say = function() {
   // this->p
   console.log(this); // Person对象
   alert(&#39;我叫&#39; + this.username);
  }
 }

 // 实例化出一个对象:p就具有了username属性和say方法
 var p = new Person();
 console.log(p); // Person对象
 console.log(p.username); // zhangsan
 p.say(); // 我叫zhangsan

 // this->p1
 var p1 = new Person();
 p1.say(); // Person对象 我叫zhangsan
</script>

obj1 であれ obj2 であれ、デモに書かれたものを直接呼び出した場合、デモはウィンドウによって呼び出されます。

call を使用するか apply を使用するかに関係なく、最後の呼び出しはデモ関数ですが、これが obj1/obj2 を指すように強制され、this が最初のパラメーター オブジェクトを指すように強制されます。

以上がJavascript でのこのキーワードの使用法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。