Add more basics: constructors and constructor attributes of JavaScript

We know that by default, an object can be constructed by using new in front of a function. Each object has a constructor attribute, which points to the function that constructs the object. For example, debugging in Chrome is as follows:Program, Clearly shows this:

 

However, it is not that simple. Let's look at the followingCode:

Obviously, the constructor of obj is no longer a function for creating it. the name is also undefined. Therefore, modifying the contructor of the prototype of the constructor does not affect the object generated by the constructor. The real reason is:The constructor of an object is the prototype. constructor of its constructor. Each function has a prototype. By default, this prototype has a constructor attribute pointing to itself.I think Javascript is designed to direct the constructor of each object to its own constructor. However, this can be broken by the example above. In addition, this design is not perfect. A major problem is that you must maintain the constructor point carefully during inheritance. In the simplest inheritance, prototype of the constructor of the subclass can be set as an instance of the parent class, while constructor of the parent class is the constructor of the parent class, therefore, prototype constructor of the subclass is the constructor of the parent class, which makes the constructor of each object of the subclass A constructor of the parent class. This is very confusing.

Finally, let's go back to the issues left over from the previous article. The previous section describes an example of inheriting observable from the extjs Website:

Employee = ext. Extend (ext. util. observable, {constructor:Function(Config) {This. Name = config. Name; this. addevents ({"Fired": True,"Quit": True });// Copy configured listeners into * This * object so that the base class's// Constructor will add them.This. Listeners = config. listeners;// Call our superclass constructor to complete construction process.Employee. superclass. constructor. Call (config )}});
 

 

The illusion of this example is that you can rewrite the constructor attribute of the parent class to change the behavior of the constructor of the subclass. This is misleading for those who are not deeply rooted in JavaScript. Let's take a closer look at ext. Extend'sSource code:

 extend:  function  () { // inline overrides   var  IO =  function  (o) { for  ( var  m  in  O) { This  [m] = O [m] ;}};  var  OC = object. prototype. constructor;  return function  (SB, SP, overrides) { If  (ext. isobject (SP) {overrides = sp; SP = Sb;  Sb = overrides. constructor! = OC? Overrides. constructor:  function  () {sp. apply ( This , arguments) ;}; // note here  

}// The following content is omitted .........
 

} (). Note the line that is annotated. If extend detects that the overrides parameter has the constructor attribute, that is, when the subclass tries to rewrite the prototype constructor of the parent class, it directly sets the subclass as this function! In this way, the effect is achieved. However, I immediately discovered that this statement is only available in the IF statement block, that is, the two parameter versions of extend, so the setting using another three parameter version of extend should be invalid. Write code test:

 <  Head  > <  Title  > </  Title  > <  Script  Type  = "Text/JavaScript"  SRC = "Ext-3.1.0/src/CORE/EXT. js"> </  Script  > <  Script  Type  = "Text/JavaScript"> Function Myclass (){ This . ID = 'Class' ;} Function Subclass (){} // Subclass = ext. Extend (subclass, myclass, {constructor: function () {// This. overrideproperty = 'OK ';//}//}); Subclass = ext. Extend (myclass, {constructor:Function (){ This . Overrideproperty = 'OK' ;}}); VaR OBJ = New Subclass (); alert (obj. overrideproperty ); </  Script  > </  Head  > 

The first is undefined, and the second is OK. Er, the functions with the same name only have different parameter expressions and different execution effects, which is somewhat unexpected. In addition, the official extjs documentation does not provide any explanation for this. We will try to use two parameter Versions later.

Finally, let's look at several expressions,

The first is to say that the prototype constructor of the function is itself. As mentioned above, there is no problem. The second is that the function is also an object, which is an object of the function constructor, it is also easy to understand. The third is to say that a function constructor itself is an object of a function constructor. The last one is actually equivalent to the third one, it means that the constructor of the function object is its own ...... I do not understand how a function constructs itself? Egg, egg? It should involve the specific implementation of the Javascript language.

The javascript language is still a bit complicated. If it weren't for xmlhttpobject, let it go down, or it would be crying in the dark corner.

As application developers, we may not use these underlying things when writing our own programs. However, these advanced features are widely used in the JS framework, in addition, detailed documents cannot influence the functions and effects of these methods. Therefore, developers still need to understand these things as much as possible, so that they do not know what is going on after they die. The above Ext. Extend function is an example.