两个相似功能之间的区别，为什么一个工作而另一个不工作

Question

我有两个功能，一个工作，另一个不工作。

它们是相等的，除了一个是循环遍历一个变量，其中保存了范围的全局对象（希望这是有意义的），另一个试图直接循环遍历文本，但失败了，因为它抛出错误：

Uncaught TypeError: Cannot read property '0' of undefined

这是fiddle：

http://jsfiddle.net/4p1p4wjy/2/

据我所知，该函数的第二个版本不起作用，因为它无法从函数的回调中以某种方式访问 this.splittedText。

第一个工作函数：

        loopThroughSplittedText: function() {
            // delete this
            var locationInString = 0;
            var splittedText = this.splittedText;

            function delayedOutput() {
                document.getElementById('output').innerHTML = splittedText[locationInString];

                locationInString++;

                if(locationInString < splittedText.length) {
                    setTimeout(delayedOutput, 200);
                }
            }

            delayedOutput();
        },

第二个无效函数：

        loopThroughSplittedTextNotWorking: function() {
            // delete this
            var locationInString = 0;

            function delayedOutput() {
                document.getElementById('output').innerHTML = this.splittedText[locationInString];

                locationInString++;

                if(locationInString < this.splittedText.length) {
                    setTimeout(delayedOutput, 200);
                }
            }

            delayedOutput();
        }

如何在不先将对象保存在局部变量中的情况下使第二个函数起作用？我想尽可能地使用双向数据绑定。

Answer 1

How do I make the 2nd function work, without saving the object inside a local variable first?

你不能。 this 是一个变量，它始终是它所使用的函数的局部变量，它的值取决于函数的调用方式。如果你想在不同的函数中使用它的值，那么你需要将它复制到另一个变量中。

bind 方法为此提供了 shorthand。

setTimeout(delayedOutput.bind(this), 200);

Answer 2

简单的回答，你不知道。因为你的函数是通过超时调用的，所以它不再在同一个上下文中，'this' 将不再引用同一个对象。

你可以这样做：

        loopThroughSplittedTextNotWorking: function() {
        // delete this
        var locationInString = 0;

        var that = this;

        function delayedOutput() {
            document.getElementById('output').innerHTML = that.splittedText[locationInString];

            locationInString++;

            if(locationInString < that.splittedText.length) {
                setTimeout(delayedOutput, 200);
            }
        }

        delayedOutput();
    }

通过将 "this" 变量保存到局部变量中，您可以在 "delayedOutput" 函数中访问它。

我意识到它基本上就像您的工作示例，只是措辞略有不同，但我通常就是这样做的。

两个相似功能之间的区别，为什么一个工作而另一个不工作

Difference between two similar functions, why is one working and the other not

javascript

jquery

loops

vue.js