Javascript constructor and constructor _ javascript skills

Source: Internet
Author: User
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 the following program in Chrome clearly demonstrates this:

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


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 that the constructor of an object is the prototype of its constructor. constructor, and 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:

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


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 the source code of Ext. extend:

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 content is omitted .........} (), Pay attention to 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:



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.