コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Javascript でのこのキーワードの使用法の詳細な説明

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

巴扎黑
リリース： 2017-08-12 16:16:28
オリジナル
1244 人が閲覧しました

これは、非常に誤解され、誤って使用されやすい 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 サイトの他の関連記事を参照してください。

関連ラベル：
javascript this キーワード
ソース：php.cn
前の記事：echartプラグインの基本的な使い方などを紹介 次の記事：JavaScript を使用して数字をランダムに選択する小さなプログラムを作成する詳細な例
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート