Javascript:函数参数的灵活性?

时间:2016-01-29 22:00:19

标签: javascript function parameters scope chaining

W3Schools上Javascript函数参数的描述不是很清楚,所以我只想澄清一下。

根据我的理解,没有类型限制;参数的“实际值”传递给方法。有没有办法传递对象或元素?或者说“真正的价值”是什么意思?

例如:

函数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");
}

有一个“帮助”方法displayNext,它应该转移到列表中的下一个单词并将显示设置为该单词。

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

这不符合预期。我很确定这是因为我用参数搞砸了一些东西,因为displayNext将innerHTML设置为null。 list必须未正确通过。我不知道如何解决这个问题。

我确信这是一种更有效的方法,但这是一个学习Javascript参数实际工作方式的好机会,所以我想我会问。

JSFiddle

1 个答案:

答案 0 :(得分: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?以及有关如何传递参数的更多信息:{{3} }