“ new”如何与javascript中的类一起使用？

Question

How does the new work differently in the 2 examples below? I see that the 2nd example is replacing the annoymous funciton with a variable, but in the second one, the function/class "Person" is actually being called. Does it make any difference if it's being called or not? I tried it without the calling and it still worked. So that led me to believe that new is actually calling the function and setting up this to be assigned to the instance variable.

  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

There would be almost no difference between these two examples, if it was a simple function like this:

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

You just store your function in a variable, and then call it.

However, it makes a little difference, since it is related to JS OOP mechanisms. In the first case you get Object instance, and in the second you get Person instance. This makes difference in OOP sense.

 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); 

In general, new and classes are supposed to be used as in the second case in order to enable the full functionality of JS OOP. There is absolutely no sense or/and advantage in using anonymous class constructor.

Answer 2

Whether or not it is assigned into a variable: does not matter. It is completely parallel to this example:

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

and

console.log(1);

Whether it needs to be called or not: A function with the new operator is always being called, but with new , parentheses are optional when no parameters are passed: new Person() is equivalent to new Person , but new Person("Joe") cannot be done differently.

Answer 3

In the second example, you are passing to the new operator the exact same function. You simply are using a reference (logically stored in a variable) instead of writing literal function just in place.

So, your second example is the same as:

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

Which, in fact, is much the same as the first one:

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

NOTE that the parentheses surrounding the function are absolutely optional in this case. You could be placed there seven if you like: (((((((function(){[...]}))))))) .

The point here is that when you say «in the second one, the function/class "Person" is actually being called» you are WRONG there: That function, which acts as a constructor isn't being called by you . You are simply passing it as a parameter (the constructor function) of the new operator which is, in fact, who is actually calling the constructor with the rest of parameters you provided, if any.

See new syntax documentation :

new constructor[([arguments])]

The constructor is the function you pass to the new operator and the parameters are specified between parentheses. But they are fully optional (including the parentheses itself).

This is why new constructor; without parentheses works.

To be clear: What you thought happens (but not) would be written as:

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

...or, more verbosely:

    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.