preface

A long time ago, still relatively white ah, so-and-so colleague, show me the following code

function A(){}
A.__proto__.__proto__.__proto__
Copy the code

Then ask me, the following thing a. __proto__.__proto__.__proto__ is what, and then I face confused, prototype also know A bit, this __proto__, also come three, is what ghost. So I have been unable to put down this problem, although I am very lazy, very do not like to waste the brain, but this hurdle still can not overcome, the last two days of research for most of the day, this article. For the answer, read the title of this article and the value is null.

I’m also responsible for telling you that the following values are also null: this is different from the previous code, which is instantiated with new.

function A(){}
var a = new A();
a.__proto__.__proto__.__proto__
Copy the code

The classic figure

Let’s start with a very classic picture, it’s a very classic picture, you understand it, you understand the world, and then the world is waiting for you to save the world.

__proto__ and prototype

Who has the problem

Typeof == object(except null) __proto__ typeof === function (__proto__ and prototype

What is __proto__? __proto__ refers to the prototype of the object’s constructor. For a simple example, the following output is true

function A(){}
var a = new A()
console.log(a.__proto__ === A.prototype)
Copy the code

A. __proto__. What __proto__ is derived, on the basis of the above a. __proto__ = = = Amy polumbo rototype, then a. __proto__. Amy polumbo rototype __proto__ is equivalent. __proto__, Continue to Amy polumbo rototype was derived. The constructor. The prototype, and then you go to a ratio, the result is false. So this prototype chain thing, it’s played under some rules.

a.__proto__.__proto__  === A.prototype.constructor.prototype  
// false
Copy the code

A few rules

Let’s not worry about that, but let’s look at the figure above, and we need to know or remember these rules

  1. Object.prototype.__proto__ === null

    Don’t get tangled up, iron rule
  2. Object.__proto__ === Function.prototype

B) Object,Number, Error, etc. C) Constructor d) constructor

B) Constructor b) Function. __proto__ === Function. Prototype === Function

Object.constructor.prototype  === Function.prototype  
// true
Function.constructor === Function
// true
Copy the code
  1. Function.prototype.__proto__ === Object.prototype

Is there a little bit of everything object design.

Function.prototype.constructor === Object 
// false
Copy the code

Custom functions, by default, such as function Person(){}, follow these rules: Person.prototype.__proto__ === Object.prototype Person.constructor === Function

To the chase

So we have these basic things that we can derive.

First look at the following code, js we push to a. __proto__.__proto__

function A(){} 
var a = new A()
Copy the code
  1. A.__proto__

Function a. __proto__ == Function. Prototype

  1. A.__proto__.__proto__

__proto__ === function.prototype.__proto__ === object.prototype A.__proto__.__proto__ === Function.prototype.__proto__ === Object.prototype

  1. A.__proto__.__proto__.__proto__

A. __proto__. __proto__. __proto__ = = = Object. The prototype. __proto__ based on Object. The prototype. __proto__ = = = null A.__proto__.__proto__.__proto__ === null

So far, we have derived the title part.

So that’s where I’m going. I’m going to go through the code

function A(){}
var a = new A();
a.__proto__.__proto__.__proto_
Copy the code

__proto__.__proto__.__proto__

  1. a.__proto__

Prototype A. __proto__ === A. protoType a.__proto__ === A.prototype a.__proto__ === a. prototype

  1. a.__proto__.__proto__

A. __proto__. __proto__ = = =. Amy polumbo rototype __proto__ according to rule 3, reference again, Foo.prototype.__proto__ === Object.prototype a.__proto__.__proto__ === A.prototype.__proto__ === Object.protype

  1. a.__proto__.__proto__.__proto__

A. __proto__. __proto__. __proto__ = = = Object. The protype. __proto__ according to the rules of an Object. The prototype. __proto__ = = = null a.__proto__.__proto__.__proto__ === null

Extension, plus inheritance

Let’s look at the inheritance

function Parent(){}
function Child(){}
Child.prototype = new Parent()
var child = new Child();
Copy the code

The Parent. __proto__. __proto__. __proto__ = = = null that do not have what to say.

Child.prototype.__proto__.__proto__.__proto__

Let’s look at the Child. The prototype. __proto__. __proto__. __proto__

  1. Child.prototype.__proto__

Child. Prototype. __proto__ Child. = = = prototype. Constructor. The prototype Child. The prototype is the Parent of the prototype instance, The constructor of the Child prototype is Parent, so child.prototype. __proto__ === Parent. Prototype

  1. Child.prototype.__proto__.__proto__

__proto__ === Parent. Prototype. __proto__ Foo.prototype.__proto__ === Object.prototype Child.prototype.__proto__.__proto__ === Object.prototype

  1. Child.prototype.__proto__.__proto__

Child.prototype.__proto__.__proto__ .__proto__=== Object.prototype.__proto__ === null

child.__proto__.__proto__.__proto__ .__proto__

Take a look at the child. __proto__. __proto__. __proto__. __proto__

  1. child.__proto__

child.__proto__ === Child.prototype

  1. child.__proto__.__proto__

child.__proto__.__proto__ === Child.prototype._proto__ === Child.prototype.constructor.prototype === Parent.prototype

  1. child.__proto__.__proto__.__proto__

Child.__proto__.__proto__ === Parent. Prototype. __proto__ reference graph Foo. Prototype child.__proto__.__proto__.__proto__ === Parent.prototype.__proto__ === Object.prototype

  1. child.__proto__.__proto__.__proto__.__proto__

child.__proto__.__proto__.__proto__.__proto__ === Object.prototype.__proto__ === null

Add more text

Take a look at the following code

function Grandpa(){}

function Parent(){}
Parent.prototype = new Grandpa();

function Child(){}
Child.prototype = new Parent()

var child = new Child()
Copy the code

__proto__ = __proto__ = __proto__ = __proto__ = __proto__

Formula is derived

  1. Any custom function, default, three times.__proto__Must be null

So you go up to three generations, Function,Object, Prototype === Function.__proto__ We derive function.__proto__.__proto__ Function.__proto__ === Function. Prototype __proto__ === function.prototype.__proto__ === object.proteType Function.__proto__.__proto__ .__proto__ ===Object.protetype.__proto__ === null

All constructed by Function let’s test CCC

Child.__proto__.__proto__.__proto__ === null // true
Copy the code
  1. Function Fn of inheritance relation, assuming the number of inheritance is n,fn = new Fn();

Fn.__proto__[3 + n] === null Child = 3+2

    child.__proto__.__proto__.__proto__.__proto__.__proto__ === null // true
Copy the code
  1. Function Fn of the inheritance relation, assuming that the number of inheritance is n

Derive fn.prototype. __proto__[3+n-1] Child should be __proto__ 4 times

```js
Child.prototype.__proto__.__proto__.__proto__.__proto__ === null // true
```
Copy the code

Of course, the above related relationship, slowly see their own

Outside of the text, class

The following code also follows the rules, as to why, ask yourself.

class Grandpa {}
class Parent extends Grandpa{}
class Child extends Parent{};
var child = new Child()
Copy the code

__proto__ and prototype.__proto__ for Number,Boolen, String,Function, Date, Array, RegExp, etc

  1. __proto__

__proto__ ===. Constrcutor. Prototype === function. prototype

  1. .prototype.__proto__

These old bones don’t follow the __proto__ = constructor’s prototype rule as mentioned above, function.prototype. __proto__ == object. prototype, etc., These built-in old bones. Proto__ === Object. Prototype

conclusion

To summarize, remember in particular:

  1. Object.prototype.__proto__ === null

  2. Function.proto__ === Object. Prototype Built-in Number,Boolen, String,Function, Date, Array, RegExp, etc

  3. Object.__proto__ === Function. Prototype === Function

  4. Math, JSON __ptoto__ is Object. Prototype typeof is Object, not Function

  5. Function A(){} the default stereotype relationship is as follows

A.prototype.__proto__ === Object.prototype

  1. Function with inheritance looks at the inference above

  2. Object literals and new Object() for example, var a ={}, b = new Object(), c = []; a.__proto__ === a.constructor.prototype === Object.protype a.__proto__.__proto__ === Object.protype.__proto__ === null

    __proto__ is null

  3. Basic data types string,number, Boolean, such as var a = “,b =10, c= false, b.__proto__ === b.constructor.prototype === Number.prototype b.__proto__.__proto__ === Number.prototype.__proto__ === Object.prototype b.__proto__.__proto__.__proto__ === Object.prototype.__proto__ === null

    __proto__ is null

  4. Null and undefined have no __proto__

In the end

  1. Look at the picture
  2. Browser inputxx.__proto__Or XX. Prototype