JavaScript prototype inheritance working principle and example detailed _javascript skill

First for everyone to share JS prototype Inheritance example, for your reference, the specific content as follows

First, JS prototype inheritance

<! DOCTYPE html>
 
 

Second, JavaScript prototype inheritance working principle

JavaScript is known for its prototype inheritance, but since it defaults to providing only an instance of implementation, the new operator, the explanation for it is always confusing, and then it explains what prototype inheritance is and how to use prototype inheritance in JavaScript.

Definition of prototype inheritance

When you read the explanations for the inheritance of JS prototypes, you will often see the following text:

When you look up an object's properties, JavaScript traverses the prototype chain up until it finds a property of the given name. --From the Secret Garden of JavaScript
Most implementations of JavaScript use the __proto__ attribute to represent the prototype chain of an object. In this article we will see the difference between __proto__ and prototype.

Note: __proto__ is an informal usage that should not appear in your code, just to explain how JavaScript prototype inheritance works.

The following code shows how the JS engine looks for attributes:

function GetProperty (obj, prop) { 
 if (Obj.hasownproperty (prop)) return 
 Obj[prop] 
 
 else if (obj.__proto__!= = null) return 
 GetProperty (obj.__proto__, prop) 
 
 else return 
 undefined 

Let's take a common example: a two-dimensional point that has two-D coordinates x y and has a print method.

With the definition of the prototype inheritance we mentioned earlier, we create an object point that has three attributes: X,y and print. In order to create a new two-dimensional point, we need to create a new object with the __proto__ attribute pointing to point:

var point = { 
 x:0, 
 y:0, 
 print:function () {Console.log (this.x, this.y);} 
; 
 
var p = {x:10, y:20, __proto__: Point}; 
P.print (); 10 20 

JavaScript Weird prototype inheritance

The puzzling thing is that every person who teaches a prototype inherits this code, but gives the following code:

function point (x, y) { 
 this.x = x; 
 This.y = y; 
} 
Point.prototype = { 
 print:function () {Console.log (this.x, this.y);} 
}; 
 
var p = new Point (a); 
P.print (); 10 20 

This is not the same as saying well, where point becomes a function, and then there is a property of what prototype, and with the new operator. What's the status of his meow?

How the new operator works

Creators Brendan Eich want to make JS and traditional object-oriented programming languages poor, such as Java and C + +. In these languages, we use the new operator to instantiate a class of objects. So he wrote a new operator in JS.

There is a constructor concept in C + + to initialize the instance property, so the new operator must be for the function.
We need to put the method of the object in one place, and since we're using the prototype language, we're going to put it into the prototype properties of the function.
The new operator accepts a function f and its arguments: new F (arguments ...). The process is divided into three steps:

Creates an instance of the class. This step is to set the __proto__ property of an empty object to F.prototype.
Initializes an instance of. Function F is passed into the argument and called, and the keyword this is set to the instance.
Returns an instance.
Now that we know how new is working, we can use the JS code to achieve:

function New (f) { 
 var n = {' __proto__ ': F.prototype};/* First step */return 
 function () { 
 f.apply (n, arguments); 
   /* the second step * 
 /return n;    * * Third step 
 /}; 

A small example to look at his working condition:

function point (x, y) { 
 this.x = x; 
 This.y = y; 
} 
Point.prototype = { 
 print:function () {Console.log (this.x, this.y);} 
}; 
 
var p1 = new Point (a); 
P1.print (); 
Console.log (P1 instanceof point);//True 
 
var P2 = New (point); 
P2.print (); 10 20 

Real prototype inheritance in JavaScript

The ECMA specification of JS only allows us to use the new operator for prototype inheritance. But the master Douglas Crockford found a way to use new to achieve real prototype inheritance! He wrote down the Object.create function as follows:

Object.create = function (parent) { 
 function F () {} 
 f.prototype = parent; 
 return new F (); 
}; 

This may seem strange, but it is quite concise: it creates a new object and sets its prototype to whatever value you want to set. If we allow the use of __proto__, we can also write this:

Object.create = function (parent) {return 
 {' __proto__ ': parent}; 

The following code is to let our point take the real prototype inheritance:

var point = { 
 x:0, 
 y:0, 
 print:function () {Console.log (this.x, this.y);} 
; 
 
var p = object.create (point); 
p.x = ten; 
P.Y =; 
P.print (); 10 20 

Conclusion

We have already learned what JS prototype inherits and how JS can be implemented in a specific way. However, using real prototype inheritance (such as object.create and __proto__) still has the following drawbacks:

Poor standard: __proto__ is not a standard usage, even a usage that is not in favor of use. At the same time, the original ecological Object.create and the original written by the master are also different.
Poor optimization: either native or custom object.create, its performance is far less than the new optimization of the high, the former is 10 times times slower than the latter.

The above is the entire content of this article, I hope to help you learn.