jQuery 插件范围问题

Question

鉴于下面的示例（如果您使用 jsfiddle 链接，请单击右侧的“内容”），为什么 self 在到达 clickHelper() 时会超出范围？

我可以想到两种方法来修复它......（1）我可以将它作为参数传递，或者（2）我可以在插件内部定义 var self; （上面 函数 clickHelper())。

但我不想做#1，因为在我的实际实现中，我已经有一堆参数和一堆辅助函数......我希望使用作用域来避免传递 self周围到处都是。

我不想使用#2，因为如果这个插件用于页面上的多个元素，可能会出现竞争条件...我的假设是 jQuery 有 1 个插件实例，因此 var self 只会存在一次。

我基本上正在寻找将 this 保留在为 jQuery 插件引发的单击事件范围内的最佳实践。

http://jsfiddle.net/QZc9v/

<div id="a1">
    content
</div>

<script type="text/javascript">=
    function info(n, s) {
        var id = (typeof (s.id) == "undefined") ? '' : ': ' + s.id;
        alert(n + ': ' + s + ': ' + typeof (s) + id);
    }

    (function ($) {    
        $.fn.myPlugin = function () {
        function clickHelper() {
            info('self in the Helper...', self);
            self.innerHTML += '2';
        }
        function clickHandler() {
            var self = this;
            info('self in the Handler', self);
            self.innerHTML += '1';
            clickHelper();
        }
        this.bind('click', clickHandler);
        };
    }(jQuery));

    $(function () {
        $('#a1').myPlugin();
    });
</script>

预计到达时间：此处（单击内容 1，好的，然后快速单击内容 2）。您可以通过在处理程序方法中定义辅助方法来摆脱#2，如此处所示，这可能如果您的所有辅助方法所做的都是支持您的处理程序方法，那么对您来说效果很好。 #3，我想，不要像通常那样调用 JavaScript 函数 clickHelper()，而只需使用适当的闭包 function(this) { var self = this; } clickHelper() };.

Answer 1

闭包和作用域指南

变量仅适用于创建它们的函数。因此，通过在 clickHelper 内部创建 self，您可以将其设为仅 clickHelpers 函数的局部变量。

通过将其移至 myPlugins 范围，现在可以通过嵌套函数访问它。

现场演示

 $.fn.myPlugin = function () {
        var self = {}; // self declared here instead can be used within this scope now
        function clickHelper() {
            info('self in the Helper...', self);
            self.innerHTML += '2';
        }
        function clickHandler() {
            self = this;
            info('self in the Handler', self);
            self.innerHTML += '1';
            clickHelper();
        }
        this.bind('click', clickHandler);
    };