jquery Plugin Missing Element Context

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