javascript - 为什么直接在 function 上添加方法不能像 function.prototype 那样工作？

Question

我正在学习并试图深入理解 JavaScript 对象。我通过下面的示例学习了对象原型(prototype)。

var MyObj = function(){
   this.Name = "Stackoverflow";
}

MyObj.prototype.prop = "OK"; 

var instance = new MyObj();
instance.prop = "OK";

console.log(instance.hasOwnProperty("Name")); //true
console.log(Object.getOwnPropertyNames(instance)); //[ 'Name', 'prop' ]

在上面的例子中，instance对象不能访问Object的getOwnPropertyNames。因为 getOwnPropertyNames 函数不是 Object 的原型(prototype)成员。在此之后，当我编写自己的对象时，例如上面的 Object

var MyDream = function(){}
MyDream.prototype.canAccessThisMethod = function(x){};

var instanceSample = new MyDream();

instanceSample.canAccessThisMethod("blabla"); //because of prototype
MyDream.method(blabla); // didn't work.

如何使 MyDream.method 在此示例中起作用？

Answer 1

除了解释原型(prototype)之外，让我们关注您在以下代码片段中提出的问题，即

var MyDream = function(){}
MyDream.prototype.canAccessThisMethod = function(x){ };

var instanceSample = new MyDream();

instanceSample.canAccessThisMethod("blabla"); //because of prototype
MyDream.method(blabla); //How can we write "MyDream.method" in this example

让我们一步一步来。

var MyDream = function(){}

您创建了一个匿名函数并将其分配给 MyDream 变量。 Functions are first class objects in JavaScript .它们功能强大且灵活。因此，作为一流的对象，您可以像以前一样将它们分配给变量。您可以将它们作为参数传递。除此之外，您还可以将原型(prototype)链扩展为

MyDream.prototype.canAccessThisMethod = function(x){ };

我相信您已经弄清楚了其余的内容，因此跳过细节并快速转到此声明。

MyDream.method(blabla);

不幸的是，这行不通。原因是，要添加 function as method您需要将其分配为函数文字。您可以像 Objects 一样添加方法来发挥作用。

MyDream.method = function(x) {
    console.log(x);
}

MyDream.method("bla bla");