1 
<script>
    var model;
    $(document).ready(
        function() {
            console.log("Document ready invoked!!");
            model = new ModelContainer({container:$('#containerX')[0]});

            var that = model;
            window.addEventListener( 'resize', that.update, false );
        }
    );

    ModelContainer = function(param) {

        this.containerID = param.container.id;
        this.containerWidth = param.container.offsetWidth;
        this.containerHeight = param.container.offsetHeight;

        console.log("Container ID width and height :", this.containerID, this.containerWidth, this.containerHeight);

    }

    ModelContainer.prototype.update = function () {

        console.log("Update called invoked");
        this.containerWidth = $(this.containerID).offsetWidth;
        this.containerHeight = $(this.containerID).offsetHeight;

        console.log("Container ID width and height :", this.containerID, this.containerWidth, this.containerHeight);

    }

</script>

我试图了解在更新方法中使用“那个”。this.containerId 未定义。任何有助于理解为什么从侦听器方法调用“that.update”失败的帮助将不胜感激。

4

1 回答 1

2

它需要是这样的：

window.addEventListener( 'resize', function() {that.update()}, false );

它不能按照您的方式工作，因为传递给 addEventListener 的所有内容都是对该update()方法的引用。的值that未通过。此外，在 addEventListener 回调中， 的值this将设置为导致事件的对象，而不是您的模型。

所以，为了纠正这个问题，你将一个 shell 函数传递给addEventListener()然后在那个 shell 函数中，你调用obj.method()你真正想要调用的那个，这样调用它会this在你的方法中得到正确的值。

在您的代码中，您不能model在事件回调中使用该变量，因为它不是局部变量，因此可以在您需要时将其更改为其他值。但是，通过将其分配给局部变量，您可以确保在调用回调函数时它的值将是正确的值，因此可以在回调函数中使用它。

当回调函数需要访问在安装事件侦听器和事件实际发生（并调用回调）之间可能不会保持不变的变量时，这是一个常用工具。

如果没有其他人需要访问该model变量，您也可以这样做：

$(document).ready(function() {
        console.log("Document ready invoked!!");
        var model = new ModelContainer({container:$('#containerX')[0]});

        window.addEventListener( 'resize', function() {model.update()}, false );
    }
);

没有特别需要命名变量that- 您只需要在正确范围内不会被其他代码弄乱的变量。

于 2013-11-07T02:42:53.727 回答