javascript - 用这个和那个

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

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

最佳答案

它需要像这样：

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

它无法像您那样使用，因为传递给addEventListener的所有内容都是对update()方法的引用。 that的值未传递。此外，在addEventListener回调内部，this的值将设置为导致事件的对象，而不是模型。

因此，要解决此问题，请将外壳函数传递给addEventListener()，然后在该外壳函数内部，调用您实际想要调用的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的变量-您只需要一个正确范围内的变量，该变量不会被其他代码弄乱。

关于javascript - 用这个和那个，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19826957/