JS でのこの変数の簡単な説明

JavaScript では、この変数は非常に強力です。この記事では、JavaScript でのこれの使用方法について詳しく説明します。興味のある方は、

JavaScript の使用方法を参照してください。これは JavaScript のとらえどころのないキーワードであり、これに関する知識を完全に理解すると、

オブジェクト指向
JavaScript プログラムを簡単に作成できるようになります。
この変数について最も重要なことは、これがどのオブジェクトを参照しているのかを明確にできることです。多くの情報には独自の説明があるかもしれませんが、一部の概念は少し複雑です。私の理解は次のとおりです。まず、this が配置されている関数がメソッドとして呼び出されるオブジェクトを分析し、次にそのオブジェクトが this によって参照されるオブジェクトです。
例1、


コードは次のとおりです:

var obj = {}; 

obj.x = 100; 

obj.y = function(){ alert( this.x ); }; 

obj.y(); //弹出 100

このコードは非常に理解しやすいですが、obj.y()が実行されると、オブジェクトobjのメソッドとして関数が呼び出されます。関数本体は obj オブジェクトを指しているため、100 がポップアップ表示されます。

例 2、

コードは次のとおりです:

var checkThis = function(){ 

alert( this.x); 

}; 

var x = 'this is a property of window'; 

var obj = {}; 

obj.x = 100; 

obj.y = function(){ alert( this.x ); }; 

obj.y(); //弹出 100 

checkThis(); //弹出 'this is a property of window'

なぜここで「これはウィンドウのプロパティです」というメッセージが表示されるのか、少しわかりにくいかもしれません。 JavaScriptの変数スコープには「グローバル変数は

ウィンドウオブジェクト

のプロパティである」というルールがあります。 checkThis()を実行すると、window.checkThis()と等価になります。 したがって、このときcheckThis関数のthisキーワードの箇所がwindowオブジェクトとなり、windowオブジェクトが別のx属性('thisis)を持っていることになります。 「ウィンドウのプロパティ」）、「これはウィンドウのプロパティです」がポップアップ表示されます。

上記の 2 つの例は、現在の関数がどのオブジェクトをメソッドとして呼び出すか (どのオブジェクトによって呼び出されるか) さえ分かれば、現在の this 変数のポイントを簡単に決定できるため、比較的理解しやすいです。
this.x と apply()、call()

call と apply を通じて、関数
の実行環境、つまり、一部のアプリケーションで非常に一般的に使用される this のポイントを再定義できます。

例 3: call()
コードは次のとおりです:

function changeStyle( type , value ){ 

this.style[ type ] = value; 

} 

var one = document.getElementByIdx( 'one' ); 

changeStyle.call( one , 'fontSize' , '100px' ); 

changeStyle('fontSize' , '300px'); //出现错误，因为此时changeStyle中this引用的是window对象，而window并无style属性。

changeStyle.call() には 3 つのパラメーターがあることに注意してください。最初のパラメーターは、関数が呼び出されるオブジェクトを指定するために使用されます。ここでは 1 つが指定されています。これは、changeStyle 関数が 1 つによって呼び出されることを意味するため、関数本体のこの点が 1 つのオブジェクトになります。 2 番目と 3 番目のパラメーターは、changeStyle 関数の 2 つの仮パラメーターの型と値に対応します。最も一般的な影響は、Dom 要素 1 のフォントが 20 ピクセルになることです。

例 4: apply()

コードは次のとおりです:

function changeStyle( type , value ){ 

this.style[ type ] = value; 

} 

var one = document.getElementByIdx( 'one' ); 

changeStyle.apply( one , ['fontSize' , '100px' ]); 

changeStyle('fontSize' , '300px'); //出现错误，原因同示例三

apply の使用法は call とほぼ同じですが、唯一の違いは apply が最初のパラメーターを 2 つだけ受け入れることです。呼び出し、2 番目のパラメーターは配列である必要があり、配列内の要素は関数の仮パラメーターに対応します。

これの意味のない(奇妙な)使用

例5:


コードは次のとおりです:

var obj = { 

x : 100, 

y : function(){ 

setTimeout( 

function(){ alert(this.x); } //这里的this指向的是window对象，并不是我们期待的obj,所以会弹出undefined 

, 2000); 

} 

}; 

obj.y();

期待される効果を達成する方法

コードは次のとおりです:

var obj = { 
x : 100, 
y : function(){ 
var that = this; 
setTimeout( 
function(){ alert(that.x); } 
, 2000); 
} 
}; 
obj.y(); //弹出100

これはイベントリスニング関数内です

コードは次のとおりです:

var one = document.getElementByIdx( 'one' ); 

one.onclick = function(){ 

alert( this.innerHTML ); //this指向的是one元素，这点十分简单.. 

};

注: js のグローバル変数は、属性として Window のインスタンス ウィンドウに動的に追加されます。

これは js のキーワードであり、関数がさまざまな状況で使用されると、この値は変わります。ただし、常に原則があり、これは関数を呼び出すオブジェクトを参照します。

1. 純粋な関数呼び出し。


コードは次のとおりです:

function test() { 
this.x = 1; 
alert(x); 
} 
test();

実際、これはグローバル変数です。実際、これはグローバル オブジェクト Global であることが次の例を見るとよくわかります。

コードは次のとおりです:

var x = 1; 
function test() { 
alert(this.x); 
} 
test();//1 

var x = 1; 
function test() { 
this.x = 0; 
} 
test(); 
alert(x);//0

2. メソッド呼び出しとして、これは上位オブジェクトを参照します。

コードは次のとおりです:

function test() { 
alert(this.x); 
} 

var o = {}; 
o.x = 1; 
o.m = test; 
o.m(); //1

3.

コンストラクター

として呼び出されます。いわゆるコンストラクター関数は、新しいオブジェクトを生成することです。このとき、this はこのオブジェクトを指します。

コードは次のとおりです:

function test() { 
this.x = 1; 
} 
var o = new test(); 
alert(o.x);//1

4. apply呼び出し

これはapplyの最初のパラメータを指します。

コードは次のとおりです:

var x = 0; 
function test() { 
alert(this.x); 
} 

var o = {}; 
o.x = 1; 
o.m = test; 
o.m.apply(); //0 
o.m.apply(o);//1

apply にパラメーターがない場合、グローバル オブジェクトとして表されます。したがって、値は 0 です。

以上がJS でのこの変数の簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。