JavaScript プロトタイプオブジェクトの this ポイント問題の詳細な説明

JavaScript プロトタイプオブジェクトの this ポイント問題の詳細な説明

1. これは

コンストラクター内の this はインスタンス オブジェクトを参照します。それで、このプロトタイプオブジェクトは何を指し示しているのでしょうか?

次のように:

関数 学生(年齢,名前){
            this.age = 年齢;
            this.name = 名前;
        }
        var それ;
        Student.prototype.score = function(){
            console.log('子どもたちはみんな成績が良いです!');
            それ = これ;
        }
        var xl = new Student(18,'リトルベア');
        xl.スコア();
        console.log(それは === xl);

グローバル変数 that を定義し、スコア関数でそれに値を割り当て、関数内でそれが this を指すようにし、インスタンス オブジェクトの score メソッドを呼び出して、that とインスタンス オブジェクトが一致しているかどうかを判断します。一致している場合は、プロトタイプ オブジェクト this がインスタンスを指していることを意味します。

印刷結果は次のとおりです。

ここに画像の説明を挿入

つまり、プロトタイプ オブジェクトにはメソッドが含まれており、メソッド内の this はメソッドの呼び出し元、つまりインスタンス オブジェクトを参照します。

2. この点を修正する

1. call() メソッド

2 つの数値を加算する簡単な関数を記述します。

 関数fn(a,b){
           コンソールログ(a+b);
            console.log(これを);
		 }
 関数(1,2)

これを関数内に出力し、関数を呼び出して、これがどこを指しているかを確認します。

ここに画像の説明を挿入

これは、window オブジェクトを指していることがわかります。これを新しく作成されたオブジェクトを指すようにしたい場合は、どうすればよいでしょうか。

まずオブジェクトを定義します。

o = {};

次に、call() を通じてこのポイントを変更し、新しく作成されたオブジェクト o を指すようにします。

 o = {
            名前: 'xl'
        };
        fn.call(o,1,2);

印刷結果は次のとおりです。

ここに画像の説明を挿入

これは新しく作成されたオブジェクト o を指しており、変更が成功したことを意味します。

2. apply() メソッド

apply() メソッドと call() メソッドは基本的に同じなので、ここでは詳細には触れません。早速コードを見てみましょう。

 関数fn(a,b){
           コンソールログ(a+b);
            console.log(これを);
        }
        o = {
            名前: 'xl'
        };
        fn.apply(o,[1,2]);

これら 2 つのメソッドの間にはまだ違いがあることがわかります。つまり、call() によって受け入れられるパラメーターは連続パラメーターである必要があるのに対し、apply() メソッドによって受け取られるパラメーターは配列パラメーターの形式です。

要約する

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

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

<<:  HTML のフォームフォームのメソッド属性の紹介

>>:  MySQL統計データテーブルの設計方法

推薦する

選択ドロップダウンボックスの値をIDに渡してコードを実装する方法

完全なコードは次のとおりです。 HTMLコード:コードをコピーコードは次のとおりです。 <!-...

MySQLへの外部ネットワークアクセスを許可し、MySQLアカウントのパスワードを変更する方法

mysqlのrootアカウント、普段はlocalhostか127.0.0.1で接続しています。会社の...

MySQLは現在の日付と時刻を取得する関数の例の詳細な説明

現在の日付 + 時刻 (日付 + 時刻) を取得する関数: now() mysql> now(...

VueにExcelテーブルプラグインを導入する方法

この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具...

Node.js における非同期プログラミングの知識ポイントの詳細な説明

導入JavaScript はデフォルトでシングルスレッドであるため、コードは並列実行するための新しい...

Webstorm と Chrome を使用して Vue プロジェクトをデバッグする方法

目次序文1. 新しいVueプロジェクトを作成する2. WebStormの設定1. デバッガポートを設...

WiFi 開発 | WiFi ワイヤレス テクノロジーの紹介

目次WiFiワイヤレステクノロジーの紹介1. WiFiテクノロジーの概要2. ESP8266の紹介W...

ネイティブ JS でスネーク ゲームを書く

この記事では、参考までに、JSでスネークゲームを書くための具体的なコードを紹介します。具体的な内容は...

HTML 文法百科事典_HTML 言語文法百科事典 (必読)

ボリュームラベル、プロパティ名、説明002 <! - - ... - -> コメント00...

XHTML 入門チュートリアル: よく使われる XHTML タグ

<br />記事と同様に、Web ページにも明確な段落と重要度の異なるタイトルが必要です...

Vueスロットの詳細な説明

1. 機能: 親コンポーネントが子コンポーネントの指定された位置に HTML 構造を挿入できるように...

MySQLはgroup_concat()関数に基づいて複数のデータ行を結合します

非常に便利な機能group_concat() について、マニュアルには次のように記載されています: ...

JavaScript関数導入の詳しい説明

目次機能紹介関数関数の作成コンストラクタは関数を作成する関数宣言は関数を作成する関数式関数を作成する...

CentOS8でルートパスワードを素早く変更する方法

Centos8仮想マシンを起動し、上下キーを押して図1のインターフェースの最初の行を選択します。図1...

Win10 は Tsinghua ソースを使用して pytorch-GPU バージョンをすばやくインストールします (推奨)

Cudaがインストールされているかどうかを確認してくださいアナコンダプロンプトに入力nvcc -V...