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

推薦する

フロントエンドは画像を遅延ロードする方法を知っている必要があります(3つの方法)

目次1. 遅延読み込みとは何ですか? 2. 遅延読み込みを実装する🌄: 2.1 最初の方法: 2.2...

React クラスコンポーネントのライフサイクルと実行順序

1. Reactコンポーネントを定義する2つの方法1. 関数コンポーネント。単純な関数コンポーネント...

CSS 配送先住所平行四辺形線スタイルの例コード

コードは次のようになります。 // 配送先住所の平行四辺形の線のスタイル <view clas...

Centos 用の rpm パッケージのカスタマイズと yum リポジトリの構築に関するチュートリアル

1 yumでソフトウェアをインストールしたときにダウンロードしたrpmパッケージを保存しますyum ...

HTMLにビデオを挿入してすべてのブラウザと互換性を持たせる方法

HTML にビデオを挿入するために最もよく使用される方法は 2 つあります。1 つは古い <o...

CSS3 を使用して楕円軌道の回転を実装するサンプルコード

最近、次のような効果を達成する必要がある最初は、CSS3D回転を使用して記述すると、次の効果しか得ら...

Nodejs 配列キューと forEach アプリケーションの詳細な説明

この記事では、Nodejs 開発プロセスで遭遇する配列の特性によって発生する問題と解決策、および配列...

js を使用して過去 1 週間、1 か月、3 か月の時間を取得する簡単な例

目次過去1週間の時間を取得する過去1か月の時間を取得する過去3か月分を取得新しい Date() と ...

画像のフェードインとフェードアウト効果を実現する js

この記事では、画像のフェードインとフェードアウトを実現するためのjsの具体的なコードを参考までに紹介...

mysql バックアップ スクリプト mysqldump の使い方の詳細な説明

この記事では、参考までにMySQLバックアップスクリプトを紹介します。具体的な内容は次のとおりです。...

JavaScript を使用してページに動的な検証コードを実装する例

導入:現在、プログラム攻撃を防ぐために、ユーザーがログインまたは登録するときに多くの動的検証テクノロ...

Typescriptを使用してローカルストレージをカプセル化する方法

目次序文ローカルストレージの使用シナリオ使用上の問題解決機能性有効期限を追加データ暗号化を追加する命...

Navicat が MySQL にリモート接続するときに発生する 10060 不明エラーを解決する方法

はじめに:今日は、サーバー上のMySQLにリモート接続したいと思います。使用するソフトウェアはNav...

MySQL サーバー ログイン エラー ERROR 1820 (HY000) の解決方法

障害サイト: MySQL サーバーにログインし、どのコマンドを実行してもこのエラーが発生します my...

MySQLクエリ速度が遅く、パフォーマンスが低下する原因と解決策

1. データベースクエリの速度に影響を与えるものは何ですか? 1.1 データベースクエリ速度に影響を...