javascriptのthisの使い方
2126 ワード
thisはJavascript言語のキーワードです.
関数が動作する時に自動的に生成される内部オブジェクトを表します.関数の内部でのみ使用できます.例えば、
function test(){
this.x=1;
)
関数を使う場合によって、thisの値が変わります.しかし、一つの原則があります.つまり、thisとは、関数を呼び出す対象のことです.
以下は四つの状況に分けて、thisの使い方を詳しく説明します.
状況一:純粋な関数呼び出し
これは関数の最も一般的な使い方であり(直接に呼び出される)、グローバルコールに属していますので、thisはグローバルオブジェクトGlobalを表します.
下記のコードを見てください.その結果は1です.
function test(){
this.x=1;
alert(this.x)
)
test()///1
このとき、thisはグローバルオブジェクトです.関数が呼び出されたとき、this.xはグローバル変数xにアクセスします.
var x=1
function test(){
alert(this.x)
)
test()///1
また、testでthis.xを賦課すると、グローバルのx変数が変わります.
var x=1
function test(){
this.x=0
)
test()
alert(x)//0
ケース二:対象方法としての呼び出し
関数はまた、あるオブジェクトの方法として呼び出すことができます.この場合、thisは、この上位オブジェクト自体を指します.
function test(){
alert(this.x)
)
var o={}
o.x=1
o.m=test;//test関数のthisは、thisを呼び出す対象を表しますo
o.m()///1
状況三はコンストラクタとして呼び出される.
構造関数とは、この関数を通して新しいオブジェクトを生成することです.このとき、thisはこの新しいオブジェクトを指します.
function test(){
this.x=1;
)
var o=new test();
alert(o.x)//1
運転結果は1です.この時のthisが全体の対象ではないことを示すために、コードを変更します.
var x=2
function test(){
this.x=1;
)
var o=new test();
alert(x)//2,グローバルオブジェクトxは影響されていません.
実行結果は2で、グローバル変数xの値はまったく変わっていないことを示しています.
以下の例は、testのコンストラクターを実行した後、o.xの割当値がコンストラクターによって変化されることを示している.
状況四pppy呼び出し
apply()は関数オブジェクトの一つの方法で、関数を変更する呼び出しオブジェクトとして機能し、最初のパラメータは変更後の呼び出しの対象を表します.したがって、thisとは、この最初のパラメータのことです.
var x=0
function test(){
alert(this.x)
)
var o={}
o.x=1
o.m=test
o.m.apply()//0
apply()のパラメータが空の場合は、グローバルオブジェクトをデフォルトで呼び出します.そのため、この場合の運転結果は0で、thisが全体のオブジェクトを指すことを証明しています.
最後の行のコードを
o.m.apply(o)//1
運転結果が1になりました.この時のthisが対象であることが証明されました.
関数が動作する時に自動的に生成される内部オブジェクトを表します.関数の内部でのみ使用できます.例えば、
function test(){
this.x=1;
)
関数を使う場合によって、thisの値が変わります.しかし、一つの原則があります.つまり、thisとは、関数を呼び出す対象のことです.
以下は四つの状況に分けて、thisの使い方を詳しく説明します.
状況一:純粋な関数呼び出し
これは関数の最も一般的な使い方であり(直接に呼び出される)、グローバルコールに属していますので、thisはグローバルオブジェクトGlobalを表します.
下記のコードを見てください.その結果は1です.
function test(){
this.x=1;
alert(this.x)
)
test()///1
このとき、thisはグローバルオブジェクトです.関数が呼び出されたとき、this.xはグローバル変数xにアクセスします.
var x=1
function test(){
alert(this.x)
)
test()///1
また、testでthis.xを賦課すると、グローバルのx変数が変わります.
var x=1
function test(){
this.x=0
)
test()
alert(x)//0
ケース二:対象方法としての呼び出し
関数はまた、あるオブジェクトの方法として呼び出すことができます.この場合、thisは、この上位オブジェクト自体を指します.
function test(){
alert(this.x)
)
var o={}
o.x=1
o.m=test;//test関数のthisは、thisを呼び出す対象を表しますo
o.m()///1
状況三はコンストラクタとして呼び出される.
構造関数とは、この関数を通して新しいオブジェクトを生成することです.このとき、thisはこの新しいオブジェクトを指します.
function test(){
this.x=1;
)
var o=new test();
alert(o.x)//1
運転結果は1です.この時のthisが全体の対象ではないことを示すために、コードを変更します.
var x=2
function test(){
this.x=1;
)
var o=new test();
alert(x)//2,グローバルオブジェクトxは影響されていません.
実行結果は2で、グローバル変数xの値はまったく変わっていないことを示しています.
以下の例は、testのコンストラクターを実行した後、o.xの割当値がコンストラクターによって変化されることを示している.
var x = 7;
function test(){
this.x = 0;
//alert(this.x); // 0
}
var o = {};
o.x = 2;
alert(o.x); //2
o.m = test;
o.m();
alert(o.x);// 0, test o x 0
o.x = 6;
alert(o.x);// 6, o x
alert(this.x); //7, x
状況四pppy呼び出し
apply()は関数オブジェクトの一つの方法で、関数を変更する呼び出しオブジェクトとして機能し、最初のパラメータは変更後の呼び出しの対象を表します.したがって、thisとは、この最初のパラメータのことです.
var x=0
function test(){
alert(this.x)
)
var o={}
o.x=1
o.m=test
o.m.apply()//0
apply()のパラメータが空の場合は、グローバルオブジェクトをデフォルトで呼び出します.そのため、この場合の運転結果は0で、thisが全体のオブジェクトを指すことを証明しています.
最後の行のコードを
o.m.apply(o)//1
運転結果が1になりました.この時のthisが対象であることが証明されました.