JavaScript-inheritance of object-oriented, javascript

JavaScript-inheritance of object-oriented, javascript

Inheritance is a core concept in object-oriented systems. Other Orthodox object-oriented languages implement inheritance in two ways: interface implementation and inheritance. ECMAScript only supports inheritance, but does not support interface implementation. The Inheritance method relies on the prototype chain. In the inheritance of JavaScript, there are several types of inheritance, which can be said to be accompanied by problems. The Inheritance methods have also been upgraded, not just prototype chain inheritance, it also includes combination inheritance, prototype inheritance, parasitic inheritance, and parasitic combination inheritance. They come along with different problems. Next I will introduce these inheritance methods respectively.

1. prototype chain inheritance

<Span style = "font-family: KaiTi_GB2312; font-size: 18px;"> function Box () {// Box constructs this. name = 'beauty';} function Desk () {// Desk constructs this. age = 100;} Desk. prototype = new Box (); // Desk inherits the Box. Through prototype, the chain var desk = new Desk () is formed. alert (desk. age); alert (desk. name); // get the inherited attribute </span>

Disadvantages: the initial values after prototype chain inheritance and instantiation are the same, which cannot be changed or reused. The combination inheritance (prototype chain + borrow constructor) solves this problem.

2. Combined inheritance (prototype chain + borrow constructor)

<Span style = "font-family: KaiTi_GB2312; font-size: 18px;"> function Box (age) {this. name = ['lin Zhiling ', 'fan Bingbing']; this. age = age;} Box. prototype. run = function () {return this. the age of name + 'is' + this. age;} function Desk (age) {Box. call (this, age); // The object impersonate. The function here is to pass the parameters. Only the methods and attributes in the Box instance are passed to Desk (), the information in the prototype is not transmitted .} // Var desk = new Desk (20); // alert (desk. name + 'Hello ??? '); // Lin Zhiling is returned here. How are you doing with Fan Bingbing ??? The reason is that the Desk () function uses the object impersonate internally. // Alert (desk. run (); // The prototype chain inheritance is not set, and the run () method will not be inherited. Desk. prototype = new Box (); // use the prototype chain to inherit the prototype of Box () and all information about the instance is transmitted to Desk () var desk = new Desk (20 ); alert (desk. name + 'Hello ??? '); // Return to Lin Zhiling. How are you, Fan Bingbing ??? Alert (desk. run (); // return to Lin Zhiling. The age of Fan Bingbing is 20. </span>

The combination inheritance makes up for the passing and sharing of prototype chained inheritance parameters. However, each time an instance of an object is instantiated, The superclass Box () needs to be called twice (). the parasitic combination inheritance can solve this problem. The inheritance of parasitic combinations will be discussed later. Let's talk about the original type inheritance first.

3. Original Type inheritance

<Span style = "font-family: KaiTi_GB2312; font-size: 18px;"> // function obj (o) {// pass a literal function F () {} // create a constructor F. prototype = o; // assign the literal function to the prototype return new F () of the constructor (); // finally return the instantiated constructor} var box = {// literal Object name: 'lil', arr: ['Elder Brother', 'sister ', 'sister'] // Add an array with reference type}; var box1 = obj (box); // pass alert (box1.name ); // return Leebox1.name = 'jack'; // change name to jackalert (box1.name); // return Jackalert (box1.arr); box1.arr. push ('parage'); // The rr attribute is an array. Here, an additional parent is added to the array. Alert (box1.arr); var box2 = obj (box); // pass alert (box2.name); // return Lee instead of Jack. The value types are not shared among sub-classes. Alert (box2.arr); // return to share the reference type between brother, sister, sister, parent, and subclass. </Span>

This inheritance uses prototype to create new object instances based on existing objects, and does not need to create custom types (you do not need to add attributes and Methods yourself ).

4. Parasitic inheritance (prototype inheritance + factory method mode)

<Span style = "font-family: KaiTi_GB2312; font-size: 18px;"> function obj (o) {function F () {} F. prototype = o; return new F ();} function create (o) {f = obj (o) f. run = function () {return this. family;} return f;} var box = {name: 'lin Zhiying ', age: 22, family: ['reference type 1']} var box1 = create (box ); // pass alert (box1.name); // inherits the box object and outputs Lin Zhiying box1.name = 'Liu Yifei '; // change the name attribute of your instance to Liu Yifei, the sub-type namealert (box1.name) is changed; // The output is Liu Yifei alert (box1.run (); // The output is of the reference type 1, box1.family. push ('reference type 2'); // The output is reference type 1, reference type 2, and the output is the super-type familyalert (box1.run ()); var box2 = create (box); // pass alert (box2.name); // inherits the box object, and Lin Zhiying does not output Liu Yifei alert (box2.run ()); </span>

Parasitic inheritance combines the original type with the factory mode to encapsulate the process of object creation.

5. Parasitic combination inheritance solves the problem of calling superclass multiple times during multiple instantiation.

<Span style = "font-family: KaiTi_GB2312; font-size: 18px;"> // function obj (o) {function F () {} F. prototype = o; return new F ();} // parasitic function create (box, desk) {f = obj (box. prototype); // The prototype object f. constructor = desk; // adjust the prototype pointer desk. prototype = f;} function Box (name, age) {this. name = name; this. age = age;} Box. prototype. run = function () {return this. name + this. age;} function Desk (name, age) {Box. call (this, name, age); // impersonate an object to call , Which is also the function of passing parameters .} // Use a parasitic combination to inherit create (Box, Desk); // replace Desk. prototype = new Box (); var desk = new Desk ('beauty ', 25) alert (desk. run (); // return beauty, 25 </span>

Summary

All these inheritance methods have been introduced. I just learned about them, but they play a real role in the project, even if they only find out when they are working on the project, before there is a true idea, this theoretical knowledge is also necessary. Let the project sublimate these inheritance methods!

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.