41

私は多くのソースコードで見ました:

var me = this;

特にExt-JS4(JSフレームワーク)で。なぜそんなことをするのですか?他に理由がありますか、それとも変数を「this」ではなく「me」のように呼び出したいだけですか?

ありがとうございました。

4

4 に答える 4

55

通常は、他の何か(たとえば、コールバック関数など)を参照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)。これはクロージャのデモンストレーションです。

于 2012-11-13T16:23:01.177 に答える
5

もちろん、クロージャがこれを行うより明白な理由ですが、別の理由は、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%しか使用しません。

特に大きなライブラリでは、これによりファイルサイズをかなり減らすことができます。

于 2014-01-31T17:06:04.890 に答える
3

設定により、外部スコープ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();
于 2015-02-05T00:52:14.747 に答える
1

基本的に、これはjavascriptのクロージャを利用します。閉鎖についてこれを読んでください。

これは、異なる意味を持つthisto関数呼び出しの特定のインスタンスを運ぶために使用されます。this

于 2012-11-13T16:23:52.877 に答える