当不传递javascript函数参数时

Question

我不熟悉JavaScript，正在从“ Visual Quickstart guide”一书中学习javascript，

我在以下代码逻辑中苦苦挣扎，因为函数定义表明它需要一个参数，

function getNewFile(evt) {
    makeRequest(this.href);
    evt.preventDefault();
}

但是当函数被调用时，没有参数传递给它，

function initAll() {
    document.getElementById("makeTextRequest").addEventListener("click",getNewFile,false);
    document.getElementById("makeXMLRequest").addEventListener("click",getNewFile,false);
} 

当没有参数传递给它时，我不了解该函数的默认行为，

本书中完整的代码

window.addEventListener("load",initAll,false);
var xhr = false;

function initAll() {
    document.getElementById("makeTextRequest").addEventListener("click",getNewFile,false);
    document.getElementById("makeXMLRequest").addEventListener("click",getNewFile,false);
}

function getNewFile(evt) {
    makeRequest(this.href);
    evt.preventDefault();
}

function makeRequest(url) {
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
            }
        }
    }

    if (xhr) {
        xhr.addEventListener("readystatechange",showContents,false);
        xhr.open("GET", url, true);
        xhr.send(null);
    }
    else {
        document.getElementById("updateArea").innerHTML = "Sorry, but I couldn't create an XMLHttpRequest";
    }
}

function showContents() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            if (xhr.responseXML && xhr.responseXML.childNodes.length > 0) {
                var outMsg = getText(xhr.responseXML.getElementsByTagName("choices")[0]);
            }
            else {
                var outMsg = xhr.responseText;
            }
        }
        else {
            var outMsg = "There was a problem with the request " + xhr.status;
        }
        document.getElementById("updateArea").innerHTML = outMsg;
    }

    function getText(inVal) {
        if (inVal.textContent) {
            return inVal.textContent;
        }
        return inVal.text;
    }
}

Answer 1

下面的代码“ getNewFile”方法作为参数传递，并且直到“ click”被实际使用时才实际执行，然后使用预期的参数实参执行。

function initAll() {
    document.getElementById("makeTextRequest").addEventListener("click",getNewFile,false);
    document.getElementById("makeXMLRequest").addEventListener("click",getNewFile,false);
} 

在Javascipt中，函数是对象，就像数字，字符串，数组等一样。如果函数名后没有带双引号的“（）”（带有或不带有out参数），那么它不会立即执行，而是作为参数传递，以供将来参考/执行。

这是将函数作为参数传递的几个简单示例：

例子1

function example1() {
    alert('hello');
}

function executor1(f) {
    // execute the function passed in through argument 'f'
    f();
}

executor(example1);
// example1 isn't executed/called until it's called from within executor1

例子2

function add(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a * b;
}

function alertMath(a, b, f) {
    var result = f(a, b);
    alert(result);
}

// alerts the message of "3"
alertMath(1, 2, add);

// alerts the message of "6"
alertMath(2, 3, multiply);

// alerts the message of "3"
// this shows a function being defined inline
alertMath(6, 2, function(a, b) {
    return a / b;
});

我希望这能为您提供有关正在发生的事情的更多背景信息。

Answer 2

在这里 ：

function getNewFile(evt) {
    makeRequest(this.href);
    evt.preventDefault();
}

getNewFile是函数引用 ， getNewFile(parameter)是函数调用 。

如您所见：

document.getElementById("makeTextRequest").addEventListener("click",getNewFile,false);

getNewFile （函数引用，不是函数调用）传递给addEventListener 。 根据addEventListener文档 ，第二个参数是侦听器，它是事件触发时将调用的函数。