3

私はJavaScriptにかなり慣れていないので、ダウンロードしたJavaScriptコードをクリーンアップしています。このコードの不整合の1つは、両方とそれを参照するthisローカル変数の混合使用です。that

サンプルコードスニペット（jQuery UIウィジェット内のプライベートメソッド）：

_populateLists: function(options) {
    //do stuff with this

    var that = this;
    options.each(function(index) {
        //use both this AND that, they are different in this scope
    });

    //here this and that are the same thing
    //I want to be consistent, is one preferable over the other?
},

コード全体の多くの場所で、スコープがそのようなものthis === thatである場合、同じコード行内であっても、さまざまな使用法があります。

読みやすさと保守性のために、またはを使用することが好ましいですthisかthat？

注：これらのタイプの多くは、開発者の好みに依存していることを認識しています。しかし、一方を他方よりも使用するようにコードを書き直すことを決定する前に、一方が他方よりも優先されるかどうか/理由を理解したいと思います。

編集：このスクリプトでは、ローカル変数に割り当てられている唯一の理由thisは、内部クロージャー内から参照できるようにするためだと思います。

4

5 に答える 5

4

thisの値が一般的にローカル変数に割り当てられる理由は、その値を閉じて、ネストされた関数内で使用できるようにするためです。

thisは特殊な変数であり、関数が呼び出されたオブジェクト（存在する場合）に自動的に設定されるという点で、通常のローカル変数とは多少異なります。それ以外の場合は、グローバルオブジェクト。ただし、この固有の値は、 j​​Queryのとthisの自由な使用によって多少混乱します。これにより、呼び出し元はの値を指定できます。callapplythis

ネストされた関数では、スコープチェーンを介して親のローカル変数を継承するのと同じ方法で、this親の値を継承しません。this

このため、例のコールバックthisなど、ネストされた関数内に値が必要な場合は、の値をローカル変数に格納する必要があります。each

var a = { fn: function() {
    // here, `this` is the object `a`
    var x = this;
    function b() {
        // here, `this` is `window` because `b` is invoked with no context
        // ...but we still have access to `x`, whose value would be `a`
    }
    b();
}};

a.fn(); // by invoking `fn` as a property of `a`, we implicitly set `fn`'s
        // `this` to `a`.

// Compare to:
var f = a.fn;
f();    // we now invoke `fn` with no context, so its `this` will be `window`.
a.fn.call(window); // or by specifying context explicitly

もちろん、あなたがまだ親スコープにいるときは、thisそれでも等しいthat（selfまたは何でも）でしょう。一見、2つの間に違いはないように見えるかもしれませんが、パフォーマンスへの重要な影響が1つあります。

ミニファイ。 ローカル変数に割り当てる場合this、その変数へのすべての参照を1文字に減らすことができます。thisできないへの参照。この縮小された出力を比較します。

function a() {this.w=1;this.x=2;this.y=3;this.z=4;}
function b() {var t=this;t.w=1;t.x=2;t.y=3;t.z=4;}

への4つの参照をthis使用して、変数を使用してバイトを節約します。thisとにかく内部関数をキャプチャする必要がある場合thisは、外部関数ではなくローカル変数を使用すると、単一の参照でも節約できます。

于 2012-12-26T22:48:43.180 に答える
2

一貫性と意味のある変数名の標準的な主観的根拠以外に理由はありません。

于 2012-12-26T21:55:04.627 に答える
0

$(this)jQueryを使用するときに変数を割り当てる場合$thisは、jQueryオブジェクト（$）を参照するために使用することをお勧めします。$(this)これは、別の関数のスコープ内にあるときに親オブジェクトを参照しなくなったときに一般的に使用されます。

ただし、変数名は重要ではなく、割り当てられたオブジェクトを参照するだけです。変数名として、、、、などを使用できますが、JavaScriptでは現在$thisの$thatスコープ内のオブジェクトを参照する予約語であるため、変数名として使用することはできません。またはに任意のタイプの値を割り当てることはできません。$objthatobjbuttonthisthisthis$(this)

例...

this = 'something'; // or
$(this) = 'something';

上記のステートメントは両方とも例外をスローします。

使用例を$this = $(this);以下に示します。

jQueryの投稿が成功した後、IDが「someButton」のボタンのhtmlを変更するには...

$('#someButton').click(function() {
    var data = $('form').serializeArray();
    // some validation or something

    $this = $(this);
    // note the lack of the var command to 
    // globalize $this within the click function

    $.post('somePage',data,function(html) {
         $this.html(html); 
         // identical to $('#someButton').html(html);
    });
});
于 2013-02-05T17:16:42.817 に答える
0

ローカル変数に割り当てるのが面倒thisな場合、特にローカル変数に有用な名前を付けている場合は、それを使用することをお勧めします。

$('body').on('click', '.something', function() {
  var clicked = this;

  // now "clicked" is the element clicked on
});

jQueryの例の場合ですが、ライブラリや生のJavaScriptに関係なく同じ問題です。個人的には、ほとんどの場合、「それ」はかなり弱い変数名だと思います。

于 2012-12-26T21:52:16.723 に答える
0

ローカル変数に割り当てる目的がthisセマンティクスを実現することである場合は、セマンティック変数名を使用してから、ではなく変数を使用するのが理にかなっていますthis。

ただし、このシナリオでローカル変数に割り当てる目的は、内部関数で使用するためにローカル変数をキャッシュすることであるため、外部スコープでthis引き続き使用する方が読みやすく、意味論的であると思います。this

that通常はあまり良い変数名ではありませんが、このシナリオでは意味が明確なままだと思います。私の考えでは、内側の範囲では、それは親が自己であるため、これになります。

これはjQueryUIウィジェットであるため、jQueryUIに「付属」しているいくつかの標準ウィジェットのソースを調べました。外側のスコープthisを参照する必要がある場合を除いて、全体で使用するのは標準的な規則のようです。this後者の場合、thisは、という名前の変数にキャッシュされますthat。ローカル変数が存在する場合でも、それは内部スコープでのみ使用されます。

わかりやすくするための例：

_populateLists: function(options) {
    var that = this; //we'll need `this` within a closure later

    //do some stuff with `this`

    options.each(function(index) {
        //do stuff with `this` AND `that`
        //`that` is the `this` of the outer scope
    });

    //do some more stuff with `this`
},

一貫性が目標である場合は、標準のjQueryUIウィジェットで使用されているのと同じ規則に従うのが理にかなっています。

于 2012-12-27T00:55:37.800 に答える