Javascript study notes 9 prototype encapsulation inheritance

Javascript study notes 9 prototype encapsulation inheritance_basic knowledge

WBOY

Release： 2016-05-16 18:36:41

Original

870 people have browsed it

Okay, let’s build it step by step. First, let’s take a look at the original writing method:

Copy the code The code is as follows:

 
<script> <br>var Person = function(name, age) { <br>this.name = name; <br>this.age = age; <br>} <br>Person.prototype.SayHello = function () { <br>alert(this.name "," this.age); <br>}; <br>var Programmer = function (name, age, salary) { <br> Person.call(this, name, age); <br>this.salary = salary; <br>}; <br>Programmer.prototype = new Person(); <br>var pro = new Programmer("kym", 21, 500); <br>pro.SayHello(); <br></script> 

We see that in fact, the root of inheritance lies in this step Programmer.prototype= newPerson(). In other words, add Person to the prototype chain. This point has been explained in detail in Javascript Study Note 7 - The Principle of the Prototype Chain.
That is to say, the key to our implementation lies in the creation of the prototype chain.
In the above, we used JSON to create a prototype, and its prototype chain is p.__proto__=Person. Then we hope to encapsulate inheritance on this, then the prototype chain should be p.__proto__.__proto__=SuperClass, which means Person.__proto__=SuperClass. But according to the inheritance method of our code above, the prototype chain relationship is Person.__proto__=SuperClass.prototype.
This is the same as what we did above. Our method is to use an auxiliary function to assign the attributes in the original function to Encapsulation.
Okay, following this idea, let’s implement encapsulation using the inheritance relationship of the prototype chain.

Copy code The code is as follows:

 
<script> <br>var Factory = { <br>Create: function (className, params) { <br>var temp = function () { <br>className.Create.apply(this, params); <br>}; <br>temp.prototype = className; <br>var result = new temp(); <br>return result; <br>}, <br>CreateBaseClass: function (baseClass, subClass) { <br>var temp = function () { <br>for (var member in subClass) { <br>this[member] = subClass[member]; <br>} <br>}; <br>temp.prototype = baseClass; <br>return new temp(); <br>} <br>}; <br>var People = { <br>Create: function (name, age) { <br>this.name = name; <br>this.age = age; <br>}, <br>SayHello: function () { <br>alert("Hello,My name is " this.name ".I am " this.age); <br>} <br>}; <br>var Temp = { <br>Create: function (name, age, salary) { <br>People.Create.call(this, name, age); <br>this.salary = salary; <br>}, <br>Introduce: function () { <br>alert(this.name "$" this.age "$" this.salary); <br>} <br>}; <br>var Programmer = Factory.CreateBaseClass(People, Temp); <br>var pro = Factory.Create(Programmer, ["kym", 21, 500]); <br>pro.SayHello(); <br></script> 

This completes our inheritance Encapsulation of relationships. Of course, we don’t have to write a separate variable:

Copy the code The code is as follows:

 
var Programmer = Factory.CreateBaseClass(People, 
{ 
Create: function (name, age, salary) { 
People.Create.call(this, name, age); 
this.salary = salary ; 
}, 
Introduce: function () { 
alert(this.name "$" this.age "$" this.salary); 
} 
}); 
 

Of course, this all depends on personal preference. I personally think the first method is relatively clearer, but the second method is more elegant.