Inheritance Mechanism of Javascript framework

This is a part of the larger architecture of the Helper House (www.bkjia.com) tutorial. Prototype's original inheritance mechanism was very weak, and this aspect was also strengthened to confront mootools. Well, there is basically a clone function to simulate class inheritance with prototype inheritance. Copy the prototype attribute of the parent class to the subclass. There are so many ideas for the time being, so we can practice them most practically. We designed an array class with native array capabilities and new expansion capabilities.

Var isNumber = function (n) {return typeof n = 'number' & isFinite (n);} var vArray = function () {if (arguments. length = 0) {return [];} else if (arguments. length = 1 & isNumber (arguments [0]) {return new Array (arguments [0]);} else if (arguments. length> 1) {return Array. prototype. slice. apply (arguments) ;}}var a = vArray (); alert (a); var B = vArray (7); alert (B); var c = vArray (1, 3, "situ zhengmei", true); alert (c );

Tip: the code can be modified before running!

Obviously, this is the factory method, and the Native array is generated. If you want to expand it without polluting the native array, you need to add a heavy package. We can see how inheritance is implemented. This involves two classes: Native array class and new array class. First look at the Code:

var Parent = function(){};Parent.prototype = Array.prototype;var Array2 = function(){};Array2.prototype = new Parent;Array2.prototype.newMethod = function(){return "newMethod";};Array2.prototype.constructor = Array2;var a = new Array2("dd",4);alert(a.newMethod)var b = new Array("dd",4);alert(b.newMethod)

Tip: the code can be modified before running!

Because of the relationship between the javascript prototype chain, we cannot directly var Array2 = Array; var a = new Array2; so once a new method is added from the Array2 prototype (it is recommended to add the method to the prototype, the Array prototype is also added because they are on the same ship. We must disconnect them. So we need a Parent function for bridging. We can say that Array is the target Parent class, and Parent is the real Parent class. First, assign the prototype of the target Parent class to the prototype of the Parent, so that the Parent has all its public methods, and then assign these methods to array2. However, the constructor of the Array2 instance is still a native array. we need to fix it. We can see the relationship between Prototype and constructor.

We can extract some code to form a method:

Copy to ClipboardReference: [www.bkjia.com] var makeBridge = function (klass ){
Var bridge = function (){};
Bridge. prototype = klass. prototype;
Return new bridge;
}
Array2 = function (){};
Array2.prototype = makeBridge (Array );
Array2.prototype. constructor = Array2;

_ Mixin = function (/* Object */obj,/* Object */hash) {var nil ={}; // retrieve dojo, it is the most cautious of all the shortest replication methods I have seen. // first set an empty Object, so its nil [I] method must come from its prototype Object. prototype // ensure that the method or attribute in the hash of the extended package is in the same way as the Object. you can add for (var x in hash) {if (nil [x] = undefined | nil [x]! = Hash [x]) {obj [x] = hash [x] ;}// the toString method if (! + "\ V1" & hash) {var p = hash. toString; if (typeof p = "function" & p! = Obj. toString & p! = Nil. toString & p! = "\ Nfunction toString () {\ n [native code] \ n} \ n") {obj. toString = hash. toString ;}} return obj; // Object}; var makeBridge = function (klass) {var bridge = function () {}; bridge. prototype = klass. prototype; return new bridge;} Array2 = function () {}; Array2.prototype = makeBridge (Array) _ mixin (Array2.prototype, {newMethod: function () {return "newMethod "}, newMethod2: function () {return "newMethod2"}, constructor: Array2}) var a = new Array2 ("dd", 4); for (var I in) {alert (I + "" + a [I]) // constructor attributes cannot be traversed in IE} <br/> <center> If the effect cannot be displayed, press Ctrl + F5 to refresh the page. For more webpage code: <a href =' http://www.bkjia.com/ 'Title = "bkjia.com" target = '_ blank'> http://www.bkjia.com/ </A> </center>

Tip: the code can be modified before running!

The above _ mixin method is the most common inheritance method. Early Prototype also relies on copying Prototype methods. It is called extend in an elegant place, and the situation is not considered. Ext is divided into apply, applyif, and override. In mootools, it is called add.

Well, let's consider how to access the parent class method (we can identify which is a subclass method and which is a parent class method by using the overload method ). To access the parent class method, you must be able to access the parent class. We can save the name of the parent class to an attribute of the subclass prototype. Let's extend the makeBridge method to inherit.

_ Mixin = function (/* Object */obj,/* Object */hash) {var nil ={}; // retrieve dojo, it is the most cautious of all the shortest replication methods I have seen. // first set an empty Object, so its nil [I] method must come from its prototype Object. prototype // ensure that the method or attribute in the hash of the extended package is in the same way as the Object. you can add for (var x in hash) {if (nil [x] = undefined | nil [x]! = Hash [x]) {obj [x] = hash [x] ;}// the toString method if (! + "\ V1" & hash) {var p = hash. toString; if (typeof p = "function" & p! = Obj. toString & p! = Nil. toString & p! = "\ Nfunction toString () {\ n [native code] \ n} \ n") {obj. toString = hash. toString ;}} return obj; // Object}; function inherit (subClass, superClass) {var bridge = function () {}; bridge. prototype = superClass. prototype; subClass. prototype = new bridge; subClass. prototype. constructor = subClass; subClass. prototype. superclass = superClass; return subClass;} var Animal = function () {this. name = "Animal" ;}; var Tiger = function () {}tiger = inherit (Tiger, Animal) _ mixin (Tiger. prototype, {name: "Tiger", description: "female big cats living alone" // This is not the case of resetting the constructor}) var t = new Tiger (); alert (t. name) alert (t. description) var s = new t. superclassalert (s. name) <br/> <center> If the page cannot be displayed, press Ctrl + F5 to refresh the page. For more page code: <a href =' http://www.bkjia.com/ 'Title = "bkjia.com" target = '_ blank'> http://www.bkjia.com/ </A> </center>

Tip: the code can be modified before running!

However, this is still uncomfortable, because we still need to manually set the empty function var Tiger = function () {}, which will be discussed later.

Author blog: http://www.cnblogs.com/rubylouvre/