javascript - jQuery 插件中的私有(private)变量

Question

我正在制作一个 jQuery 插件，其中每个元素都应该有自己的变量。我认为正确的方法是:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div>test 1</div>
<div>test 2</div>
<script language="javascript">
$.fn.menu = function(options) {
    var defaults = {i : 0};
    this.each(function(){
        var parameters = $.extend(defaults, options); 
        $(this).on("click", function(event){parameters.i++;alert(parameters.i);});
    });
};
$("div").menu();
</script>

但它不起作用:参数对象是全局的，因此在调用插件的所有元素之间共享。

这个例子有什么问题吗？

Answer 1

使用varparameters = $.extend(defaults, options);，parameters是对(扩展)defaults对象的引用。

Keep in mind that the target object (first argument) will be modified, and will also be returned from $.extend().

您需要创建一个新的对象引用，将空引用传递给 jQuery extend() 方法:

var parameters = $.extend({}, defaults, options);

这相当于:

var parameters = $.extend(JSON.parse(JSON.stringify(defaults)), options);