Question

我正在使用官方plugin guide创建一个jquery插件。我的基本代码如下：

(function ($) {
    $.fn.categories = function(options) {

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

        var init = function()
        {
            // `this` is undefined here 
        };

        // `this` points to $("#pick-category") here
        init();
        return this;
    };
}( jQuery ));

// usage
$(document).ready(function(){
    $("#pick-category").categories();
});

我的问题是，在函数$.fn.categories的上下文中，this被定义，实际上是指$(#pick-category) jquery对象。但是，在init函数调用的$.fn.categories函数的上下文中，this报告为undefined。

我的问题是，这里发生了什么？上下文如何丢失？

Answer 1

init被定义为恰好是函数的局部变量。它没有任何背景，除了你给它的东西。它与在其中声明的父函数无关。

所以使用call()：

给它一个上下文

(function ($) {
    $.fn.categories = function(options) {

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

        // define a local function unrelated to $.fn.categories or any other context
        var init = function()
        {
            // `this` is now $("#pick-category")
        };

        // `this` points to $("#pick-category") here

        // call the function with an explicit context
        init.call(this);

        return this;
    };
}( jQuery ));

jquery插件缺少元素上下文

1 个答案: