JSの中のthis変数の使用紹介

JavaScriptにおけるthisの使用
JavaScriptでは、this変数は分かりにくいキーワードであり、thisは非常に強力であり、thisに関する知識を十分に理解することは、対象に向けたJavaScriptプログラムを作成する時に余裕を持つことができる.
this変数にとって一番重要なのは、thisが引用した対象がどれなのかを整理することです.多くの資料には自分の解釈があるかもしれませんが、一部の概念はやや煩雑です.このオブジェクトは、まず、thisの関数がどのオブジェクトとして呼び出されたかを分析すると、thisが参照しているオブジェクトです.
例一、

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

このコードは、obj.y()を実行すると、関数がオブジェクトobjとして呼び出されるので、関数内のthisは、objオブジェクトを指すので、100をイジェクトすることが分かりやすい.
例二、

 
  
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' 
  
 
 

ここでなぜ'this is a property of window'が飛び出すのか、ちょっと迷っているかもしれません.JavaScriptの変数のスコープには「グローバル変数はすべてwindowオブジェクトの属性です」という規則があります.checkThisを実行するとwindow.cchockThisに相当しますので、このときcheckThis関数の中のthisキーワードの指向はwindowオブジェクトになりました.またwindowオブジェクトのx属性がもう一つあるので、'this a property of window'がイジェクトされます.
上記の2つの例は、現在の関数がどのオブジェクトのメソッドとして呼び出されたか(どのオブジェクトによって呼び出されたか)を判断すれば、現在のthis変数の指向性を容易に判断することができるので、比較的分かりやすい.
this.xとappy()、call()
関数の実行環境、すなわち、thisの指向は、callとappyによって再定義され、いくつかのアプリケーションでよく使われています.
例三:コール()

 
  
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つのパラメータがあり、最初のパラメータは、関数がどのオブジェクトによって呼び出されるかを指定するために使用されます.ここでoneを指定したということは、changeStyle関数がoneで呼び出されるということで、関数の中のthisはoneオブジェクトを指しています.二つ目と三つ目のパラメータは、changeStyle関数のtypeとvalueの2つのモダリティに対応しています.私たちが最もよく見た効果は、Dom元素oneのフォントが20 pxになりました.
例四:appy()

 
  
function changeStyle( type , value ){ 
  
 
  
this.style[ type ] = value; 
  
 
  
} 
  
 
  
var one = document.getElementByIdx( 'one' ); 
  
 
  
changeStyle.apply( one , ['fontSize' , '100px' ]); 
  
 
  
changeStyle('fontSize' , '300px'); //    ，       
  
 
 

applyの使い方はcallと大体同じです.一つの違いだけがあります.applyは二つのパラメータだけを受けます.一つ目のパラメータはcallと同じです.二つ目のパラメータは一つの配列でなければなりません.配列の要素は関数のイメージです.
無意味なthisの使い道
例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 
  
 
 

イベント傍受関数のthis

 
  
var one = document.getElementByIdx( 'one' ); 
  
 
  
one.onclick = function(){ 
  
 
  
alert( this.innerHTML ); //this    one  ，      .. 
  
 
  
}; 
  
 
 

注意:jsのグローバル変数はWindowのインスタンスwindowに動的に追加され、そのプロパティとして使用されます.
thisはjsのキーワードです.関数の使用によって、thisの値が変わります.しかし、一つの原則があります.つまり、thisは関数を呼び出す対象を指します.
1、純粋な関数の呼び出し.

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

ここのthisはグローバル変数です.次の例を見ればよく分かりますが、実はthisはグローバルオブジェクトGlobalです.

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

2、方法として呼び出されたら、thisとはこの上級者のことです.

 
  
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、アプリコール
thisはappyの最初のパラメータを指します.

 
  
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 
  
 
 

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