jQuery插件范围问题
给出下面的示例(如果使用jsfiddle链接，请单击右边的"content“)，为什么当self到达clickHelper()时会超出范围
我可以想出两种方法来解决它..。(1)我可以把它作为参数传递进来，或者(2)我可以在插件内部定义var self; (function clickHelper()之上)。
但是我不想做#1，因为在我真正的实现中，我已经有了一堆参数和一堆帮助函数.我希望使用scope来避免在任何地方传递self。
我不想使用#2，因为看起来如果这个插件用于页面上的多个元素，可能会有竞争条件.我的假设是jQuery有一个插件实例，因此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>ETA:如果您不介意额外的参数，那么 #1可能是最好的选择，因为#2会像演示的这里那样解决竞争条件/线程安全问题(单击content 1，ok，然后是content 2非常快)。您可以通过像演示的这里那样在处理程序方法中定义助手方法，这样就可以摆脱#2，如果您的助手方法只支持您的处理程序方法，它可能会很好地工作。第三，我想，与其像通常那样调用JavaScript函数，clickHelper()，不如使用适当的闭包function(this) { var self = this; clickHelper() };。
回答 1
Stack Overflow用户
发布于 2012-01-12 19:33:00
变量仅可用于在其中创建变量的函数。因此，通过在self中创建clickHelper，您将使其成为仅用于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);
};https://stackoverflow.com/questions/8841096
复制相似问题
腾讯云开发者
