$ .each меняет этот контекст внутри закрытия модуля

Question

У меня есть стандартный javascript-модуль (шаблон), который содержит число частных методов и переменных . Я нахожу, что борюсь с сохранением контекста this, чтобы указать на мой модуль после использования $.each.

Я знаю, что метод jQuery $.each создает закрытие и, следовательно, новый «контекст», однако я хочу продолжать иметь this, ссылаясь на модуль. Я обнаружил, что вызов частной функции моего модуля (initFruit() в образце) с помощью initFruit.call() и передача в self копии this (которая находится в области видимости) работает для этой функции, однако, как только эта функция вызывает еще одна функция, контекст снова потерян.

Я действительно не хочу, чтобы все мои личные функции с помощью .call() все время были просто потому, что я использовал $.each дальше в стеке вызовов, так как я могу использовать $.each, не потеряв исходный контекст?

Fiddle: https://jsfiddle.net/BloodBaz/zz11n5wp/1/

Answer 1

В контексте области действия, где вы определяете внутренние затворы, которые заменяют this (например: 90% случаев в частных «методов»), самый простой способ иметь «глобальный масштаб» 'ы Элемент должен определить переменную, обычно self прямо в первой строке вашего основного блока кода. В вашем случае «глобальный» this равен Window, таким образом, вот что я сделал бы, в нескольких словах, заменив «this» на «self», когда вы хотите ссылаться на объект и this, только если вы хотите ссылаться на внутреннее закрытие:

var MyModule = (function ($) { 
    var self = {}; 

    var privateFunction = function() { 
     console.log(self); 
    } 

    self.init = function() { 
     privateFunction(); // exposes all the public methods of self, keeping the "private" functions private 
    }; 

    return self; 
}(jQuery)); 

MyModule.init(); 

https://jsfiddle.net/zz11n5wp/2/

Answer 2

вы можете попробовать связывание функции с областью вы хотите? Вид, как показано ниже

var self = this;  
$.each([1,2,3,4], function(index, item) { 
    // do something 
    // self === this 
}.bind(this)); 

Или, если вам нужна старая поддержка браузера, попробуйте использовать библиотеку как lodash или что-то, чтобы сделать это. Или jquery's $.proxy должен работать.

https://jsfiddle.net/zz11n5wp/3/