我应该避免创建这个 JavaScript 闭包吗？

Question

这可能有点抽象，但我正在尝试了解 JavaScript 闭包等。请使用以下代码：

function MyObj() {
    var me = this;

    this.foo = function(bar) {
        // Do something with 'bar'
    }

    // Set up lots of local variables etc.
    // ....

    $(window).load(function() {
        // Add a delegated click handler to specific <input> elements
        $(document).on('click.myobj', 'input.special', function() {
            // Do something with the <input> that triggered the click event
            me.foo(this);
        });
    });
}

var myObj = new MyObj();

传递给它的匿名函数绑定到 click 事件创建一个引用 me 的闭包。我想知道的是这样做是否更好（以避免关闭）：

$(window).load(function() {
    // Add a delegated click handler to specific <input> elements
    (function(localMe) {
        $(document).on('click.myobj', 'input.special', function() {
            // Do something with the <input> that triggered the click event
            localMe.foo(this);
        });
    })(me);
});

这是一种更好的方法，还是我对创建闭包过于偏执？或者，有没有“第三条路”？

---

编辑

另外，做这样的事情会更好吗：

$(window).load(function() {
    // Add a delegated click handler to specific <input> elements
    $(document).on('click.myobj', 'input.special', {localMe : me}, function(event) {
        // Do something with the <input> that triggered the click event
        event.data.localMe.foo(this);
    });
});

Answer 1

后者（AFAIK）效率更高，但可能无法衡量，除非在紧密循环中使用。

原因是所有的变量解引用都必须遵循作用域链。在后一种情况下，变量localMe可以在匿名函数的参数列表中找到。

在前一种情况下，变量不是在那里找到的，而是在外部范围内。向上遍历作用域链需要额外的时间。

Answer 2

匿名函数现在在 javascript 中大量使用（作为参数和作用域/闭包的直接函数）。没有性能问题。

但您可能会遇到代码阅读问题。因为当你看到一个变量时，你必须检查变量来自哪里。但这里没什么大不了的。

在你的第二个例子中，你仍然有一个闭包“break”。因为在click 中的匿名函数中，您使用了localMe 变量。 localMe 是您的函数之外的函数的参数。

// Here, 'me' is a direct local variable.
$(window).load(function() {
    // Here, we are in an anonymous fonction, so 'me' is not a direct variable anymore. But you still can access it.

    // Add a delegated click handler to specific <input> elements
    (function(localMe) {
        // Here, 'localMe' is a direct local variable.
        $(document).on('click.myobj', 'input.special', function() {
            // We are in an anonymous function, so 'localMe' is not a direct variable anymore.

            // Do something with the <input> that triggered the click event
            localMe.foo(this);
        });
    })(me);
});

如果你真的想避免闭包“中断”，你应该将你的函数绑定到你的对象。但请注意，并非所有浏览器都支持函数上的bind 方法。

Answer 3

如果您从构造函数绑定事件，您将总是创建一个闭包。事实上，您甚至需要闭包来保留对您的实例的引用。但是，您可能会这样做：

function MyObj() {
    this.foo = function(bar) {
        // Do something with 'bar'
    }

    // Set up lots of local variables etc.
    // ....
}

var myObj = new MyObj();
$(function() {
    $(document).on('click.myobj', 'input.special', function() {
        myObj.foo(this);
    });
});

如果您只创建构造函数的单例实例，那无论如何都没关系。

Answer 4

我可能会这样做：

var bind = function( fn, me ) { return function() { return fn.apply(me, arguments); }; },
    Object = (function() {
        function Object() {
            this.handler = bind(this.handler, this);
            // Add a delegated click handler to specific <input> elements.
            $(document).on("click.myobj", "input.special", this.handler);
        }

        Object.prototype.foo = function( bar ) {
            // Do something with "bar".
        };

        Object.prototype.handler = function( event ) {
            // Do something with the <input> that triggered the click even.
            return this.foo(event.currentTarget);
        };

        return Object;
    })();

var obj = new Object();

这会跳过闭包和 iifes 的使用，而是使用 .apply。不确定它是否更有效，但这是另一种选择。