Working Principle and example of javascript prototype inheritance, javascript prototype

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.