-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

让我们一次拿一个。

element在选项 B 不存在的情况下，代码将抛出异常。如果它没有抛出异常，那是因为你在其他地方有一个（可能是全局的）变量元素，它使用它而不是你期望的。不过，这是错误的。

让我们假设选项 B 使用的其余答案localElement而不是不存在的element.

A和B的区别：

当你调用obj.init()时，函数this里面是. 所以第一行将属性设置为; 。initobjthis.element = 'a';elementobj'a'

在 hadler 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. Bonus: $(localElement).hide()，这会起作用，但是会创建一个不必要的闭包（因为 jQuery 已经提供了 localElement as 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 回答