Working Principle and example of javascript prototype inheritance, javascript prototype

Working Principle and example of javascript prototype inheritance, javascript prototype

First, we will share with you examples of JS prototype inheritance for your reference. The details are as follows:

I. JS prototype inheritance

<! DOCTYPE html> 
Ii. Working Principle of JavaScript prototype inheritance
It is well known that JavaScript uses prototype inheritance, but because it only provides an implementation instance by default, that is, the new operator, its interpretation is always confusing, next we will explain what prototype inheritance is and how to use prototype inheritance in JavaScript.
Definition of prototype inheritance
When you read the interpretation of JS prototype inheritance, you often see the following text:
When you look for an object's properties, JavaScript will traverse the prototype chain up until the property of the given name is found. -- From JavaScript Secret Garden
Most JavaScript implementations 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. Here we only use it 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 has a two-dimensional coordinate x y, which is similar to a print method.
Using the prototype inheritance definition we mentioned earlier, we create an object Point with three attributes: x, y, and print. In order to create a new two-dimensional Point, we need to create a new object so that the _ proto _ attribute points to the 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
What is confusing is that every prototype inherited by the professor does not provide such a piece of code, but rather provides 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(10, 20); p.print(); // 10 20 
This is not the same as saying yes. Here Point becomes a function, and there is another prototype attribute with the new operator. What is his meow?
How the new operator works
The author Brendan Eich wants to make JS and traditional object-oriented programming languages less different, such as Java and C ++. In these languages, we use the new operator to instantiate a new object for the class. So he wrote a new operator in JS.
C ++ can be used to initialize the constructor concept of instance attributes. Therefore, the new operator must be used for functions.
We need to put the object method in one place. Since we are using the prototype language, we will put it in the prototype attribute of the function.
The new operator accepts a function F and Its Parameter: new F (arguments ...). This process is divided into three steps:
Create a class instance. In this step, set the _ proto _ attribute of an empty object to F. prototype.
Initialize the instance. Function F is passed in and called, and the keyword "this" is set to this instance.
Return instance.
Now we know how new works. We can implement it using JS Code:
Function New (f) {var n = {'_ proto _': f. prototype};/* Step 1 */return function () {f. apply (n, arguments);/* Step 2 */return n;/* Step 3 */};}
Let's take a look at his work situation in a small example:
function Point(x, y) {  this.x = x;  this.y = y; } Point.prototype = {  print: function () { console.log(this.x, this.y); } };  var p1 = new Point(10, 20); p1.print(); // 10 20 console.log(p1 instanceof Point); // true  var p2 = New (Point)(10, 20); p2.print(); // 10 20 console.log(p2 instanceof Point); // true 
Real prototype inheritance in JavaScript
The ECMA specification of JS only allows us to use the new operator for prototype inheritance. But Douglas Crockford discovered a way to use new to implement real prototype inheritance! He wrote the Object. create function as follows:
Object.create = function (parent) {  function F() {}  F.prototype = parent;  return new F(); }; 
This looks strange, but it is quite concise: it creates a new object and its prototype is set to any value you want to set. If we allow _ proto _, we can also write it like this:
Object.create = function (parent) {  return { '__proto__': parent }; }; 
The following code allows our Point to inherit from its prototype:
var Point = {  x: 0,  y: 0,  print: function () { console.log(this.x, this.y); } };  var p = Object.create(Point); p.x = 10; p.y = 20; p.print(); // 10 20 
Conclusion
We have learned what prototype inheritance is and how to implement Javascript in a specific way. However, using real prototype inheritance (such as Object. create and _ proto _) still has the following Disadvantages:
Standard Deviation :__Proto _ is not a standard usage, or even an unsupported usage. At the same time, the original Object. create and the original file written by the Tao ye are also different.
Poor optimization:Whether it is native or custom Object. create, its performance is far from the degree of optimization of new, the former is as slow as 10 times than the latter.
The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:

 

 
  
In-depth exploration of javascript prototype is not as simple as prototype inheritance
 
  
Analysis of Javascript prototype inheritance recommendations
 
  
Prototype inheritance of javascript object-oriented new rational training
 
  
Understanding the Javascript_05 _ prototype inheritance Principle
 
  
Basic Mechanism Analysis of JavaScript prototype inheritance
 
  
Introduction to javascript prototype inheritance
 
  
JavaScript prototype inheritance
 
  
Prototype inheritance of javascript
 
  
Comparison between two methods of js prototype inheritance
 
  
Let's talk about javascript prototype inheritance.