关于JavaScript构造函数和匿名函数的一些问题

Question

我有以下 JavaScript 函数：

function Console() {
    this.Log = function(msg) {
        if (document.getElementById("console")) {
            var console = document.getElementById("console");
            console.innerHTML += msg + "<br/>";
        }
    }
}

问题 1： 为什么我需要使用新的关键字？

new Console().Log("hello world");

为什么我不能这样做？

Console().Log("hello world without using new");

问题2：

var logger = function() {
    this.log = function(msg) {
        new Console().Log(msg);
        new Console().Log("log initialized");
    }

    this.log2 = function(msg) {
        new Console().Log(msg);
        new Console().Log("log2 initialized");
    }
}(); //notice the brackets

由于记录器末尾有()，因此无法运行。

new logger().log("hello world");

我知道尾随 () 意味着该函数被立即调用，但为什么它不起作用？是因为 function() {} ();不能分配给其他变量吗？

Answer 1

1. new 关键字创建 Console 对象的实例，然后您可以在其上调用 Log 方法。如果您直接调用 Console()，您将获得该函数的返回值。在您的情况下，没有，因此未定义。此外，如果您不使用 new 关键字，则在该“类函数”内分配给 this 的任何内容都会污染全局范围。因此，您不必将方法分配给 this，而是必须使用要返回的代理对象。

2. 在您的示例中，您将 logger 变量分配给调用匿名函数的返回值。同样，它不会返回任何内容，因此调用 new logger() 将不起作用，因为您无法实例化 undefined。因此，从匿名函数中删除尾部 () 会将 function 分配给 logger 而不是其返回值，然后您可以使用它进行实例化新。 （您也可以再次使用代理对象）。

在上面的两个示例中，我强烈建议使用 new 关键字，而不是创建并返回代理对象。这利用了 Javascript 内置的实例化机制和函数原型链，并且比对象创建快得多。

John Resig 的这篇博文值得一读，了解有关 Javascript 中“类”实例化如何工作的更多信息：http://ejohn.org/blog/simple-class-instantiation/

Answer 2

答案1：

您将“日志”功能添加到“this”中。这就是您必须先从控制台函数创建对象才能访问它的原因。

当您执行 Console().Log() 时，您正在尝试运行 Console 函数并在返回的对象上调用“Log”方法。因为 Console 函数不返回任何内容，所以它是“未定义”的，因此您无法访问 Log 方法。

答案2：

“logger”不是一个函数，而是匿名函数输出的结果。

E.g. var logger = function() { //your code; } ();

您的匿名函数不会返回任何内容，因此记录器将是“未定义”。对于未定义的对象，没有“log”方法。

要解决这个问题，请执行以下操作：

var logger = function() {
    var output = {};
    output.log = function(msg) {
        new Console().Log(msg);
        new Console().Log("log initialized");
    }

    output.log2 = function(msg) {
        new Console().Log(msg);
        new Console().Log("log2 initialized");
    }

    return output;
}();

To use, you can write,

logger.log('hello');

了解 JS 中的函数和对象创建

您必须了解的主要内容是，在 JavaScript 中，当使用“new”关键字调用时，常规函数充当“构造函数”。

考虑以下功能。

function Console()
{
    this['name'] = 'Console'
}

当您像这样调用上面的函数时，

   Console();
   alert(window.name); //alerts 'Console';

“this”将是“window”对象，并且它将添加值为“Console”的“name”属性。

如果您像这样调用上面的函数，

   var output = new Console();
   alert(output.name)  // alerts 'Console'

JavaScript 将创建一个新对象，可以使用“Console”内的“this”访问该对象。现在输出将具有“名称”属性。

如果以上内容还不能帮助您解决问题，请告诉我。您必须了解它才能利用 JS 提供的功能。

Answer 3

正如您所指出的，当您执行 function(){}() 时，您将立即定义并调用函数。因此，当您遇到以下情况时：

var logger = function(){}();

您将指定 logger 作为该函数的返回值，而不是函数本身。在您的示例中，该函数不返回任何内容，因此 logger 将是未定义的。

正如风格问题， 在编写立即调用的匿名函数时，将函数括在括号中是相当标准的：

var logger = (function() { ... })();

这只是向读者提供一个视觉提示，表明您将要调用该函数，可以避免很多混乱。 实际上，在某些情况下这样做相当重要：请参阅下面的评论！