“ new”如何與javascript中的類一起使用？

Question

以下兩個示例中的new有何不同？ 我看到第二個示例用一個變量替換了異常函數，但是在第二個示例中，實際上正在調用函數/類“ Person”。 是否被調用會有所不同嗎？ 我沒有打電話就嘗試了，它仍然有效。 所以這使我相信，新的實際上是調用函數和設置this被分配到的實例變量。

  var person = new function() { this.setName = function(name) { this.name = name; } this.sayHi = function() { return "Hi, my name is " + this.name; } } person.setName("Rafael"); console.log(person.sayHi()); // Hi, my name is Rafael 

  var Person = function() { this.setName = function(name) { this.name = name; } this.sayHi = function() { return "Hi, my name is " + this.name; } } var personTwo = new Person() personTwo.setName("Rafael"); console.log(personTwo.sayHi()); // Hi, my name is Rafael 

Answer 1

如果這是一個簡單的函數，那么這兩個示例之間幾乎沒有區別：

 (function() { console.log("IIFE"); })(); // or var f = function() { console.log("Function"); }; f(); 

您只需將函數存儲在變量中，然后調用它。

但是，由於它與JS OOP機制相關，因此它並沒有什么區別。 在第一種情況下，您獲得Object實例，在第二種情況下，您獲得Person實例。 這使OOP意義有所不同。

 var person = new function() { }; console.log("Is instance of: " + person.constructor.name); console.log("There is no way to check instanceof in this case"); var Person = function() { }; var person = new Person(); console.log("Is instance of: " + person.constructor.name); console.log(person instanceof Person); 

通常，應該在第二種情況下使用new和class，以啟用JS OOP的全部功能。 使用匿名類構造函數絕對沒有任何意義或優勢。

Answer 2

是否將其分配給變量：無關緊要。 它與本示例完全平行：

var x = 1;
console.log(x);

和

console.log(1);

是否需要調用：始終調用帶有new運算符的函數，但是帶有new的函數，當不傳遞任何參數時，括號是可選的： new Person()等同於new Person ，但是new Person("Joe")不能做不同的事情。

Answer 3

在第二個示例中，您將完全相同的函數傳遞給新運算符。 您只是使用引用（邏輯上存儲在變量中），而不是就地編寫文字函數。

因此，您的第二個示例與以下示例相同 ：

var personTwo = new (function() {  
    [...]
})()
[...]

實際上，這與第一個基本相同：

var person = new (function() {  
    [...]
})
[...]

注意 ，在這種情況下，函數的括號絕對是可選的。 如果願意，可以將您放置在七個位置： (((((((function(){[...]}))))))) 。

此處的要點是，當您說“在第二個中，實際上正在調用函數/類” Person””時， 您就錯了： 您未在調用充當構造函數的函數。 您只是將其作為新運算符的參數（構造函數）傳遞，實際上，該運算符實際上是使用您提供的其余參數（如果有）調用構造函數。

請參閱新的語法文檔 ：

new constructor[([arguments])]

構造函數是傳遞給新運算符的函數，參數在括號之間指定。 但是它們是完全可選的（包括括號本身）。

這就是為什么new constructor; 沒有括號的作品。

要明確：您認為發生（但沒有發生）的內容將寫為：

var person = new ((function(){...})()) ();

...或更詳細地說：

    var person = new (
        (function(){ // Constructor builder.
            [...]
            return function(){...}; // Actual constructor.
        })() // Constructor builder call
  //v-- Parentheses to force builder to be called.
    ) (); // <-- Parameters (if any) passed to the constructor.