I have to see JavaScript constructor and new operator

The function in JS can be a constructor to call it as a normal function. When using new to create an object, the corresponding function is a constructor, and is a normal function when called by an object.

The creation of a normal function is: explicit statement, anonymous definition, new function () and other three ways.

When creating a new object via NEW, the JS underdess layer points the prototype chain of the new object to the prototype object of the constructor, which has established a prototype chain between the new object and the function object. Objects can access methods and properties in the prototype Prototype in the function object.

As with other advanced languages, there are also constructor and new operators in JavaScript, and we know that new is used to instantiate a class to allocate an instance object in memory. But in JavaScript, all things are object, why should I generate objects through NEW? This article will take you to explore the mystery of New in JavaScript …

1. Understand New Operators

  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.color // Undefined); Cat. Say (); // I'm cat console.log (Animal.Name, // Animal Animal.color // back); Animal.SAY (); //animal.say is not aFunction  
2, code interpretation

1-3 Row creates a function animal, and defines attributes on its THIS : Name, the value of Name is the formal parameter when the function is executed. The fourth line defines a static attribute on animal object (Animal itself is a function object): Color, and assigns “Black”

5-7 Row in the prototype object of the Animal function A SAY () method is defined on the prototype, and the SAY method outputs this Name value.

Chapter 8 creates a new object CAT

10-14 line CAT object attempts to access the Name and Color properties, and call the SAY method.

16-20 row animal object Try to access the Name and Color properties and call the SAY method.

3, key analysis

The eighth line code is the key:

VAR CAT = New Animal (“cat”); [CAT “);

Animal itself is a normal function, but when creating an object via NEW, Animal is a constructor.

When the JS engine executes this code, there is a lot of work internally, and the workflow is used inside, and its workflow is simulated as follows:

New Animal (“cat”) = {var obj = {}; obj .__ proto__ = animal.Prototype; var result = animal.call (obj, “cat”); return typeof results === ‘Object’? result: obj;}


Create an empty object OBJ;
  (2)  Points OBJ's Proto pointing to constructor animal Prototype object prototype, the prototype chain of OBJ object is created: obj-> animal.prototype-> object.prototype-> null 

Execution Environment in OBJ Object Call the Animal function and pass the parameter “cat”. It is equivalent to Var Result = Obj.animal (“cat”).

Test the return value returned by step 3, if there is no return value or return a non-object value, return the OBJ as a new object; otherwise the return value will be used as a new Object returns. After understanding its operating mechanism, we know that CAT is actually the return value of the process (4), so we have more awareness of the Cat object:

Cat prototype chain is : CAT-> Animal.Prototype-> Object.Prototype-> Null

CAT adds an attribute: Name

CAT generation process, let’s take a look at the output:

Cat.Name -> In the process (3), the OBJ object produces the Name property. So Cat.Name is the obj.name

Cat.Color -> Cat will first find its own Color, and you will find it along the prototype chain. In the above example, we are only on the animal object. Defines the Color and is not defined on its original chain, so you can't find it.
Cat.SAY -> CAT will first find its own SAY method, no found along the prototype chain, in the above example, we are in the Animal's prototypeRighting SAY, so a SAY method is found on the prototype chain.

In addition, this is also accessed in the SAY method, and the This refers to its caller OBJ, so the value of the OBJ.NAME is output.

For Animal, it is also an object, so it also complies with the above finding rules when accessing attributes and methods, so:

Animal.Color -> “black”

Animal.Name -> “Animal”, Animal first finds its own name, find Name, but this name is not our defined name, but the function object built-in property.

In general, the function object is built into the NAME attribute and the function name is assigned (function object only).

Animal.SAY -> Animal does not find a Say method itself, and will look up along its prototype chain, what is the prototype chain of Animal?

From the test results: Animal’s prototype chain is like this:

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

Therefore, therefore, there is no SAY method to define the prototype chain!

4, the meaning of NEW

After met the New operator, we will return to the next question: JS is all objects, why is it necessary? Generate objects through NEW?

To understand this problem, we must first understand the relationship between CAT and Animal:

Through the above analysis, we found that Cat inherits some attributes in Animal, so we can simple Understanding: Animal and Cat are inheritance relationships.

On the other hand, CAT is an object generated by the New, then the CAT is not an instance object of Animal?Let’s first understand how JS is to define “instance objects”?

If the above expression is True, JS believes that A is an instance object of B. We use this method to determine CAT and Animal

Cat InstanceOf Animal; // True

From the execution result: CAT is indeed animal instance, if you want to confirm this result, let’s take a look at the JS in the JS in the judgment rule:

VAR L = a .__ proto __; var R = B.prototype; if (L === R) return true;

proto a if B is equivalent to prototype Returns True

In the execution process (2) of the New, CAT’s Proto points to the Animal’s Prototype, so CAT and Animal conform to the instanceOf judgment.

Therefore, we think: CAT is an instance object of Animal.

5 summarizes

In Javascript, an instance object can be generated by the new new original object, and this instance object inherits properties and methods of the original objects. Therefore, the meaning of New has achieved inheritance in JavaScript, not just an object!

The above is the full content of this article. I hope this paper will bring a certain help to everyone’s learning or work ~ If you have any questions, you can leave a message, thank you for your support!
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment