JavaScript函数对象揭秘-优快云博客

功能对象简介

级别：中级

先决条件：对象

您之前已经看过。您正在设置XMLHttpRequest调用，并且需要在返回时执行一个函数，因此您需要执行以下操作：


http.onreadystatechange = myAwesomeFunction;

一段时间内，这确实非常有效。但是很快您就会想知道，当http的readystate更改时，是否可以执行多个功能。或者，也许您需要将一些额外的参数传递给myAwesomeFunction。

您在某处阅读可以执行以下操作：


var width = 100, height = 300;
http.onreadystatechange = function() {
    myAwesomeFunction();
    doSomethingAmazing(width, height);
};

效果很好，但您不禁要问为什么。

好吧，这是为什么：

JavaScript中的所有函数实际上都是对象。

那就对了。函数是一个对象，就像窗口或文档一样，或者是2，或者是“ Hello，World！”或...。

如果您熟悉JavaScript对象，则可能知道标量是对象。例如：


var myNumber = 2;
var myNumber = new Number(2); 
var myString = 'Hello!';
var myString = new String('Hello!'); 
var myBoolean = true;
var myBoolean = new Boolean(true);

等等。请注意，在每对中，您在第一条语句中使用的是“文字”值。但是，每对中的两个语句都会产生相同的结果。

因此，如果数字和布尔值以及我们认为理所当然的其他类型都是对象，为什么不使用函数呢？


function doSomething(x, y) {
    return x * y;
} 
var doSomething = new Function('x, y', 'return x * y;');

令人惊讶的是，这两个语句都将在您喜欢的浏览器中运行，并且它们将产生相同的结果*！

好的，所以功能就是对象。所以呢？

好了，让我们回到上面的XMLHttpRequest片段：


http.onreadystatechange = myAwesomeFunction;

例如，与PHP中myAwesomeFunction解析为字符串（Zend引擎将其确定为已定义函数的名称）的PHP不同，JavaScript实际上是使用直接存储在名为myAwesomeFunction的变量中的Function对象。

类似于如何为myVar分配2的值，如下所示：


var someObject = new Number(2); 
myVar = someObject;

...您可以为http.onreadystatechange分配一个函数的“值”，如下所示：


var someObject = new Function('', 'alert("Hi!");'); 
//    Or...
function someObject() {
    alert("Hi!");
} 
http.onreadystatechange = someObject;

很整洁吧？但是还有更多！

请记住，您如何通过执行以下操作将多个函数存储到http.onreadystatechange：


var width = 100, height = 300;
http.onreadystatechange = function() {
    myAwesomeFunction();
    doSomethingAmazing(width, height);
};

为什么行得通？

记住我们是如何使用Function构造函数创建函数的：


function callSomeFuncs() {
    myAwesomeFunction(response);
    doSomethingAmazing(width, height);
} 
//    Which is equivalent to this:
var callSomeFuncs = new Function('', 'myAwesomeFunction(response);\ndoSomethingAmazing(width, height);'); 
//    In both cases, we can assign http.onreadystatechange the 'value' (function object) of doSomething like this:
http.onreadystatechange = doSomething;

但是，这也不行吗？


http.onreadystatechange = new Function('', 'myAwesomeFunction(response);\ndoSomethingAmazing(width, height);'); 
//    Remember that these work:
var myNumber = new Number(2);
var myString = new String('Hello!');
var myBoolean = new Boolean(true);

如果我们进行翻译，以便可以使用function关键字：


http.onreadystatechange = function() {
    myAwesomeFunction(response);
    doSomethingAmazing(width, height);
}

嘿，看那个！

顺便说一句，这是我们喜欢称之为“匿名函数”的示例，因为我们没有在function关键字的右侧使用变量名来定义它。

但这并不意味着我们的功能消失了！


http.onreadystatechange = function() {
    alert('Hi!');
} 
http.onreadystatechange();

您能猜出这段代码的作用吗？那就对了; 它会创建一个警报！哪个变量存储函数对象并不重要。您所要做的就是在变量名称后加上括号，浏览器将执行存储在该变量中的函数。

多一个：


var myFoo = function() {
    alert('Hi!');
} 
var someBar = myFoo; 
someBar(); 
//    Why does this work?  Well, for the same reason that this works, but instead of calling the function stored in someBar, this code passes the value stored in someBar (2) to the function stored in document.write.
var myFoo = new Number(2); 
var someBar = myFoo; 
document.write(someBar);    //    Outputs '2'.

所以现在您知道JavaScript的肮脏小秘密。所有功能实际上都是对象。

有关更多信息，请查看

MDC JavaScript参考

* [SIDEBAR：实际上，第二条语句执行的速度会慢一秒钟，因为显式定义的函数（使用“ Function”构造函数）将被解释而不是编译。因此，您应该尝试使用function关键字，而不是尽可能地显式创建Function对象。]

From: https://bytes.com/topic/javascript/insights/654425-introduction-function-objects