Prototype inheritance in JavaScript

First, let's look at the prototype programming paradigm that includes at least the following basic rules.

? All the data are objects.

? To get an object, instead of instantiating the class, find an object as a prototype and clone it.

? The object remembers its prototype.

? If the object cannot respond to a request, it delegates the request to its own prototype.

Let's talk about the following JavaScript's prototype inheritance:

1. All data are objects:

JS has two sets of mechanism types: basic types and Object types, basic types include undefined, number, Boolean, String, function, object, type of objects including string, number, Array, Date, function and the objects that you set up, and so on. In fact, JS in addition to underfined is not the object, the other is the object, then in JS will also have a root object, these objects are traced from this root object.

In fact, the root object in JavaScript is the Object.prototype object. The Object.prototype object is an empty object. Every object that we encounter in JavaScript is actually cloned from the Object.prototype object, and the Object.prototype object is their prototype. For example, the following Obj1 objects and Obj2 objects:

var obj1 = new Object ();
var obj2 = {};

You can use the object.getprototypeof provided by ECMAScript 5 to view the prototypes of these two objects:

Console.log (object.getprototypeof (obj2) = = = Object.prototype); Output: True

Console.log (object.getprototypeof (obj1) = = = Object.prototype); Output: True

2. To get an object, instead of instantiating the class, find an object as a prototype and clone it

var obj1 = new Object () or var obj2 = {}. At this point, the engine internally clones an object from the Object.prototype, and we finally get the object. Let's see how to get an object from the constructor with the new operator

function person (name) {
    THIS.name = name;
};
Person.prototype.getName = function () {
    return this.name;
};
var a = new person (' Sven ')
Console.log (A.name); Output: Sven
Console.log (A.getname ()); Output: Sven
Console.log (object.getprototypeof (a) = = = Person.prototype);//output: True

When you use the new operator to invoke a function, the function at this point is a constructor. The process of creating an object with the new operator is actually just cloning the Object.prototype object (JavaScript is cloning the object.prototype to get the new object, but in fact it doesn't really clone a new object every time.) In terms of memory considerations, JavaScript also does some extra processing), and then some additional steps are taken.

3. The object will remember its prototype

If the request can be passed sequentially in a chain, then each node must know its next node. In the same vein, the prototype chain lookup mechanism in JavaScript language, each object should remember its own prototype at least first. We have been discussing the prototype of the object for the time being, in terms of the real implementation of JavaScript, it is not possible to say that the object has a prototype, but only that the constructor of the object has a prototype. For the "object to delegate the request to its own prototype", the better argument is that the object delegates the request to its constructor's prototype. So how does the object pass the request smoothly to its prototype of the constructor? We have been talking about the prototype of the object, and in terms of the real implementation of JavaScript, it is not possible to say that the object has a prototype, but only that the constructor of the object has a prototype. For the "object to delegate the request to its own prototype", the better argument is that the object delegates the request to its constructor's prototype. So how does the object pass the request smoothly to its prototype of the constructor?

JavaScript provides an object with a hidden property named __proto__, and the __proto__ property of an object defaults to its constructor's prototype object, which is {constructor}.prototype. In fact, __proto__ is the link between the object and the prototype of the object constructor. It is because the object is going through the __proto__ property to remember its constructor's prototype.

var a = new Object ();
Console.log (a.__proto__ = = = Object.prototype); Output: True

4. If the object cannot respond to a request, it delegates the request to its constructor's prototype

This rule is the essence of prototype inheritance. In JavaScript, each object is cloned from the Object.prototype object, and if so, we can only get a single inheritance relationship, that is, each object inherits from the Object.prototype object, such an object system 4 is very limited. But the prototype of the object constructor is not limited to object.prototype, but it can point to other objects dynamically. In this way, when object a needs to borrow the ability of object B, it can selectively point the prototype of object A's constructor to object B, thus achieving the effect of inheritance. The following code is our most common way of inheriting prototypes:

var obj = {name: ' Sven '};
var A = function () {};
A.prototype = obj;//Output: Sven

Let's take a look at what the engine did when the code was executed.

? First, it attempts to traverse all the properties in object A, but does not find the Name property.

? The request to find the name attribute is delegated to the prototype of the constructor of object A, which is a.__proto__ logged and points to A.prototype, and A.prototype is set to object obj.

? The Name property is found in object obj and its value is returned.

When we expect a "class" to inherit from another "class" effect, we often use the following code to simulate the implementation:

var A = function () {};
A.prototype = {name: ' Sven '};
var B = function () {};
B.prototype = new A ();
var B = new B ();
Console.log (B.name); Output: Sven
Let's look at the execution of this code and what the engine does.

? First, it attempts to traverse all the properties in object B, but does not find the Name property.

? The request to find the name attribute is delegated to the prototype of the constructor of object B, which is b.__proto__ logged and points to B.prototype, and B.prototype is set to an object created by new A ().

? The name attribute is still not found in the object, so the request is continued to be delegated to the prototype A.prototype of the object constructor.

? The Name property is found in A.prototype and its value is returned.

Prototype inheritance in JavaScript