Невозможно получить доступ к частной собственности в JavaScript Фасад шаблон

Question

Проблема

В моей «частной» объект для шаблона фасада, я определяю методы и свойства. Когда вы вызываете метод в этом «частном» объекте, я получаю сообщение «Невыпущен Typerror» о том, что метод, который я вызываю, не является функцией.

Кодекс

var lazySize = (function() { 

     var _ = { 
      images: [], 

      lazySizes: {}, 

      resizeTimeout: null, 

      pageWidth: document.getElementsByClassName('crop_image')[0].offsetWidth, 

      resizeHandler: function() { 
       var i = 0; 
       for (var image in this.lazySizes) { 
        if (this.pageWidth < image) { 
         this.images[i++].src = this.lazySizes[image]; 
        } 
       } 
      }, 

      resizeThrottler: function() { 
       if (!this.resizeTimeout) { 
        this.resizeTimeout = setTimeout(function() { 
         this.resizeTimeout = null; 
         this.resizeHandler(); 
        }, 66); 
       } 
      } 
     }; 

     return { 
      init: function() { 
       window.addEventListener('resize', _.resizeThrottler, false); 
      } 
     }; 

    }()); 

lazySize.init(); 

Ошибка

Uncaught TypeError: this.resizeHandler is not a function

Вопрос

Почему я не могу получить доступ к этому методу resizehandler в то время как внутри resizeThrottler?

Мое понимание при использовании var, а не let, заключается в том, что JavaScript работает в области видимости, поэтому я довольно озадачен тем, почему я не могу получить к нему доступ.

Я пытаюсь улучшить свой JavaScript, поэтому, если я делаю что-то очень плохое здесь, я был бы очень признателен, если бы кто-нибудь мог указать на него.

Answer 1

Это потому, что this не соответствует тому, что вы думаете.

Вы передаете метод resizeThrottler в качестве ссылки для вызова браузера, но когда он его вызывает, контекст больше не является вашим объектом, а window, который, очевидно, не обладает теми же свойствами.

Вы могли бы решить эту проблему следующим образом:

window.addEventListener('resize', _.resizeThrottler.bind(_), false); 

Таким образом, вы установили контекст метода, переданного в качестве обработчика всегда выполняться с _ в this.