JavaScript Advanced Programming Extension--About Dynamic Prototype_Javascript Skills

However, the author Nicholas C. Zakas did not delve into the possible problems and solutions when creating objects using the [Dynamic Prototype] method. But only the bottleneck of [dynamic prototype] is explained during inheritance. That is, when subclass inheritance is performed, it cannot be achieved through dynamic prototypes.
The original text is roughly as follows:
The reason why the inheritance mechanism cannot be dynamic is: the uniqueness of the prototype object. Example code:

Copy code The 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 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 is run, the object has been instantiated and contacted with the prototype. Replacing the prototype object at the current time will not have any impact on it, that is, the current replacement is inaccessible, only the future object. Examples will reflect this change. Then the first instance object will be incorrect. But the second and subsequent subclass instances are fine.
The solution is to assign a new prototype object outside the constructor:

Copy the code The 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 A();
var sub_a = new subA(1);
alert(sub_a.func_sub()); //2

Unfortunately this defeats the purpose of why we use dynamic prototypes.
The original intention of using dynamic prototypes is to allow the constructor to "unify the country" and visually make people feel that the prototype method is part of the class construction.
The above is the general content of the dynamic prototype inheritance section in "Advanced JavaScript Programming".

But Nicholas talked about object construction in the previous chapter [ Dynamic prototype] approach, it seems that the same issue was forgotten. Let’s look at the last example above:

Copy the code The 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('aa');
var obj2 = new Obj('bb');
obj1.showName(); //error: is not a function
obj2.showName(); // bb;

Yes, this problem is actually the same as the problem that occurs in subclass inheritance. The current replacement of prototype will not have any impact on the object. , visible only in future instances. If you follow the way Nicholas handles dynamic prototypal inheritance, it means that the prototype object can only be reassigned outside the constructor. So doesn’t this become the [constructor/prototype hybrid] method? The so-called [dynamic prototype] method no longer exists...

In fact, we can think about why [constructor/prototype hybrid], a method of building objects that has basically no side effects, is followed by Write a section on [Dynamic Prototyping] method. Is the author's intention nothing more than to make the constructors more visually unified? In fact, dynamic prototypes are not needed as long as visual unity is required.

Copy code The 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('aa');
var obj2 = new Obj('bb');
obj1.showName(); // aa
obj2.showName(); // bb

In fact, the above method can be regarded as visual unification. The properties are initialized through __initialize in the constructor of Obj, and the __initialize.prototype prototype initialization method is used. It just feels like a little "cheating". __initialize represents the initialization of Obj...
The following is the encapsulation of the "constructed class" from tangoboy. In fact, the idea is basically the same as the above. The only difference is that he also adds attributes It was created in prototype mode, and the initialization properties and methods were thrown into the constructor parameter object. Easy to customize:

Copy code The code is as follows:

/* == form tangoboy == */
window['$Class'] = {
//Create a class with mixed constructor/prototype method
create: function(config) {
var obj = function(){}, config = config||{};
//Filter constructor and prototype methods
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 insist on pursuing Visual unification can also be achieved without dynamic prototyping. After all, looking at the above ideas, we have traced back to our most commonly used "class construction" method:

Copy code The code is as follows:

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

I believe that the above code may be familiar to everyone. If you study it carefully, you will find that it is actually consistent with the above code. The initialize function is used as the initialization agent. Thus completing the visual unity.