JSでのこの変数の使い方入門_基礎知識

JavaScript での this の使用

this 変数は JavaScript ではわかりにくいキーワードですが、これに関する知識を十分に理解すると、オブジェクト指向の JavaScript プログラムを作成できるようになります。容易に。

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

例 1、

コードをコピーします コードは次のとおりです。

var obj = {};

obj.x = 100;

obj.y = function(){alert(this.x) }; (); //Pop up 100


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

例 2、

コードをコピーします コードは次のとおりです。

var checkThis = function(){

alert(this.x);

var x = 'これはウィンドウのプロパティです'; 🎜>var obj = {};

obj.x = 100;

obj.y = function(){alert(this.x) }; .y( ); //ポップアップ 100

checkThis(); //「これはウィンドウのプロパティです」


なぜ「これはウィンドウのプロパティです」 ' ここにポップアップが表示されるので、少し混乱するかもしれません。 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 が参照しているためエラーが発生しました。 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') //エラーが発生しました。例 3 と同じ


apply の使用法は call とほぼ同じですが、唯一の違いは apply が受け入れるパラメータは 2 つだけです。2 番目のパラメータは次のようになります。配列内の要素は関数に対応します。

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

例 5:

コードをコピー


Code As

var obj = { x : 100, y : function(){

setTimeout(

function(){alert(this.x); } //ここでは、期待するオブジェクトではなくウィンドウオブジェクトを指しているため、未定義がポップアップします

,



};

obj.y();
目的の効果を実現する方法

コードをコピーします コードは次のとおりです:

var obj = {

x : 100,

y : function(){

var that = this;

setTimeout(
関数() { アラート(that.x); }

, 2000);

}; //pop 100


イベントリスニング関数のこれ

コードをコピー

コードは次のとおりです: var one = document.getElementByIdx( 'one' ); one.onclick = function(){

alert( this.innerHTML ); /this は 1 つの要素を指します。これは非常に簡単です。

};


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

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

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




コードをコピー

コードは次のとおりです。 function test() { this .x = 1; alert(x);

}

test();


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

コードをコピーします

コードは次のとおりです。 var x = 1; test() { alert(this.x); }

test();//1

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


2. メソッド呼び出しとして、これは上位を参照します。物体。

コードをコピー

コードは次のとおりです。 function test() { alert (this.x); var o = {};

o.m = test; 🎜>

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




コードをコピー


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

function test() {
this .x = 1;

} var o = new test(); alert(o.x);//1 4. 適用呼び出しこれが指すのは、apply の最初のパラメータです。

コードをコピーします


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

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

var o = {}; o.m = test; ); / /0 o.m.apply(o);//1 apply にパラメーターがない場合、グローバル オブジェクトとして表されます。したがって、値は 0 です。