-2

次のコードがあるとしましょう：

var obj = {
    element: null,
    init: function(){
        this.element = document.getElementById('element');
        var localElement = document.getElementById('element');

        // Option A...
        $(this.element).click(function(){
            $(this).hide();           // Option A1
            $(this.element).hide();   // Option A2
            $(element).hide();        // Option A3
        });

        // Option B...
        $(element).click(function(){
            $(this).hide();           // Option B1
            $(this.element).hide();   // Option B2
            $(element).hide();        // Option B3
        });
    }
}

それらのいずれかを選択することは、単に好みの問題であることを私は知っています. （編集：私に警告されたように、そうではありません）

しかし、私が知りたいのは
、JSによる評価に違いがありますか...同じアルゴリズムによって評価されますか?

違いがある場合：どちらが速いですか？
どちらがより「正しい」か、または良い習慣に最も近いですか? （該当する場合）
要素を評価するさまざまな時間は無関係であると想定できますか？(大きなループで)

そして、ローカル変数を使用するとlocalElement?

アップデート：

私はフィドルを作成しました（わずかに違います）：http://jsfiddle.net/uD9eB/

私のテストでは、A1、A3、B1、B3 が機能しました。明らかに、'2s (A2/B2) にはありません。

4

2 に答える 2

2

それらを 1 つずつ見ていきましょう。

elementオプション B が存在しない場合、コードは例外をスローします。例外がスローされない場合は、(おそらくグローバルな) 変数要素が別の場所にあり、期待する代わりにそれを使用しているためです。それでも、それは間違っています。

localElementオプション B が存在しない の代わりに使用する答えの残りの部分を想定しましょうelement。

AとBの違い：

を呼び出すとobj.init()、関数this内には. したがって、最初の行は のプロパティを; に設定します。initobjthis.element = 'a';elementobj'a'

ハドラーの内部では、イベントが関連付けられている要素としてjQueryセットが設定thisされています（またはそのようなものです。ここでは詳細について心配していません）。したがって、両方のバージョンのハンドラー内でthis、同じ HTML 要素を指します。

したがって、A と B の唯一の違いは、this.element と localElement の検索速度です。合理的なシナリオでは違いが認識できないため、最適化を試みないことを強くお勧めします。

1 2 と 3 の違い:

  1. thisHTML 要素が どのようになるかを確認します:$(this).hide()期待どおりに動作します: 要素の jQuery ラッパーを取得し、hide() を呼び出します。

  2. this.elementおそらく未定義なので、$(this.element).hide()おそらく何もしません。

  3. $(element).hide()上記で説明したように要素が存在しないため、エラーがスローされます

  4. おまけ:$(localElement).hide()これは機能しますが、不必要なクロージャーが作成されます (jQuery はすでに localElement を として提供しているためthis、別の参照は必要ありません)。

それを行う最善の方法は、Option A1です。

于 2013-10-30T17:04:12.853 に答える
1

このコードだけでは、何thisがバインドされているかを判断することは不可能です。しかし、jQuery を知っていると、それぞれthis.element(A*) とelement(B*) にバインドされます。

にバインドされていませんobj。

一般に、は、 、 、thisで自由に変更できるため、呼び出し元が望むものにバインドされます。Function.bindFunction.applyFunction.call

パフォーマンスについて: への呼び出し$は (比較的) 遅いため、参照をキャッシュします。

于 2013-10-30T16:43:58.193 に答える