私は多くのソースコードで見ました:
var me = this;
特にExt-JS4(JSフレームワーク)で。なぜそんなことをするのですか?他に理由がありますか、それとも変数を「this」ではなく「me」のように呼び出したいだけですか?
ありがとうございました。
私は多くのソースコードで見ました:
var me = this;
特にExt-JS4(JSフレームワーク)で。なぜそんなことをするのですか?他に理由がありますか、それとも変数を「this」ではなく「me」のように呼び出したいだけですか?
ありがとうございました。
通常は、他の何か(たとえば、コールバック関数など)を参照this
するスコープ内への参照を保持できます。this
この例を考えてみましょう。この例では、クリックイベントハンドラー関数が期待するものとは異なるコンテキストを持っています(this
のインスタンスを参照していませんMyClass
)。
var MyClass = function (elem) {
this.elem = elem;
this.name = "James";
elem.addEventListener("click", function () {
alert(this.name); //oops
}, false);
};
ここで、コンストラクター関数内の値への参照を格納し、それをthis
コールバック関数内で使用するこの例について考えてみます。
var MyClass = function (elem) {
var me = this;
this.elem = elem;
this.name = "James";
elem.addEventListener("click", function () {
alert(me.name); //works!
}, false);
};
コールバック関数は、その関数が戻った後でも、外部関数で宣言された変数を参照できます(MyClass
コンストラクターは実行されるとすぐに戻りますaddEventListener
)。これはクロージャのデモンストレーションです。
もちろん、クロージャがこれを行うより明白な理由ですが、別の理由は、javascriptファイルの縮小バージョンのサイズを縮小することである可能性があることを付け加えたいと思います。
this
ファイルを縮小する過程でキーワードの名前を変更することはできませんが、ローカル変数の名前を変更することはできます。つまり、これ(4文字)を使用する場合は常に、代わりに1文字のローカル変数を使用できます。
ExtJSの次の関数例Ext.data.Store
を考えてみましょう。
filterBy: function(fn, scope) {
var me = this;
me.snapshot = me.snapshot || me.data.clone();
me.data = me.queryBy(fn, scope || me);
me.fireEvent('datachanged', me);
me.fireEvent('refresh', me);
}
(ここには閉鎖は含まれないことに注意してください)
およびその縮小バージョン:
filterBy:function(b,a){var c=this;c.snapshot=c.snapshot||c.data.clone();c.data=c.queryBy(b,a||c);c.fireEvent("datachanged",c);c.fireEvent("refresh",c)}
(151文字/バイト)
this
ここで、ローカル変数に割り当てなかった場合の縮小バージョンと比較してみましょう。
filterBy:function(b,a){this.snapshot=this.snapshot||this.data.clone();this.data=this.queryBy(b,a||this);this.fireEvent("datachanged",this);this.fireEvent("refresh",this)}
(170文字/バイト)
ご覧のとおり、ローカル変数を含むバージョンは、this
代わりに毎回使用する関数のサイズの88%しか使用しません。
特に大きなライブラリでは、これによりファイルサイズをかなり減らすことができます。
設定により、外部スコープme=this
の変数を内部スコープで使用できます。this
var Outer= function () {
var me = this;
me.x = "outerx";
me.inner = {
x: "innerx",
displayValues: function () {
console.log(me.x); //outerx
console.log(this.x); //innerx
}
};
};
new Outer().inner.displayValues();
基本的に、これはjavascriptのクロージャを利用します。閉鎖についてこれを読んでください。
これは、異なる意味を持つthis
to関数呼び出しの特定のインスタンスを運ぶために使用されます。this