JavaScript advanced Programming Extension--on dynamic prototyping _javascript techniques

Source: Internet
Author: User
But the author Nicholas C. Zakas did not delve into possible problems and solutions when creating objects in a "dynamic prototyping" way. In succession, the bottleneck of "dynamic prototype" is explained. That is, when inheriting a subclass, it cannot be implemented by means of dynamic prototyping.
The text is roughly as follows:
The reason why the inheritance mechanism cannot be dynamic is: The uniqueness of the prototype object. Instance code:
Copy Code code 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 A ();
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

Nicholas explained that before the code was run, the object had been instantiated and contacted with prototype, and the current substitution of the prototype object would not have any effect on it, that is, the current replacement would not be accessible, and only instances of future objects would reflect that change. The first instance object will be incorrect. But the second and subsequent subclass instances are fine.
The workaround is to give the new prototype object outside the constructor:
Copy Code code 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 A ();
var sub_a = new SubA (1);
Alert (Sub_a.func_sub ()); 2

Unfortunately, this violates the original intention of using dynamic prototypes.
The original intention of using dynamic prototyping is to make the constructor "unified", visually let people feel that the prototype method is part of the class structure.
The above is the approximate content of the dynamic prototype Inheritance section in JavaScript Advanced programming.
<! --========== Split line ============-->
However, Nicholas in the previous section of the "dynamic prototyping" approach of object construction, seems to have forgotten to mention the same question. Let's take a look at the last example above:
Copy Code code 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 (' AA ');
var obj2 = new Obj (' BB ');
Obj1.showname (); Error:is not a function
Obj2.showname (); bb

Yes, this problem is exactly the same as the problem that occurs in subclass inheritance, and the current substitution of prototype does not have any effect on the object, only visible in future instances. If you follow the same way that Nicholas handles dynamic prototype inheritance, that means you can only reassign the prototype object outside of the constructor. So does this not become a "constructor/prototype hybrid" approach? The so-called "dynamic prototype" way does not exist ...

In fact, we can think about why we have to write a "dynamic prototype" in the form of "constructor/prototype blending", which has basically no side-effects of building objects. The intention of the author is simply to make the constructor more visually unified. In fact, only the visual unity can be used without dynamic prototype.
Copy Code code 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 (' AA ');
var obj2 = new Obj (' BB ');
Obj1.showname (); Aa
Obj2.showname (); Bb

In fact, the above way can be regarded as the unity of vision, Obj's constructor through the __initialize to initialize the property, through the __initialize.prototype prototype initialization method. Just a little bit of "cheat" feeling, __initialize agent of the initialization of obj ...
The following is a "construction class" package from Tangoboy, in fact, the idea is basically consistent with the above, the only difference is that he created the attributes also in a prototype way, while the initialization of properties and methods are thrown into the constructor parameter object. Easy customization:
Copy Code code as follows:

* = = Form Tangoboy = * *
window[' $Class '] = {
Create a class mixed constructor/prototype method
Create:function (config) {
var obj = function () {},config = Config| | {};
Filter construction method 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 the unity of vision can also be used without the dynamic prototype of the way. After all, looking at the above ideas, we have traced back to our most commonly used "class structure" approach:
Copy Code code as follows:

var Class = {
Create:function () {
return function () {
This.initialize.apply (this, arguments);
}
}
}

Believe that the above code you may not be unfamiliar, if you go down, you will find in fact and the above code are consistent, with the Initialize function as the initialization agent, thus completing the vision of unity.

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.