An in-depth understanding of the new operator in JavaScript

1. First look at a topic

1 function Cat (name,age) {2      this. name=name; 3      this. age= age; 4 }5 console.log (new Cat (' Miaomiao '));   6 // Cat {name: "Miaomiao", age:18}

2. So what does this mean in this?

1 function Cat (name,age) {2       console.log (this);   Cat {}3this       . name=name; 4       this. age= age; 5 }6new Cat (' Miaomiao ', 18);

3. We find that this is an empty object named Cat, then the last two sentences (this.name=name;this.age=age) are equivalent to Var cat={}; Cat.name=name; Cat.age=age; Are we going to try this?

1 function Cat (name,age) {2       var Cat = {}; 3       Cat.name=name; 4       Cat.age= age; 5 }6 console.log (new Cat (' Miaomiao '));   7 // Cat {}

4. The discovery is not so, this is why, in JavaScript if there is no return then the function will default return this in order to verify that we are in the last face of the function return cat

1 function Cat (name,age) {2       var Cat = {}; 3       Cat.name=name; 4       Cat.age= age; 5       return Cat; 6 }7 console.log (new Cat (' Miaomiao '));   8 // Object {name: "Miaomiao", age:18}

5. Seems to have succeeded, we compare with before

1 function Cat (name,age) {2       this. name=name; 3       this. age= age; 4 }5  console.log (new Cat (' Miaomiao '));   6 // Cat {name: "Miaomiao", age:18}

6. Function functions We understand the same thing, and now we're going to start exploring new, just imagine if we don't return the object but return null or what would be the other kind of effect?

1 function Cat (name,age) {2        var Cat = {}; 3        Cat.name=name; 4        Cat.age= age; 5        return undefined// or null 123 ' 123 ' for non-objects; 6 }7 console.log (new Cat (' Miaomiao ', 18)); // cat{}

7. Other outputs NULL objects

So we're trying to write a function like new

1 functionCat (name,age) {2     This. name=name;3     This. age=Age ;4 }5 functionNew () {6     varobj={};7     varres=cat.apply (obj,arguments);8     return typeofres=== ' object '?Res:obj9 }TenConsole.log (New (' Mimi ', 18)) One //Object {name: "Mimi", age:18}

8. So it's done, of course not, we're going to look down.

1  functionCat (name,age) {2       This. name=name;3       This. age=Age ;4   }5Cat.prototype.sayhi=function(){6Console.log (' Hi '))7   }8   functionNew () {9       varobj={};Ten       varres=cat.apply (obj,arguments); One       return typeofres=== ' object '?Res:obj A   } -  -Console.log (NewCat (' Mimi ', 18). Sayhi ()) theConsole.log ('-------------'); -Console.log (New (' Mimi ', 18). Sayhi ()); -  -Vm841:7Hi +Vm841:15undefined -Vm841:16------------- + vm841:17 uncaught typeerror:new (...). Sayhi is not a function (...)

9. The red error indicates that the new operation is not only concerned about the function itself but also about his prototype prototype

The above analysis so much, now get to the point.

The normal object is not prototype property, only the Hidden property __proto__ (ie also has the hidden property, but use obj.__proto__ can not output things, it is recommended not to use the __proto__ property). The function object has both. The prototype property points to the prototype object of the function object, and the object's __proto__ property is the prototype object for the corresponding function object when the instance object is created.

1  functionCat (name,age) {2       This. name=name;3       This. age=Age ;4   }5Cat.prototype.sayhi=function(){6Console.log (' Hi '))7   }8   functionNew () {9       varobj={};Tenobj.__proto__=Cat.prototype; One       varres=cat.apply (obj,arguments); A       return typeofres=== ' object '?Res:obj -   } -  theConsole.log (NewCat (' Mimi ', 18). Sayhi ()) -Console.log ('-------------'); Console.log (New (' Mimi ', 18). Sayhi ()); -  -Vm844:7Hi +Vm844:16undefined -Vm844:17------------- +Vm844:7Hi AVm844:17undefined atUndefined

10.ok accomplished

An in-depth understanding of the new operator in JavaScript