A detailed explanation of the prototype oop_javascript techniques in JavaScript

Objective

The JavaScript prototype chain has always been a mystery to many novice book, but if you want to delve into JavaScript, you'll have to study the following, and you may have little chance to use it, but I'd like to say that the opportunity is always left to those who are prepared, Here we will learn about this article.

Baidu Encyclopedia, this describes the property: in JavaScript, prototype object is an important mechanism to achieve object-oriented. Each function is an object (function) that has a child object prototype object, and the class is defined as a function. Prototype represents the prototype of the function and also represents a collection of members of a class.

Understanding in practice

So I made the following experiment in the browser:

You can see I set a Test "type". I used typeof to get the type result of test "type" as a function, and the result tells us that he is a class. And then I went on to get Test.prototype the type, which is the type of the prototype, and the result is object, which tells us that this is a target. By attaching a series of methods and attributes to an object, you understand what object is. Now that we know this is an object, we can do a series of operations on the object.

Please look at the code:

<script>//To 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 ');
    One more method >> honk Car.prototype.Hoot = function () {Console.log ("beep beep");

    }//Come a property >> wheel quantity Car.prototype.Wheel = 4;
      Tesla >> comes with three parameters >> brand, model, power function Tesla (Carbrand, model, powertrain) {Car.call (this, carbrand, model);
    This.power = power;
    Tesla.prototype = Object.create (Car.prototype);//Create an empty object, and make its prototype point to the parameter, that is, Car.prototype. Tesla.prototype.constructor = Tesla; Cancellation does not affect the overall process, but in order to maintain a consistent Tesla construct, if there is no line code, then constructor is the car Tesla.prototype.Acceleration = function () {Console.log ("t
    "+ This.carbrand +"--' + this.model+ ' and Drive by ' +this.power);
      }//Tesla's unique Getgirl you know the 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 also opened a Tesla. I have defined the type of car and you need two parameters, brand and model when getting the object of the car. There is an acceleration, a way to whistle. Below I want Tesla to inherit car's underlying methods and properties. And then I defined the Tesla type, and in which you call the parent class by calling the method, you may not see the meaning of the call here, because the car type is only assigned, and if you do a series of complex logical operations after the assignment (vehicle production), it will feel useful.

Output results

Look at the output, do not ask why, continue to look down.

You see the output "I'm Tesla ModelX, the electric car." The other output is not detailed.

Tesla's prototype prototype is pointing to a car prototype, why not just assign a value? The reason is that when the prototype is directly assigned, the additional properties and methods of the subclass prototype object are taken to the parent class.

Then the prototype structure of Tesla to itself, if not to itself, then its prototype construction is car, although does not affect the overall process, but in order to ensure consistency, or to maintain its prototype structure in Tesla. The following Tesla owns an acceleration method with the same name as the parent class. You also have the getgirl of your own method, you can manually call and see the parent prototype object with no subclass of methods.

When a subclass invokes a method with the same name as the parent class, the invocation of the subclass is selected. And the subclass Tesla does not own the Siren method, prototype along the prototype chain to the father, you can call the parent class Honk method.

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work to bring certain help, if you have questions you can message exchange.