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

推薦する

MySQL でトランザクションのコミットとロールバックを実装する方法の詳細な例

最近、データベース データのスケジュールされた移行を実行する必要があります。実行プロセス中に何らかの...

CSS のフィルター属性とバックドロップフィルターの適用と違いの詳細な説明

フィルターとバックドロップフィルターにはいくつかの違いがあります。フィルターは現在の要素だけでなく、...

よくある MySQL 設計エラーをご存知ですか?

インターネットの発達により、バスを待ったり地下鉄に乗ったりする時間など、断片的な時間を活用して、いつ...

ミニプログラムカスタムコンポーネントの非効率的なグローバルスタイルの解決策

目次長すぎて読めないコンポーネントスタイルの分離デモテスト優先度ページの分離構成参考文献ネイティブ ...

リンク更新ページと js 更新ページの使用例

1. リンクの使用方法:コードをコピーコードは次のとおりです。 <a href="j...

MySql 8.0.11-Winxp64 (無料インストール版) ​​設定チュートリアル

1. インストールディレクトリにzipパッケージを解凍します。まず、mysql-8.0.11-win...

シンプルなスネークを実現するためのネイティブjsキャンバス

この記事では、参考までに、簡単なスネークゲームを実装するためのjsキャンバスの具体的なコードを共有し...

Win10にnginxをインストールする方法

会社から、負荷を実装するためにnginxをベースにFordプロジェクトのWebServiceサーバー...

Nginx は rtmp ライブ サーバーの実装コードを構築します

1. nginxソースディレクトリに新しいrtmpディレクトリを作成し、git clone http...

MySQL におけるデータタイムとタイムスタンプの違い

MySQL には 3 つの日付型があります。日付(年-月-日)テーブル test(hiredate ...

Linuxでのcrontabの使い方と注意点の詳しい説明

Crontab は定期的な実行を設定するために使用されるコマンドです。そのデーモン プロセスは cr...

仮想マシンに Windows Server 2008 オペレーティング システムをインストールする

この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...

シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

Ubuntu mysqlログイン名とパスワードを表示および変更し、phpmyadminをインストールする

MySQLをインストールした後、ターミナルでmysql -u root -pと入力してEnterを押...

ディスクを破壊せずに Linux で dd コマンドを使用する方法

故障したストレージ ドライブからデータを救出する場合でも、アーカイブをリモート ストレージにバックア...