JavaScript advanced programming extensions-about Dynamic Prototype

Source: Internet
Author: User

However, the author, Nicolas C. Zakas, did not go into the possible problems and solutions when creating objects in the [Dynamic Prototype] mode. The bottleneck of the dynamic prototype is described only during inheritance. That is, when the subclass is inherited, it cannot be implemented through a dynamic prototype.
The original Article is roughly as follows:
The Inheritance mechanism cannot be dynamic because of the uniqueness of prototype objects. Instance code: Copy codeThe Code is as follows: function A (I ){
This. a = I;
If (typeof A. _ init = 'undefined '){
A. prototype. func = function (){
Return 0;
}
A. _ init = 1;
}
}
Function subA (j ){
A. call (this, 1 );
This. j = j;
If (typeof subA. _ init = 'undefined '){
SubA. prototype = new ();
SubA. prototype. func_sub = function (){
Return ++ j;
}
SubA. _ init = 1;
}
}
Var sub_a = new subA (1 );
Alert (sub_a.func_sub (); // error: sub_a.func_sub is not a function

Nicolas explained that before the code is run, the object has been attached to the prototype instance. Replacing the prototype object does not affect the prototype object, that is, the current replacement cannot be accessed, only instances of objects in the future will reflect this change. So the first instance object will be incorrect. However, there is no problem with the second and later subclass instances.
The solution is to assign a new prototype object to the constructor:Copy codeThe Code is as follows: function A (I ){
This. a = I;
If (typeof A. _ init = 'undefined '){
A. prototype. func = function (){
Return 0;
}
A. _ init = 1;
}
}
Function subA (j ){
A. call (this, 1 );
This. j = j;
If (typeof subA. _ init = 'undefined '){
SubA. prototype. func_sub = function (){
Return ++ j;
}
SubA. _ init = 1;
}
}
SubA. prototype = new ();
Var sub_a = new subA (1 );
Alert (sub_a.func_sub (); // 2

Unfortunately, this violates the original intention of why we use dynamic prototypes.
The original intention of using a dynamic prototype was to enable the constructor to "unify the database." Visually, the prototype method is part of the class structure.
The above is the general content of the Dynamic Prototype inheritance section in JavaScript advanced programming.
<! -- ===================================-->
However, in the previous chapter on Object Construction's [Dynamic Prototype] method, Nicholas seems to have forgotten to raise the same question. Let's take a look at the last example above:Copy codeThe Code is as follows: var Obj = function (name ){
This. name = name;
This. flag = new Array ('A', 'B ');
If (typeof Obj. _ init = 'undefined '){
Obj. prototype = {
ShowName: function (){
Alert (this. name );
}
};
Obj. _ init = true;
}
}
Var obj1 = new Obj ('A ');
Var obj2 = new Obj ('bb ');
Obj1.showName (); // error: is not a function
Obj2.showName (); // bb;

Yes, this problem is exactly the same as that in subclass inheritance. prototype replacement does not affect this object, but is only visible in future instances. If the method for handling Dynamic prototype inheritance is the same as that described in Nicolas, it means that prototype objects can only be re-granted outside the constructor. Isn't that the [constructor/prototype hybrid] method? The so-called [Dynamic Prototype] method does not exist anymore...

As a matter of fact, we can think about why we should write a dynamic prototype next to the build object method of [constructor/prototype hybrid], which has no side effects. The author's intention is nothing more than to make the constructor more unified visually. In fact, only visual unification is required, and dynamic prototypes are not required.Copy codeThe Code is as follows: var Obj = function (){
Function _ initialize (name ){
This. name = name;
This. flag = new Array ('A', 'B ');
}
_ Initialize. prototype = {
ShowName: function (){
Alert (this. name );
},
ShowFlag: function (){
Alert (this. flag );
}
}
Return _ initialize;
}();
Var obj1 = new Obj ('A ');
Var obj2 = new Obj ('bb ');
Obj1.showName (); // aa
Obj2.showName (); // bb

In fact, the above method can be regarded as visual unification. In the Obj constructor, the _ initialize is used to initialize the attribute and the _ initialize. prototype is used to initialize the attribute. It just feels a little "Small cheating", __initialize proxy the Obj initialization...
The following is the encapsulation of the "Constructor class" from tangoboy. In fact, the idea is basically the same as above. The only difference is that he created the attributes in prototype mode, at the same time, the initialization attributes and methods are all thrown into the constructor parameter object. Easy customization:Copy codeThe Code is as follows:/* = form tangoboy = */
Window ['$ class'] = {
// Create a class hybrid constructor/prototype
Create: function (config ){
Var obj = function () {}, config = config || {};
// Filter constructor and Prototype Method
Obj = obj. prototype. constructor = config ["_"] | obj;
Delete config ["_"];
Obj. prototype = config;
Return obj;
}
}
/* -- Eg --*/
Var man = $ Class. create ({
_: Function (name ){
This. name = name;
},
Sex: 'male ',
ShowName: function (){
Alert (this. name );
}
});
Var me = new man ('ru ');
Me. showName (); // ru

In fact, if you want to pursue visual unification, you do not need a dynamic prototype. After all, let's look at the above ideas and we have traced back to our most common "Class Constructor" method:Copy codeThe Code is as follows: var Class = {
Create: function (){
Return function (){
This. initialize. apply (this, arguments );
}
}
}

I believe that the above Code may not be unfamiliar to anyone. If I look into it, I will find that it is actually the same as the above Code. I used the initialize function as the initialization proxy to complete visual unification.

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.