Deep understanding of JavaScript - the first emperor in JavaScript

First Emperor in JavaScript

foreword

The author sent a question about the relationship diagram of the prototype chain in the inheritance . The title came from Yan Haijing's How to answer the JavaScript prototype chain question in the interview. This question is really good. When I finish drawing it, I will see this picture. The feeling of the picture

Indeed, this picture is very confusing to understand. Let's look at these pieces of code

 Object instanceof Object // true
Function instanceof Function // true
Object instanceof Function // true
Function instanceof Object // true

Why is this so, who is the first emperor of Object and Function, and where is Object.prototype, and Function.prototype?

This topic has been discussed in Zhihu. Is there Object or Function first in JS?

Here, the author checks who is the first emperor to appear

text

When writing everything is an object , the author explained that objects in JavaScript have built-in objects, and these built-in objects are created inside the language. These built-in objects are constructors, which are also called built-in constructors. The purpose of their existence is to make It is more convenient for developers to write code. These built-in constructors include Object, Function, Array, String, Number, RegExp, and more

Because they are constructors, they must belong to functions, because they are functions, they are all created by Function, and because they are created by Function, they are all instances of Function, ie

 String instanceof Function // true
Array instanceof Function // true
Function instanceof Function // true
Object instanceof Function // true

So their prototype chain diagram is

And because Function is a function, it has a prototype property. Because functions are also objects, Function also has constructor and [[Prototype]], and its relationship diagram is

So there is

 Function.__proto__ === Function.prototype

which is:

In prototypes , we talked about the prototype chain, because every object has a [[Prototype]] property, which will point to its prototype object, layer by layer, and eventually null. And the last stop of null is Object.prototype

Whether you are the prototype of the constructor or the prototype of a custom object, it will point to Object.prototype first, and then Object.prototype points to null

 String.prototype.__proto__ === Object.prototype // true
Number.prototype.__proto__ === Object.prototype // true
Array.prototype.__proto__ === Object.prototype // true
Function.prototype.__proto__ === Object.prototype // true
Object.prototype.__proto__ === null // true

var obj = {};
var arr = [];
function func() {}
obj.__proto__ ===  Object.prototype // true
arr.__proto__.__proto__ === Object.prototype // true
// arr.__proto__ 指向 Array.prototype
func.__proto__.__proto__ === Object.prototype // true
// func.__proto__ 指向 Function.prototype

Their prototype chain diagram is shown below:

So looking at the code and diagram, we know that the source of all prototype inheritance is Object.prototype, and the properties on the Object.prototype object will be used by any value, so the most accurate way to judge the type is Object.prototype.toString.call(source)

If we combine the source of the constructor with the source of the prototype, we get this:

This picture is almost the same as that of Object Layout, the key lies in Object and Function

Object.prototype the mother of prototypes, from which any prototype is derived

Function.prototype is the mother of constructors, any constructor is created by it, including itself

With these two points in mind, let's look back at this issue

 Object instanceof Object // true
// Object 由 Function.prototype 创建，Function.prototype 的原型对象指向 Object.prototype
Function instanceof Function // true
// Function 由 Function.prototype 创建
Object instanceof Function // true
// Object 由 Function.prototype 创建
Function instanceof Object // true
// Function 由 Function.prototype 创建，Function.prototype 的原型对象指向Object.prototype

One thing to note: Constructors are also instances. Find out the constructors and prototypes that created them.

Summarize

Who is the first emperor, no doubt. Object.prototype is the real emperor, and any prototype is derived from it; and Function.prototype is second only to Object.prototype, it is the creator of the built-in constructor, and any constructor is derived from it

series of articles

• Deep understanding of JavaScript - the beginning
• Deep understanding of JavaScript - what is JavaScript
• Deep understanding of JavaScript - what JavaScript consists of
• Deep understanding of JavaScript - everything is an object
• Deep understanding of JavaScript-Object (object)
• In-depth understanding of what JavaScript-new does
• Deep understanding of JavaScript-Object.create
• Deep understanding of JavaScript - the secret of copying
• Deep understanding of JavaScript - prototype
• Deep understanding of JavaScript - Inheritance