不能在setInterval中使用这个

2022-03-30 00:00:00 javascript prototype

似乎不能在setInerval函数内使用this。为什么会这样呢？什么是优雅的解决方案？

<html>
<script>
var something = function(tMessage){
    this.message = tMessage;
};

something.prototype = {
    start : function(counter){
       document.getElementById('result').innerHTML += this.message + "+++<br />";
        var looper = setInterval(
            function(){
                // This is printing "undefined"
                document.getElementById('result').innerHTML += this.message + "<br />";
                if(!counter--)
                    clearInterval(looper);
            },
            20
        );
    }
};


window.onload = function(){
    var e = new something("hi");
    e.start(2);
}
</script>
<body>
<div id="result"></div>
</body>
</html>

编辑

谢谢您的回答！！但有谁能解释一下发送参数、设置和额外变量之间的区别吗？有内存问题吗？

解决方案

这里的问题是，当您的函数被调用时，this引用全局对象。要保留当前作用域，您可以关闭：

    var looper = setInterval(
        (function(scope){
            return function(){
                // This will no longer be printing "undefined"
                document.getElementById('result').innerHTML += scope.message + "<br />";
                if(!counter--)
                    clearInterval(looper);
            };
         })(this),
        20
    );

我不会挥手并试图解释闭包(我仍在完全掌握它)，而是将您引向这个极好的答案：https://stackoverflow.com/a/111200/1726343

相关文章