Javascript constructor and constructor attribute_javascript tips

For example, debugging the following program under Chrome clearly demonstrates this:

However, things are not that simple. Look at the following code again:

Obviously, at this time, the constructor of obj is no longer the function that created it. Notice that obj.name is also undefined, so the constructor of the prototype that modifies the constructor does not Will affect the object generated by the constructor. The real reason is: the constructor of an object is the prototype.constructor of its constructor, and each function has a prototype. By default, this prototype has a constructor attribute that points to itself. I think the original design of Javascript is to have the constructor of each object point to its own constructor. However, examples like the above can destroy this. In addition, this design is actually not perfect. A big problem is that you must carefully maintain the constructor's pointer when inheriting. In the simplest inheritance, the prototype of the constructor of the subclass can be set to an instance of the parent class, and the constructor of the instance of the parent class is the constructor of the parent class, so the constructor of the prototype of the subclass is the constructor of the parent class. function, which causes the constructor of each object of the subclass to be the constructor of the parent class. This can easily cause confusion.

Finally, let’s go back to the issues left over from the previous article. The above mentioned an example of inheriting Observable given by the Extjs official website:

Copy Code The code is as follows:

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

This example gives the illusion that you can override the constructor attribute of the parent class to change the subclass The effect of the behavior of the constructor. This is misleading for people who are not familiar with Javascript. Let’s take a closer look at the source code of Ext.extend:

Copy the code The code is as follows:

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 is omitted...}(), please pay attention to the commented line. If extend detects that there is a constructor attribute in the overrides parameter, that is to say, when the subclass tries to overwrite the constructor of the prototype of the parent class, it will directly set the subclass to this function! This achieves the effect. However, I immediately discovered that this detection is only in this if statement block, that is, in the two-parameter version of extend, so it should be invalid to use another three-parameter version of extend. Write a piece of code to test:

Two ways of writing, the result of the operation is that the first one is undefined and the second one is OK. Well, functions with the same name only have different writing methods for parameters, but have different execution effects. This is a bit unexpected. And the official documentation of Extjs doesn't say anything about this. In the future, everyone should try to use the two-parameter version.
Finally, let’s take a look at a few expressions,

The first one is that the constructor of the prototype of the function is itself. This has been mentioned above, there is no problem; The second one is that the function is also an object, it is an object of the Function constructor, which is easy to understand; the third one is that the Function constructor itself is an object, and it is also an object of the Function constructor; the last one is actually the same as The third equivalent is that the constructor of the Function object is itself... I really don't understand how Function constructs itself? The chicken lays the egg, and the egg lays the chicken? If we want to pursue it further, it should involve the specific implementation of the Javascript language, so let's stop here.

Hey, the Javascript language itself is still a bit complicated. If it hadn't been for the XMLHttpObject that made it so popular, otherwise it would still be crying secretly in a dark corner.

As application developers, we may not use these low-level things when writing our own programs. However, the JS framework uses a large number of these advanced features, and no matter how detailed the documentation is, it is impossible to Let’s talk about the functions and impacts of these methods one by one, so developers still need to try their best to understand these things, so as not to die without knowing what happened. The Ext.extend function above is an example.