JavaScript thisの結び目
2443 ワード
thisキーワードは、その関数を含むオブジェクトのメソッドとして呼び出された時のオブジェクトを参照します.———「JavaScript.Dom高級プログラム設計」
この話は分解してみてください.
this thisを含む関数関数が呼び出されたとき関数を方法とするオブジェクトとは、関数が呼び出された場合、この関数はあるオブジェクトに属する方法で、このオブジェクトは関数の内部thisキーワードが指すオブジェクトです.まず、JavaScriptコードには、すべての変数と方法がwindowというグローバルオブジェクトに含まれています.簡単な例を見てください.
次の例を見てみます.
そうです.windowの対象です.
変数と違って、キーワードthisはスコープの制限がなく、入れ子の関数は呼び出し関数からthisを継承しません.ネスト関数がメソッドとして呼び出された場合、そのthis値はそのオブジェクトを呼び出します.ネスト関数が関数として呼び出されると、そのthis値はグローバルオブジェクトではなく、undefinedです.『JavaScript権威ガイド』
ここでは、otherの属性方法showThisをパラメータとしてdoit関数に伝達しました.JavaScriptではパラメータは値によって伝達されています.fn()で実行すると、otherオブジェクトとしての方法はなくなりますので、ここでthisキーワードはwindowを指しています.
外部関数のthis値にアクセスしたい場合は、thisの値を変数に保存します.
DOM 0レベルのメソッド(onclickなど)で指定されたイベントハンドラとDOM 2レベルの処理プログラム(addEventListener)で指定されたイベントハンドラは、いずれもDOM要素としての方法であり、thisキーワードは要素自体を指しています.しかし、IEでatachEvent()メソッドを使って追加されたイベントプログラムでは、イベントハンドラはグローバルスコープで実行され、thisはwindowを指す.イベントハンドラについては、ここをクリックして詳細を調べてください。
個人結婚
関数があるオブジェクトの方法として呼び出されると、内部thisキーワードはオブジェクトを指し、対象外の場合はwindowを指します.
この話は分解してみてください.
this thisを含む関数関数が呼び出されたとき関数を方法とするオブジェクトとは、関数が呼び出された場合、この関数はあるオブジェクトに属する方法で、このオブジェクトは関数の内部thisキーワードが指すオブジェクトです.まず、JavaScriptコードには、すべての変数と方法がwindowというグローバルオブジェクトに含まれています.簡単な例を見てください.
function showThis() { alert(this); //window } showThis();
もう一つの例を見てみます. var other = { "showThis": function() { console.log(this); // object other } }; other.showThis();
thisはotherの対象を指しました.showThis関数は実行時にotherオブジェクトに属する方法で呼び出されますので、ここのthisはotherオブジェクトを指します.次の例を見てみます.
var other = { "showThis" : function(){ console.log(this); } }; function doit(fn) { fn(); } doit(other.showThis);
thisはどこを指していますか?そうです.windowの対象です.
変数と違って、キーワードthisはスコープの制限がなく、入れ子の関数は呼び出し関数からthisを継承しません.ネスト関数がメソッドとして呼び出された場合、そのthis値はそのオブジェクトを呼び出します.ネスト関数が関数として呼び出されると、そのthis値はグローバルオブジェクトではなく、undefinedです.『JavaScript権威ガイド』
ここでは、otherの属性方法showThisをパラメータとしてdoit関数に伝達しました.JavaScriptではパラメータは値によって伝達されています.fn()で実行すると、otherオブジェクトとしての方法はなくなりますので、ここでthisキーワードはwindowを指しています.
外部関数のthis値にアクセスしたい場合は、thisの値を変数に保存します.
var other = { "say" : function(){ alert("hello world"); }, "bind":function(){ document.onclick = function(){ this.say(); // } } }; other.bind();
上記のコードはエラーが発生します.OclickイベントハンドラはDOM要素としての方法ですので、thisキーワードはdocumentを指しています.ちょっと変えてください var other = { "say" : function(){ alert("hello world"); }, "bind":function(){ var self = this; document.onclick = function(){ self.say(); //"hello world" } } }; other.bind();
bind()にthisキーワードをself変数に保存すると、bind()の内部関数がselfを通じてthisにアクセスできます.DOM 0レベルのメソッド(onclickなど)で指定されたイベントハンドラとDOM 2レベルの処理プログラム(addEventListener)で指定されたイベントハンドラは、いずれもDOM要素としての方法であり、thisキーワードは要素自体を指しています.しかし、IEでatachEvent()メソッドを使って追加されたイベントプログラムでは、イベントハンドラはグローバルスコープで実行され、thisはwindowを指す.イベントハンドラについては、ここをクリックして詳細を調べてください。
個人結婚
関数があるオブジェクトの方法として呼び出されると、内部thisキーワードはオブジェクトを指し、対象外の場合はwindowを指します.