JavaScript_javascript スキルでのこれの使用法に関する詳細かつ簡単な分析

この記事の例では、JavaScript での this の使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

以前 JavaScript を学習していたとき、これは Java ほど理解しにくいものでした。その後、他の人が書いた多くの記事を読んで理解しました。今は、後で忘れてしまわないように、他の人が書いたことを検討中です。

一般に、これには 3 種類の方向があります。グローバル ウィンドウ、オブジェクト、およびコンストラクターを指します。

結論: JavaScript では、これは関数が実行されるときに現在のオブジェクトを指します。簡単に言うと、呼び出されたメソッドがどのオブジェクトに属しているかということですが、これはそのオブジェクトを指します。

1. グローバルウィンドウ

簡単なコード

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
printMessage();

呼び出しメソッド printMessage は window に属しているため、出力結果は次のようになります:

ウィンドウ内のこれは本当です

コードをより複雑に変更すると

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
var obj = {
  message: 'this in obj',
  printMsg : function(){
 printMessage();
  }
};
obj.printMessage();

この時点では、printMessage メソッドは window に属しているため、this は引き続き window を指します。 obj.printMessage メソッドは obj オブジェクトに属します。以下の分析を参照してください。

出力結果は依然として次のようになります: true this in window

2. オブジェクト

次に、オブジェクトを見てコードを少し変更してみましょう

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
var obj = {
  message: 'this in obj',
  printMessage : window.printMessage
};
obj.printMessage();

結果:

obj ではこれを false

はい、その通りです。これはまだ前のステップの結論です。obj.printMessage メソッドは obj オブジェクトに属しているため、obj を指します。

OK、もう心配しないで、コードを見てください:

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
var obj = {
  message: 'this in obj',
  printMessage : function(){
 var obj2 = {
   message:'this in obj2',
   printMessage: window.printMessage
 };
 obj2.printMessage();
  }
};
obj.printMessage();

最後の呼び出しは obj2.printMessage() なので、これが実行されると、これは obj2 になります

結果:

false、これは obj2 にあります

ははは、それはあなたが思っているのと同じですか？

3. コンストラクター

var Person = function(){
  this.age = 1;
  this.name = 'no name';
};
var p = new Person();
console.info('age = ' + p.age);
console.info('name = ' + p.name);

結果:

年齢 = 1 名前 = 名前なし。

では、コンストラクターはこれに対して何をするのでしょうか?前述の「JavaScript プロトタイプ チェーンを簡単に理解する」には、新しい分析が含まれています。

var Person = function(){};
var p = new Person();

新しいプロセスは次の 3 つのステップに分かれています:
(1) var p={}、つまりオブジェクト p
を初期化します。 (2) p.__proto__ = person.prototype;
(3) Person.call(p); つまり、p を構築します。これは初期化 p

それでは通話について話しましょう。

メソッドの呼び出し

適用対象: 関数オブジェクト
オブジェクトのメソッドを呼び出して、現在のオブジェクトを別のオブジェクトに置き換えます。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

パラメータ:
このオブジェクト
オプション。現在のオブジェクトとして使用されるオブジェクト。
引数1、引数2、、、引数N
オプション。一連のメソッドパラメータが渡されます。

説明:
call メソッドを使用すると、別のオブジェクトに代わってメソッドを呼び出すことができます。 call メソッドは、関数のオブジェクト コンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更します。 thisObj パラメータが指定されていない場合は、グローバル オブジェクトが thisObj として使用されます。

call メソッドの機能は、実際にはデフォルト メソッドの this ポイントを変更することであることを説明します。 call メソッドはメソッド オブジェクトである必要があります。call が呼び出されるとき、メソッド オブジェクトの this ポイントが call メソッドの最初のパラメータになります。

var p = 新しい人()

コンストラクター person が呼び出されるとき、それは呼び出しを通じて処理されるため、person の this.age = 1 は p.age = 1 と同等になり、age 属性が p に追加されます。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。