JavaScript New keyword Detailed _ basics

Like other advanced languages, JavaScript also has the new keyword, we previously recognized the new is used to create a class instance object, but in JS all things are objects, why also want new keyword, in fact, JS new keyword is not used to create a class instance object, but for inheritance. Next, this article will take you to explore the mystery of JS New ...

function Animal (name) {
  this.name = name;
}
Animal.color = "BLACK";
Animal.prototype.say = function () {
  console.log ("I ' m" + this.name);
};
var cat = new Animal ("cat");

Console.log (
  cat.name,//cat
  cat.height//undefined
);
Cat.say (); I ' m cat

console.log (
  animal.name,//animal
  animal.color//back
);
Animal.say (); Animal.say is not a function

If you can understand the results of the above output, you have a very good understanding of JS new and this operation mechanism, please ignore this article!

We will deepen your understanding of JS new and inheritance by parsing this example! "If you are not aware of JS, please read: JS scope and this keyword"

First, Code interpretation

Line 1-3 creates a function animal and defines a property on its this: the value of Name,name is the formal parameter when the function is executed.

Line 4th defines a static property on the animal object (the animal itself is a function object): Color, and assigns "black"

Line 5-7 defines a say () method on the prototype object prototype of the animal function, say the method outputs the name value of this.

Line 8th creates a new object by using the the New keyword cat

10-14 rows of Cat objects attempt to access the name and color properties and invoke the Say method.

The 16-20 row Animal object attempts to access the name and color properties and calls the Say method.

Second, focus on the analysis

The 8th line of code is the key:

var cat = new Animal ("cat");

JS engine in the execution of this code, do a lot of work, using pseudo-code simulation of its workflow as follows:

 var obj = {};
 obj.__proto__ = Animal.prototype;
 var result = Animal.call (obj, "cat");
 Return typeof result = = ' obj '? Result:obj;

(1) Create an empty object obj;

(2) by pointing the __proto__ of obj to the Animal prototype object prototype, the prototype chain of the Obj object is established: Obj->animal.prototype->object.prototype->null

"If you do not understand the JS prototype chain, please read: JS prototype and prototype chain"

(3) Call the animal function in the execution space of the Obj object and pass the parameter "cat". Equivalent to var result = obj. Animal ("Cat").

When this sentence is finished, obj produces the attribute name and assigns the value to "cat". "About the use of call in JS please read: JS called and apply"

(4) Examine the return value returned in step 3rd, return obj as the new object if there is no return value, or return a non-object value, otherwise the return value will be returned as a new object.

Having learned about the new operating mechanism, we know that cat is actually the return value of process (4), so we have a little more knowledge of cat objects:

The prototype chain of cat is: Obj->animal.prototype->object.prototype->null

A new attribute is added to the cat: name

After analyzing the production process of cat, let's look at the output:

Cat.name-> in procedure (3), the Obj object produces the Name property. So Cat.name is the obj.name here.

Cat.color-> Cat will look up its own color first, and find it along the prototype chain without finding it, and in the example above, we just defined the color on the animal object and didn't define it on its prototype chain, so we couldn't find it.

Cat.say-> Cat will find its own say method first, find it along the prototype chain, and in the example above, we define prototype on the animal say, so we find the Say method on the prototype chain.

In addition, the this.name is also accessed in the Say method, where this refers to its caller obj, so the value of obj.name is output.

For animal, it is also an object in itself, so it follows the lookup rules when accessing properties and methods, so:

Animal.color-> "BLACK"

Animal.name-> "Animal", Animal first finds its own name, finds name, note: But this name is not the name we defined, but the property that is built into the function object.

Typically, a function object is generated with the built-in Name property and the function name as an assignment (function object only).

Animal.say-> Animal did not find the say method in its own, will also follow its prototype chain search, saying that Animal prototype chain is what?

From the results of the debugging: Animal's prototype chain is this:

Animal->function.prototype->object.prototype->null

So there is no say method defined on animal's prototype chain!

To sum up, the main function of JavaScript's new keyword is inheritance, and in the example above, the Cat object inherits the methods and attributes defined in animal when it is produced, so the cat is not an instance of animal but rather a subclass (not strictly speaking). Some people may also think: cat since is new out of, that cat and animal should be the same type. I think since it is the relationship between the parent class and the subclass, it can't be the same type, no letter, you see:

The difference between JavaScript using the New keyword

The first way to use the new keyword to expose a user object to a Window object in a prototype manner

One
var user = function () {
  this.name= "";
  This.id= "";
};
User.add = function () {
  console.log ("add");
User.delete = function () {
  console.log ("delete");
User.prototype = user;
Window.user = new User ();

The second way is to expose the user object directly to the Window object without using the New keyword

Two
var user = {
  name: "",
  ID: ""
};
User.add = function () {
  console.log ("add");
User.delete = function () {
  console.log ("delete");
Window.user = user;

Use

<button onclick= "User.add ()" > Add </button>
<button onclick= "User.delete ()" > Delete </button >