In-depth understanding of the prototype-based inheritance mechanism in JavaScript

prototype

Preface

Inheritance is a very important concept in object-oriented programming, and it plays a great role in helping code reuse.

text

When Brendan Eich created JavaScript, he did not choose the most popular class inheritance mechanism at the time. Instead, he borrowed from Self and used a prototype-based inheritance mechanism . This led to JavaScript's inheritance mechanism and Java, C++ and other based class inheritance mechanisms. There is a significant difference in the language.

The specific is - multiple inheritance in C ++, inheritance and interface implementation of Java are included in " class concept", they tend to before creating the object ¹ has been specified objects need to inherit the class and interface implementation, and use of class and class The way of inheritance between .

In JavaScript, there is no concept of " class ". The objects inherited after the object can also change dynamically, and the inheritance method between objects is used .

If the basic types composed of string, number, bigint, boolean, null, undefined, and symbol in JavaScript and their corresponding values are all pressed, the remaining reference types and their corresponding values will all have __proto__ ² attributes, pointing to inheritance The prototype object ³ .

Unlike __proto__, which exists in every object, the prototype property only exists in the function. By default, the value of the __proto__ property of all objects is consistent with the value of the prototype property under its constructor .

let obj = new Object();
obj.constructor === Object;//true
//obj的__proto__属性的值与obj的构造函数的prototype属性的值指向同一块堆内存
obj.__proto__ === obj.constructor.prototype;//true
obj.__proto__ === Object.prototype;//true

The constructors of all functions point to Function:

Object.constructor === Function;//true
//Object的__proto__属性的值与Object的构造函数的prototype属性的值指向同一块堆内存
Object.__proto__ === Object.constructor.prototype;//true
Object.__proto__ === Function.prototype;//true

Function.constructor === Function;//true
//Function的__proto__属性的值与Function的构造函数的prototype属性的值指向同一块堆内存
Function.__proto__ === Function.constructor.prototype;//true
Function.__proto__ === Function.prototype;//true

The prototype of the prototype property of Function points to Object.prototype:

Object.prototype === Function.prototype.__proto__;//true

Not only is the prototype of the prototype property of Function pointing to Object.prototype, almost all the prototypes of the prototype property of function ⁴ point to Object.prototype, as can be seen from the test code of V8 :

Finally, at the vertex of the prototype is Object.prototype. __proto__ , which points to null:

Object.prototype.__proto__ === null;//true
Object.prototype.constructor === Object;//true

According to the prototype point diagram drawn by the above logic:

In order to deepen the understanding, I will define another constructor:

function Person(){
    
    
	
}
Person.constructor === Function;//true
Person.__proto__ === Person.constructor.prototype;//true
Person.__proto__ === Function.prototype;//true

Create an object through the newly defined constructor:

let person = new Person();
person.constructor === Person;//true
person.__proto__ === person.constructor.prototype;//true
person.__proto__ === Person.prototype;//true

The final prototype point diagram drawn according to the above logic:

end

The key to understanding the prototype-based inheritance mechanism in JavaScript is to understand the pointing relationship of the __proto__, constructor, and prototype properties of Object and Function, and then to further understand the respective values ​​of Object and Function and the values ​​created by the corresponding value of Function. The pointing relationship of the __proto__, constructor, and prototype attributes of the object is done.
It may sound a little bit convoluted. It's best to draw a picture. When you forget it later, look at the picture you drew and remember it again.
Finally, this talent is very shallow, and if there are mistakes, I hope you can ignore it.

---

1. The wording here was originally before the program was run, and later it was associated with hotswap, and it was specifically changed to after the object was created. ↩︎

2. Although __proto__ has been deprecated, in order to be more intuitive, I will use the __proto__ property of the object to get the object prototype in this article. I hope to know. ↩︎

3. The prototype inherited by Object.prototype points to null. ↩︎

4. Bind, apply, and call have no prototype attribute. ↩︎