Question

让我说我有以下代码：

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）没有。

Answer 1

让我们一次拿一个。

选项B中的

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

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

A和B之间的区别：

当您致电obj.init()时，this功能中的init为obj。因此，第一行this.element = 'a';将element的属性obj设置为'a';。

在hadler jQuery里面设置this作为事件关联的元素（或类似的东西，我不担心这里的细节）。因此，在两个版本的处理程序中，this将指向相同的HTML元素。

因此，A和B之间的唯一区别是this.element与localElement的查找速度。我强烈建议你不要试图优化它，因为在任何合理的情况下都不会察觉到差异。

1 2和3之间的差异：

了解this将如何成为HTML元素： $(this).hide()将按照您的期望执行：在元素上获取jQuery包装器，在其上调用hide（）。
this.element可能未定义，因此$(this.element).hide()可能无效。
$(element).hide()元素不存在，因此会抛出错误
Bonus：$(localElement).hide()，这会有效，但是会创建一个不必要的闭包（因为jQuery已经将localElement提供为this，你不需要另外引用它），所以它会在不知不觉中变得更慢，效率更低。

最好的方法是选项A1 。

Answer 2

仅从这段代码中就无法确定this的约束条件。但是知道jQuery，它分别绑定到this.element（A *）和element（B *）。

它不受obj约束。

一般情况下，this会绑定到调用者想要的任何内容，因为您可以自由地使用Function.bind，Function.apply和Function.call更改它。

至于性能：对$的任何调用都相对较慢，因此请缓存您的引用。

Javascript范围和使用此关键字

2 个答案: