JavaScript prototype OOP-are you on the bus?

JavaScript prototype OOP-are you on the bus? In this article, new drivers with certain vehicle skills can get on the bus. You can take me with old drivers. The copyright belongs to the blog and the author himself. for reprinting and crawling, please indicate the original address of the blog garden, Wu Shuang www.cnblogs.com/tdws.

The JavaScript prototype chain is mysterious and hard to understand for new drivers like you and me, but you have to do something when you become an old driver, maybe you rarely have a chance to use it, but I 'd like to say that the opportunity is always reserved for prepared people. It is such a small code episode that makes you and me a real old driver. Today, the last car:

In Baidu encyclopedia, property is described as follows: In JavaScript, prototype objects are an important mechanism for implementing object-oriented. Each Function is an object (Function). The Function object has a prototype object and the class is defined as a Function. Prototype indicates the prototype of the function and a set of class members.

Understanding in practice

Then I will make the following experiment in the browser:

Write it by yourself and get more.

Script // comes with two parameters> brand, model function Car (carBrand, model) {this. carBrand = carBrand; this. model = model;} // come to a method> acceleration method Car. prototype. acceleration = function () {console. log ("this is" + this. carBrand + '--' + this. model);} // another method> press the horn Car. prototype. hoot = function () {console. log ("Tick tick");} // come to an attribute> wheel number Car. prototype. wheel = 4; // Tesla> come to three parameters> brand, model, power function Tesla (carBrand, model, power) {Car. call (this, carBrand, model); this. power = power;} Tesla. prototype = Object. create (Car. prototype); // create an empty object and point its prototype to a parameter, that is, Car. prototype. tesla. prototype. constructor = Tesla; // cancellation does not affect the overall process, but to maintain consistent Tesla construction, if this line of code is not available, constructor is Car Tesla. prototype. acceleration = function () {console. log ("this is" + this. carBrand + '--' + this. model + "And Drive by" + this. power);} // Tesla's unique GetGirl method Tesla. prototype. getGirl = function () {console. log ('yes, fucking car... ');} // Tesla modelX electric var modelX = new Tesla ("Tesla", "ModelX", "electric power"); console. log (typeof modelX); modelX. acceleration (); console. log (modelX. wheel); modelX. getGirl (); modelX. hoot (); console. log (Tesla. prototype. constructor); script

In the code, I made a series of comments and opened a pair of Tesla. I have defined the Car type, and you need two parameters, brand and model, when getting the Car object. There is a method of acceleration and a whistle. Below I hope Tesla can inherit the basic methods and attributes of Car. Then I defined the Tesla type and called the parent class method through call. You may not see the significance of this call here, because the Car type is only a value assignment, if the assignment is made after a series of complex logic operations (vehicle production), it will feel useful.

Output driving result

Let's take a look at the output. You don't have to ask why.

You saw the output: I'm a Tesla ModelX, an electric car. Other outputs are not described in detail.

Tesla's prototype refers to a Car prototype. Why not assign a value directly? The reason is that when the prototype is directly assigned, the additional attributes and methods of the subclass prototype object will be taken to the parent class.

Then, the prototype structure of Tesla points to itself. If it does not point to itself, the prototype structure is Car. Although it does not affect the overall process, to ensure consistency, or keep the prototype in Tesla. tesla owns the acceleration method with the same name as its parent class. You also have the GetGirl method you know. You can manually call it and see that there are no subclass methods on the parent class prototype object.

When a subclass calls a method with the same name as the parent class, it selects a subclass call. The subclass Tesla does not have the whistle method. prototype searches for its father along the prototype chain and can call the Horn method of the parent class.