Javascript advanced inheritance

 
The following code is used:

<Script type = text/javascript> function Person (name, age) {this. name = name; this. age = age;} Person. prototype. say = function () {console. log (this. name +, + this. age);} function Student (no) {this. no = no;}/*** prototype of Student points to the Person object */Student. prototype = new Person (); var stu1 = new Student (0001); stu1.name = 'zhangsan'; stu1.age = '11'; console. log (stu1.no); stu1.say (); </script>

Output result:

 

0001 Zhang San, 11

We can see that Student has successfully integrated the Person method and has the Person's say method. The core code is actually a sentence of Student. prototype = new Person ();. The following illustration illustrates the principle:

 

Point Student. prototype to new Person (), and The _ proto _ of new Person points to Person Prototype; This completes the entire inheritance.

However, this method has the following problems:

Problem 1: when the parent class references a type variable, the data is inconsistent. Next we add a hobbies attribute to the Person class, whose type is an array.

 

<Script type = text/javascript>/*** problem ** 1. The parameter cannot be passed in the Student constructor for the parent class. * 2. For reference type variables, cause data inconsistency */function Person (name, age) {this. name = name; this. age = age; this. hobbies = [];} Person. prototype. say = function () {console. log (this. name +, + this. age +, + this. hobbies);} function Student (no) {this. no = no;} Student. prototype = new Person (); var stu1 = new Student (0001); stu1.name = 'zhangsan'; stu1.age = '11'; stu1.hobbies. push (soccer); stu1.say (); var stu2 = new Student (0002); stu2.name = 'lily'; stu2.age = '12'; stu2.hobbies. push (girl); stu2.say (); </script>

Output result:

Zhang San, 11, soccer Li Si, 12, soccer, girl

It can be seen that Li Si's hobbies should only have girl, but the above Code allows all objects to share the hobbies attribute.

 

The above inheritance method still has a problem:

Question 2: In the Student constructor, new Student (00001, Zhang San, 12) cannot be used. Create an object and initialize the name and age attributes. It must be stu. name, stu. age assignment

 

To solve the problem above, modify the above Code:

 

<Script type = text/javascript> function Person (name, age) {this. name = name; this. age = age; this. hobbies = [];} Person. prototype. say = function () {console. log (this. name +, + this. age +, + this. hobbies);} function Student (name, age, no) {/*** use the call method. The first parameter is the context. * A bit similar to super (name, age) in Java) */Person. call (this, name, age); this. no = no;} Student. prototype = new Person (); var stu1 = new Student (0001, Zhang San, 11); stu1.hobbies. push (soccer); stu1.say (); var stu2 = new Student (0002, Li Si, 12); stu2.hobbies. push (cangjin); stu2.hobbies. push (basketball); stu2.say (); </script>

Output:

 

 

0001, Zhang San, soccer 0002, Li Si, cangjin, basketball

The Student constructor uses Person. call (this, name, age) is like super (name, age) [the first parameter of call is context]; and the sharing of referenced attributes is solved successfully, perfect solution.

 

2. Prototype-based inheritance

 

<Script type = text/javascript>/*** objects in prototype-based integration * have the following problems: * 1. For reference type variables, cause data inconsistency */var Person = {name: Person, age: 0, hobbies: [], say: function () {console. log (this. name +, + this. age +, + this. hobbies) ;}}; var Student = clone (Person); Student. no =; Student. sayHello = function () {console. log (this. name + hello);} var stu1 = clone (Student); stu1.name = zhangsan; stu1.age = 12; stu1.hobbies. push (Java); stu1.say (); var stu2 = clone (Student); stu2.name = lisi; stu2.age = 13; stu2.hobbies. push (Javascript); stu2.say ();/*** returns a prototype object for executing obj * @ param obj * @ returns {F} */function clone (obj) {var F = function () {}; F. prototype = obj; return new F () ;}</script>

Output:

 

 

zhangsan , 12 , Java lisi , 13 , Java,Javascript 

We can see that there is also a problem of inconsistent reference attributes, and the entire operation is based on objects, which makes people feel bad. The following illustration explains the principle:

 

Through a clone function between objects, a new object is continuously returned, and prototype executes the input object. The entire inheritance process is actually _ proto _ pointing continuously to form a chain, this is called prototype chain.

 

Well, we have already introduced the two integration methods of js. It is best to use inheritance through classes (the first solution mentioned above to solve problems ).

 

 

If there are any problems with the code or explanation, please leave a message.