jquery插件缺少元素上下文

Question

我正在創建一個jQuery插件使用官方plugin guide。我的基本代碼如下所示：

(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));