Javascript: Prototype and inheritance (Part 1)

As we know, a method is a function called as an attribute of an object. When a function is called in this way, the object used to access the function becomes the value of the this keyword. Suppose you want to calculate the area of the rectangle represented by a rectangle object, you can do this:

function computeAreaOfRectangle(r){return r.width*r.height;}

This is also valid, but not object-oriented. When using an object, it is best to call a method on the object instead of passing the object to a function. That is to say:

var r=new Rectangle(8.5,11);r.area=function(){return this.width*this.height;}var a=r.area();

You must add this method to the object before calling a method. Of course, the method here is ridiculous. You can initialize the area attribute in the constructor to point it to an area calculation function, which can improve this situation. The improved rectangle () constructor is as follows:

function Rectangle(w,h){this.width=width;this.height=h;this.area=function(){return this.width*this.height;}}

With this new constructor, we can write such code:

var r=new Rectangle(8.5,11);var a=r.area();

This solution is effective, but not optimal. Each created rectangle has three attributes. The width and height attributes of each rectangle may be different, but the area attribute of each rectangle object always points to the same function. It is very inefficient to use a common attribute for methods that intentionally share all objects in the same class.

However, this is a solution. It proves that each JavaScript Object contains an internal reference to another object (that is, its prototype object.Any attribute of a prototype object is represented by the attribute of each object with its prototype.Another expression of this sentence is,Javascript objects inherit attributes from their prototype.

We already know that you can use the new operator to create a new empty object and call the constructor as a method of this object. But this is not all about it,After this empty object is created, new sets the prototype of this object.

The prototype of an object is the value of the prototype attribute of its constructor.All functions have a prototype attribute. When this function is defined, the prototype attribute is automatically created and initialized. The initialization value of the prototype attribute is an object with only one attribute. This attribute is called constructor, which refers to the constructor associated with the prototype. (Xxxfunction. Prototype. constructor = xxxfunction) Any attribute added to this prototype object will become the attribute of the object initialized by the constructor.

Use an example to illustrate more clearly. Next, we will use the rectangle () constructor again:

function Rectangle(w,h){this.width=w;this.height=h;}Rectangle.prototype.area=function(){return this.width*this.height;}

The constructor provides a name for the object's "class" and initializes attributes such as width and height. These attributes may vary in each instance of the class. The prototype object is related to this constructor. In addition, each object initialized by the constructor indeed inherits identical attributes from the prototype.This means that the prototype object is ideal for placement methods and other unchanged attributes.

Note that inheritance occurs automatically as part of the process for finding an attribute value. Attributes are not copied from the prototype object to the new object. They only appear like the attributes of those objects. There are two important meanings:
① First, using a prototype object can significantly reduce the memory required for each object, because the object can inherit many attributes of the prototype.
② Even if an object is added to the prototype after it is created, the object can inherit it. This means that you can add new methods for existing classes.
The inherited attributes play the same role as the general attributes of the object. You can use the for/in loop to enumerate them and test them in the in operator. Only object. hasownproperty () can be used to distinguish inherited and general attributes.

var r=new Rectangle(2,3);r.hasOwnProperty("width");  //truer.hasOwnProperty("area");  //false"area" in r;  //true