JavaScript関数の詳細な説明これを指す問題

JavaScript関数の詳細な説明これを指す問題

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 が wi​​ndow を指していることがわかります。

要約すると、次のようになります。

呼び出し方法これは
通常の関数呼び出しウィンドウ
コンストラクタ呼び出しインスタンスオブジェクトの場合、プロトタイプオブジェクトのメソッドもインスタンスオブジェクトを指します。
オブジェクトメソッド呼び出しこのメソッドが属するオブジェクト
イベントバインディングメソッドイベントオブジェクトのバインド
タイマー機能ウィンドウ
関数をすぐに実行するウィンドウ

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. 相違点

  • callapply関数を呼び出し、関数内の this ポインターを変更します。
  • - -callapplyで渡されるパラメータは異なります。call は aru1、aru2... の形式でパラメータを渡しますが、apply は配列形式 [arg] で渡す必要があります。
  • bind関数を呼び出さないが、関数内の this ポインターを変更できます。

3. 適用シナリオ

  • call継承を頻繁に行います。
  • apply配列と関連付けられることが多いです。たとえば、数学オブジェクトを使用して配列の最大値と最小値を実現できます。
  • bind関数を呼び出しませんが、それでも this ポインターを変更する必要があります。たとえば、タイマー内の this ポインターを変更します。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript プロトタイプオブジェクトの this ポイント問題の詳細な説明
  • JSの矢印関数におけるこのポイントの詳細な説明
  • このリファレンスとJavaScriptのカスタムプロパティの詳細な説明
  • JavaScriptのthisキーワードは

<<:  js、css、htmlはブラウザのさまざまなバージョンを決定します

>>:  Dockerでホストファイルをカスタマイズする方法について簡単に説明します

推薦する

知らないかもしれない奇妙で興味深いDockerコマンド

はじめに使えるかもしれないが、あまり使われていない、シンプルで実用的なDockerコマンドをいくつか...

Docker ベースの Redis 1 マスター、2 スレーブ、3 センチネルの実装

現在、Redis とコンテナについて学習中なので、Docker を使用して Redis マスタースレ...

MySQL 学習: データベース テーブルの 5 つの主要な制約を初心者向けに詳しく説明します

目次1. 制約の概念と分類2. 5つの制約の追加と削除2.1 制約を追加する6つの方法2.2 制約を...

アプレットにおけるwx.getUserProfileインターフェースの具体的な使用

最近、WeChatミニプログラムは、監査ミニプログラムのwx.loginおよびwx.getUserI...

HTML でさまざまなスペースの特徴と表現を探る (推奨)

I. 概要HTML テンプレートを作成するときに、テキスト レイアウトの手段としてスペースが使用さ...

HTML フォーム コントロールの無効な属性の読み取り専用と無効の概要

HTML でフォームの送信を無効にする方法は 2 つあります。 1. コントロールタグにreadon...

Linux での MongoDB のインストールと設定のチュートリアル

MongoDBインストールYumを使用してインストールすることを選択する1. repoファイルを作成...

eCharts でパーセンテージ付きの横棒グラフを実装する方法

目次サンプルコードレンダリングコード分​​析要約するサンプルコード var データ = [220, ...

js は axios 制限リクエスト キューを実装します

目次背景は次のとおりです。何が起こるでしょうか?背景は次のとおりです。実際の開発では、ネットワークの...

Docker イメージ + nginx を使用して Vue プロジェクトをデプロイする方法

1. Vueプロジェクトのパッケージ化開発されたvueプロジェクトに次の名前を入力し、パッケージ化し...

エージェントを介したzabbix監視プロセスとポートの詳細なプロセス

環境の紹介オペレーティングシステム: Centos 7.4 Zabbix バージョン: zabbix...

Nginx 転送ソケットポート設定の詳細な説明

Nginx によるソケット ポート転送の一般的なシナリオ: オンライン学習アプリケーションでは、通常...

Linux スケジュールタスクの関連操作の概要

皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...

MySQL データ型の最適化の原則

MySQL は多くのデータ型をサポートしており、高パフォーマンスを得るには適切なデータ型を選択するこ...

JavaScript のデシェイクとスロットリングの例

目次安定スロットル: 手ぶれ防止: 一定時間内に最後のタスクのみを実行します。スロットル: 一定期間...