1.関数内のこの方向これらの this の参照は、関数が呼び出されたときに決定されます。 呼び出し方法によって、これが指す場所が決定されますが、通常は呼び出し元を指します。 1. 通常の機能関数fn(){ console.log('通常の関数 this:' + this); } 関数() 印刷結果は次のとおりです。 通常の関数が呼び出されると、これはウィンドウを指していることがわかります。 2. コンストラクター関数スター(){ console.log('コンストラクタの this:' + this); } 新しいスター() 印刷結果は次のとおりです。 オブジェクト メソッドが呼び出されると、this はメソッドのインスタンス オブジェクトを指していることがわかります。 3. オブジェクトメソッドvar o = { 印刷: 関数(){ console.log('オブジェクトメソッドの this:'+this); } } o.print() 印刷結果は次のとおりです。 オブジェクト メソッドが呼び出されると、this はメソッドが属するオブジェクトを指していることがわかります。 4. イベントバインディング方式ボタンにバインディング イベントを追加すると、その this はどのようにポイントされるのでしょうか? たとえば、現在ボタンがあり、次のようにクリック イベントを追加します。 <本文> <button>ボタン</button> <スクリプト> var btn = document.querySelector('ボタン'); btn.onclick = 関数(){ console.log('バインディングイベントのthis:'+this); } </スクリプト> </本文> ボタンをクリックすると、次のようになります。 バインディング イベントが呼び出されると、this がバインディング イベント オブジェクトを指していることがわかります。 5. タイマー機能タイマー関数を記述し、1 秒後に呼び出します。 window.setTimeout(関数(){ console.log('タイマーのこれ:'+これ); },1000) 印刷結果は次のとおりです。 タイマー関数が呼び出されると、これがウィンドウを指していることがわかります。 6. 関数をすぐに実行するすぐに実行される関数を定義します。 (関数(){ console.log('this:'+すぐに実行する関数のthis); })(); 印刷結果は次のとおりです。 関数呼び出しがすぐに実行されると、this が window を指していることがわかります。 要約すると、次のようになります。
2.関数内のthisポインタを変更するただし、関数内では、 this ポインターは静的ではありません。いくつかの方法、主に次の方法を使用して、 this ポインターを変更できます。先ほど、プロトタイプ オブジェクト内で this が指す場所の問題をまとめる際に、call メソッドと apply メソッドについて説明しました。ここではそれらを繰り返さず、例だけを示します。 1. 呼び出しメソッドまずオブジェクトと関数を定義します。 var o = { 名前:'xl' } 関数fn(){ console.log(これを); } 現時点では、 this は通常の関数内にあります。 前述のように、通常の関数の this は windiw を指します。 ここで、 this を o オブジェクトにポイントしたい場合は、次のようにします。 fn.call(o) 印刷された結果は次のとおりです。 これは変更が成功したことを示しています。 2. 適用方法上記と同じ方法です。 var o = { 名前:'xl' } 関数fn(){ console.log(これを); } fn.apply(o); 印刷結果は次のとおりです。 3. バインドメソッドbind() メソッドは関数を呼び出しません。しかし、関数内で this ポインターを変更することは可能です。 文法: fun.bind(thisArg、arg1、arg2、...) を実行します。 thisArg: fun関数の実行時に指定されたthis値 arg1、arg2: 渡されたその他のパラメータ 指定されたthis値と初期化パラメータによって変換された元の関数のコピーを返します したがって、this ポインターを変更するだけで関数を呼び出したくない場合は、bind を使用できます。 以下のように(上記の例を引き続き使用します): var o = { 名前:'xl' } 関数fn(){ console.log(これを); } var f = fn.bind(o); 関数f(); 印刷結果は次のとおりです。 ここで注意すべき点は、bind() メソッドは関数を呼び出さないため、this ポインターを変更した後、新しい関数が返され、この新しい関数を f に割り当てて、f を通じて呼び出すことができるということです。 3. 呼び出し適用バインドサマリー1. 類似点関数内で this ポインターを変更できます。 2. 相違点
3. 適用シナリオ
要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: js、css、htmlはブラウザのさまざまなバージョンを決定します
>>: Dockerでホストファイルをカスタマイズする方法について簡単に説明します
はじめに使えるかもしれないが、あまり使われていない、シンプルで実用的なDockerコマンドをいくつか...
現在、Redis とコンテナについて学習中なので、Docker を使用して Redis マスタースレ...
目次1. 制約の概念と分類2. 5つの制約の追加と削除2.1 制約を追加する6つの方法2.2 制約を...
最近、WeChatミニプログラムは、監査ミニプログラムのwx.loginおよびwx.getUserI...
I. 概要HTML テンプレートを作成するときに、テキスト レイアウトの手段としてスペースが使用さ...
HTML でフォームの送信を無効にする方法は 2 つあります。 1. コントロールタグにreadon...
MongoDBインストールYumを使用してインストールすることを選択する1. repoファイルを作成...
目次サンプルコードレンダリングコード分析要約するサンプルコード var データ = [220, ...
目次背景は次のとおりです。何が起こるでしょうか?背景は次のとおりです。実際の開発では、ネットワークの...
1. Vueプロジェクトのパッケージ化開発されたvueプロジェクトに次の名前を入力し、パッケージ化し...
環境の紹介オペレーティングシステム: Centos 7.4 Zabbix バージョン: zabbix...
Nginx によるソケット ポート転送の一般的なシナリオ: オンライン学習アプリケーションでは、通常...
皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...
MySQL は多くのデータ型をサポートしており、高パフォーマンスを得るには適切なデータ型を選択するこ...
目次安定スロットル: 手ぶれ防止: 一定時間内に最後のタスクのみを実行します。スロットル: 一定期間...