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でホストファイルをカスタマイズする方法について簡単に説明します

推薦する

MySQL ユーザー権限管理の分析例

この記事では、MySQL ユーザー権限管理の例について説明します。ご参考までに、詳細は以下の通りです...

Vueはシンプルな計算機能を実装します

この記事では、参考までに、簡単な計算機機能を実現するためのVueの具体的なコードを紹介します。具体的...

MySQLのグループカウントと範囲集計を実装する2つの方法

1つ目:通常動作 選択 SUM(ddd) AS count_days、 場合 aa.days >...

MySQL データ挿入効率の比較

データを挿入するとき、以前オフィス システムに取り組んでいたときにはデータベースのパフォーマンスにつ...

Linux で XFS パーティション形式のルート ディレクトリを縮小する方法

目次序文システム環境現在のシステムパーティションレイアウトデータのバックアップレスキューモードに入る...

WeChatミニプログラムマップの使い方を詳しく解説

この記事の例では、WeChatアプレットマップで使用される具体的な実装コードを参考までに共有していま...

Mac で MySQL 8.0.22 のパスワードを取得する方法

Mac 最新バージョンの MySQL 8.0.22 パスワード回復問題の説明:昨日、突然、Macで最...

CSS3 のエラスティック レイアウトでの em の使用の概要: 1em は何ピクセルですか?

私は長い間 CSS を使用してきましたが、Web 要素の関連属性を設定するために常に「px」を使用し...

MySQL INT型の完全な分析

序文: Integer は MySQL で最もよく使用されるフィールド型の 1 つで、通常は整数を格...

vuex での Getter の使用法の詳細な説明

序文Vuex を使用すると、ストア内に「ゲッター」を定義できます (これはストアの計算されたプロパテ...

React の国際化 react-intl の使用

React で国際化を実現するにはどうすればよいでしょうか? react-intlプラグインは、Re...

面接でよく聞かれる Vue 修飾子 13 個

目次1. 怠惰な2.トリム3.番号4.停止5. キャプチャ6.自分7.一度8.予防する9.ネイティブ...

Reactドラッグフックを実装するための100行以上のコード

序文ソースコードは合計で 100 行強しかありません。これを読めば、react-dnd などの成熟し...

jQueryはシンプルなカルーセル効果を実装します

みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のと...