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統計データテーブルの設計方法

推薦する

CentOS 7 は Hadoop 2.10 の高可用性 (HA) をビルドします

この記事では、CentOS 7 で高可用性 Hadoop 2.10 クラスターを構築する方法を紹介し...

Linux環境でglogログライブラリを使用する方法

Linuxライブラリを生成するLinux版はcentos7.3を使用し、コンパイルしてライブラリを生...

ウェブデザインにおける階層化インターフェースの設計経験

多くのネットユーザーは、なぜ自分のウェブサイトはいつも色の問題を抱えていて、いつも地味に見え、注目を...

Better-scrollはメニューとコンテンツをリンクする効果を実現します

1. 基本的な使い方 <!DOCTYPE html> <html lang=&qu...

JavaScript スタイル オブジェクトと CurrentStyle オブジェクトのケース スタディ

1. スタイルオブジェクトスタイル オブジェクトは単一のスタイル宣言を表し、スタイルが適用されている...

CentOS の Nginx 公式 Yum ソースの設定を詳しく解説

私はプロジェクトの展開にAlibaba Cloudから購入したCentOSを使用しています。最近、プ...

jsはシンプルなショッピングカートモジュールを実装します

この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...

Docker Compose を使用して nginx のロード バランシングを実装する方法

Dockerネットワーク管理とコンテナIP設定に基づいてNginxロードバランシングを実装するすべて...

DockerでGDBを使用するときにブレークポイントを入力できない問題を解決する

質問docker で gdb を実行すると、ブレークポイントに到達しますが、ブレークポイントに入るこ...

MySQL内部一時テーブルの具体的な使用法

目次連合テーブルの初期化ステートメントの実行連合の結果ユニオンオールグループ化十分なメモリステートメ...

MySQL インデックスのクイックガイド

MySQL インデックスの確立は、MySQL の効率的な操作にとって非常に重要です。インデックスによ...

ES6 ループと反復可能オブジェクトの例

この記事では、ES6 の for ... of ループについて説明します。古い方法以前は、JavaS...

nginxとバックエンドポート間の競合の解決策

質問: Alice 管理システムを開発しているときに、すべてのバックエンド インターフェイスが最初の...

JSベースの手持ち連射機能+テキスト揺れ特殊効果コードの簡単実装

少し前にTikTokで揺れる連打が流行っていたので真似してみることにしました。さっそく効果をみてみま...