Javascript:函数参数的灵活性？

Question

W3School关于Javascript功能参数的描述不是很清楚，所以我想澄清一下。

据我了解，没有类型限制；参数的 "real value" 被传递到方法中。有没有办法传递对象或元素？或者这就是 "real value" 的意思？

例如：

函数 displayText 用于获取输入文本并设置显示以显示给定输入文本中的新词，每次调用时转到下一个词。

function displayText() {
    var text = document.getElementById("words").value; 
// Since text is initialized   
// every time the method is called, 
// it will always start at the beginning of the text area. 
// Not sure how to fix this since making `text` 
// a global variable doesn't work 
    var list = text.split(/[ \t\n]+/);
    displayNext(list, "display");
}

有一个 "helper" 方法，displayNext，它应该转移到列表中的下一个单词并将显示设置为该单词。

function displayNext(list, textboxID) {
    document.getElementById(textboxID).innerHTML = list.shift();
}

这没有按预期工作。我很确定这是因为我用参数弄乱了一些东西，因为 displayNext 将 innerHTML 设置为 null。 list 一定是没通过。我不确定如何解决这个问题。

我确信有更有效的方法来做到这一点，但这是了解 Javascript 参数实际如何工作的好机会，所以我想我会问。

JSFiddle

Answer 1

根据您代码中的注释，您似乎希望 displayText() 每次都显示 "next" 单词。为此，您必须创建一些地方来存储关于下一个要显示的单词的状态。正如您现在所拥有的，您每次都创建一个新数组并始终显示第一个单词。

最简单的方法是在您的函数外部创建一个变量，在您存储单词编号的某个持久范围内：

var wordNum = 0;
function displayText() {
    var text = document.getElementById("words").value; 
    var list = text.split(/\s+/);
    if (list.length !== 0) {
        // make sure we aren't off the end of the list
        wordNum = wordNum % list.length;
        displayNext(list[wordNum++], "display");
    }
}

function displayNext(text, textboxID) {
    document.getElementById(textboxID).innerHTML = text;
}

有关 Javascript 函数参数的更多信息，甚至如何检测传递了哪些参数或重载参数，请参阅此答案：How to overload functions in javascript? and for more info about how arguments are passed: Javascript by reference vs. by value

Javascript:函数参数的灵活性？

Javascript: Flexibility of function parameters?

javascript

function

parameters

scope

chaining