JavaScript Learning 3: Prototypes and Inheritance

prototypes

Each function we create has a prototype (prototype) attribute, which is an object whose purpose is to contain properties and methods that can be shared by all instances of a particular type. It is logical to understand that prototype is the prototype object of the object that was created by invoking the constructor.

Why introduce the concept of prototypes? The purpose of using prototypes is also his advantage is that all object instances can share the properties and methods that it contains. In other words, instead of defining object information in the constructor, you can add the information directly to the prototype.

In particular, let's look at the code example:

<span style= "FONT-SIZE:18PX;" >//prototype instance function person () {}   //Declare a constructor person.prototype.name= ' Lian ';   Add attribute person.prototype.age=100 to the prototype; Person.prototype.run=function () {    //Add method in Prototype return this.name + This.age + ' struggle ... ';}; var person1=new person (), var person2=new person (); alert (person1.run==person2.run);   Returns true, stating that the reference address of the method is consistent, that is, two objects share a method </span>

To better understand the difference between the way the constructor is declared and the way the prototype is declared, I've found two diagrams to share with you to help you understand:

As we can see, in the prototype schema declaration, there are two more properties, both of which are generated automatically when the object is created. The _proto_ property is a pointer to the prototype object that the instance points to, and it acts as the prototype property constructor of the constructor. With these two properties, you can access the zodiac and methods in the prototype.

You'll find it strange to see that there is nothing in the function body of the constructor in the code example above to access the value in the prototype object, if there are attributes or methods in the body of the function? This involves the problem of a prototype pattern execution process: first to find the properties and methods inside the constructor instance, if any, to return immediately, if not, to find the prototype object and, if so, to return.

The disadvantage of creating an object using the prototype schema is that it omits the process of constructor parameter initialization, and the disadvantage is that the initialized value is the same, but that's the best thing about it: sharing.

Inheritance

Inheritance is a core concept in object-oriented, and in more orthodox object-oriented languages, inheritance is generally implemented in two ways: one is an interface implementation and the other is class inheritance. And our JavaScript only supports inheritance, not the interface implementation, how the inheritance is implemented, here to introduce the concept of the prototype chain. What is the prototype chain, we can see a piece of code will know.

<span style= "FONT-SIZE:18PX;" >//inherited instance function A () {this.name = ' Lian ';} function B () {this.age=100;} function C () {this.address= ' China ';} B.prototype.age = 200; B.prototype =new A ();  b inherited the Ac.prototype =new B ();  C also inherits Bvar C=new C (); Alert (c.name+ "+ c.age);  C has properties of A and B </span>

In JavaScript, an inherited function is called a supertype (that is, an object-oriented parent class or a base class), and the inherited function is called a subtype (that is, a subclass or derived class). Inheritance is good, but it has its own problems, such as literal rewriting of prototypes that break relationships, use reference-type prototypes, and subtypes cannot pass parameters to super-types.

In general, we use a prototype chain with constructors, which results in combinatorial inheritance.

<span style= "FONT-SIZE:18PX;" >//combination Inherits function Box (age) {this.name= ' Lee '; this.age=age;} Box.prototype.run=function () {return this.name +this.age;}; function Desk (age) {Box.call (this,age);   Object posing, to the super-type}desk.prototype =new Box ();   The prototype chain inherits Var desk =new desk (); Alert (Desk.run ());   Apparently desk inherited the box's Run method </span>

Combinatorial inheritance is the most common way of inheriting JavaScript, but there is also a problem with combinatorial inheritance, which is that the super type is called two times during use, one time for creating subtypes, and one at the inside of a subtype constructor. This brings performance overhead, how to solve it? Leave it to the reader to think ...

JavaScript Learning 3: Prototypes and Inheritance