JAVASCRIPT THISの詳しい説明 オブジェクト指向_jsオブジェクト指向

学び始めは難しそうに見えますが、一度理解するととても便利で有意義に使えます。 JavaScript にもこのキーワードはありますが、古典的な OO 言語よりも使用するのがはるかに「混乱」します。
JavaScript でこれを使用するさまざまな方法の何が混乱しているのかを見てみましょう。
1. このキーワードを HTML 要素のイベント属性でインラインで使用します:

// この
">division 要素

ここで使用する最も一般的なメソッドは、javascirpt: EventHandler(this) の形式です。ただし、必要に応じて、実際にはここに任意の正当な JavaScript ステートメントを記述することができます (ただし、これは内部クラスになります)。ここでの原則は、スクリプト エンジンが div インスタンス オブジェクトの匿名メンバー メソッドを生成し、onclick がこのメソッドを指すということです。
2. DOM を使用したイベント処理関数で this キーワードを使用します:

division element

EventHandler()メソッド内のこのキーワードは、オブジェクトが IE のウィンドウ オブジェクトであることを示します。これは、EventHandler が単なる通常の関数であるため、attachEvent の後のスクリプト エンジンの呼び出しは div オブジェクト自体とは何の関係もありません。同時に、EventHandler の caller 属性 (null に等しい) を確認できます。このメソッドで div オブジェクト参照を取得したい場合は、this.event.srcElement を使用する必要があります。
3. DHTML を使用して、イベント処理関数で this キーワードを使用します。

分割要素


ここでの this キーワードは、 content は div 要素オブジェクトのインスタンスです。スクリプト内で DHTML を使用して EventHandler メソッドを div.onclick に直接割り当てることは、div オブジェクト インスタンスにメンバー メソッドを追加することと同じです。このメソッドと最初のメソッドの違いは、最初のメソッドは HTML メソッドを使用し、後者のスクリプト解析エンジンは匿名メソッドを生成しなくなることです。
4. クラス定義でこのキーワードを使用します。

function JSClass()
{
var myName = 'jsclass'
this.m_Name = 'JSClass' ;
}
JSClass.prototype.ToString = function()
{
alert(myName ', ' this.m_Name)
};
var jc = new JSClass() ;
jc.ToString(); これは、JavaScript シミュレーション クラス定義での使用方法です。これは、他の OO 言語の状況と非常に似ています。ただし、メンバーのプロパティとメソッドは this キーワードを使用して参照する必要があります。上記のプログラムを実行すると、myName が未定義であることが通知されます。
5. スクリプト エンジンの内部オブジェクトのプロトタイプ メソッドに this キーワードを追加します。

Function.prototype.GetName = function()
{
var fnName = this.toString ();
fnName = fnName.substr(0, fnName.indexOf('('));
fnName = fnName.replace(/^function/, '');
return fnName .replace( /(^s )|(s $)/g, '');
}
function foo(){}
alert(foo.GetName());参照するのは、プロトタイプが追加されたクラスのインスタンスです。これは 4 のクラス定義に似ていますが、特別なことは何もありません。 2 と 4 を組み合わせて、混乱を招くキーワード function JSClass() {
this.m_Text = '分割要素';
this.m_Element = document.createElement('DIV');
this.m_Element.innerHTML = this. m_Text ;
this.m_Element.attachEvent('onclick', this.ToString);
JSClass.prototype.Render = function()
{
document.body.appendChild(this . m_Element);
JSClass.prototype.ToString = function()
{
alert(this.m_Text);
var jc = new JSClass();
jc.Render();
jc.ToString();
ページを実行すると、「division element」というテキストが表示されます。

7. このキーワードを CSS 式で使用します:

分割要素

division element

これは 1 と同じとみなしてください。また、div 要素のオブジェクト インスタンス自体も参照しています。
8. 関数の内部関数で this キーワードを使用します。

function innerFoo()
{
this.Name = 'Outer Name'; InnerFoo ()
{
var Name = '内部名';
alert(Name ', ' this.Name);
return InnerFoo; ( )();
実行結果は「内名、外名」と表示されます。 2 の説明によれば、ここでの結果は「内部名、未定義」である方が合理的ですよね。しかし、正しい結果は確かに前者です。これは JavaScript 変数のスコープの問題によるものです。詳細については、「
JScript のキーワード 'var' がまだ存在していることが判明しました。」を参照することをお勧めします。記事 " 1 つの記事と返信