无法访问 JavaScript 外观模式中的私有属性

Question

问题

在外观模式的 "private" 对象中，我正在定义方法和属性。在此 "private" 对象中调用方法时，我收到 Uncaught 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

问题

为什么我在 resizeThrottler 中无法访问 resizehandler 方法？

我在使用 var 而不是 let 时的理解是 JavaScript 是函数范围的，所以我很困惑为什么我不能访问它。

我正在努力提高我的 JavaScript，所以如果我在这里做的事情真的很糟糕，如果有人能指出来，我将不胜感激。

Answer 1

这是因为this与您认为的不符。

你把resizeThrottler方法作为引用传递给浏览器调用，但是当它真的调用它的时候，上下文就不再是你的对象了，而是window，显然没有相同的属性。

您可以按以下方式解决此问题：

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

通过这种方式，您可以将作为处理程序传递的方法的上下文设置为始终运行，其中 _ 为 this。

无法访问 JavaScript 外观模式中的私有属性

Unable To Access Private Properties In JavaScript Facade Pattern

javascript

facade

ecmascript-5