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

推薦する

N キロメートル以内のデータを検索する MySQL の簡単な例

地球の円周率と半径、検索ポイントの経度と緯度から、検索ポイントと検索データテーブル間の距離はNキロメ...

JavaScript フロントエンドのタイムアウト非同期操作に最適なソリューション

目次コードの実行に長い時間がかかる場合はどうなりますか? Axiosにはタイムアウト処理機能が搭載さ...

MySQLのマスタースレーブ構成を使用して、読み取りと書き込みの分離を実現し、データベースの負荷を軽減します。

大規模な Web サイトでは、多数の同時アクセスを処理するために、Web サイト上の分散負荷分散以上...

MySQL 集計関数のネストされた使用操作

目的: MySQL 集計関数のネストされた使用集計関数は直接ネストできません。例: max(coun...

MYSQL データベースの基礎 - 結合操作の原理

結合では、ネスト ループ結合アルゴリズムが使用されます。ネスト ループ結合には 3 つの種類がありま...

WeChatアプレットが計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...

MIME TYPEとは?MIME-Typesタイプコレクション

MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...

MySQLの複合インデックス方式の詳細な説明

どの DBMS でも、インデックスは最適化にとって最も重要な要素です。データ量が少ない場合、適切なイ...

Vueプロジェクトでページジャンプを実装する方法

目次1. vue-cli デフォルト プロジェクトを作成する (babel のみを含む) 2. 作成...

Docker に Tomcat をインストールし、Springboot プロジェクトの WAR パッケージをデプロイする方法

簡単です。チュートリアルを見てください。ブロガー1. まずdockerを起動するサービスdocker...

Vueのコンポーネントのprops属性について詳しく説明します

目次質問1: 小道具は具体的にどのように使用されますか?原理は何ですか?下を見る質問 2: 年齢に ...

MySQL 5.7.21 解凍バージョンのインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.21の解凍版をダウンロードしてインストールする詳細な手順を記録して...

MySQLデータベースのbinlogクリーンアップコマンドの詳細な説明

概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...

vscode を使用したリモート Linux 開発の実装

過去に別れを告げるvscode にリモート SSH が導入される前は、Linux サーバー開発者の多...

CentOS 7 構成 Tomcat9+MySQL ソリューション

Tomcatの設定まずTomcatをインストールするTomcatのインストールは、Tomcatのイン...