Thinking chicken and egg problem caused by a piece of code on the Object and Function

As a front-end developers, we all know that JS is single inheritance, which is the top Object.prototype prototype chain includes all objects inherited toString (), valueOf () and so on public property from it.

The origin of the chicken and egg problem

First, Objectand Functionare constructors and constructors are all Functionexamples of objects. So Objectis Functionthe instance of the object; and Function.prototypeis Objectan instance of an object. So here's an interesting corollary question of the chicken and the egg:

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

Object.__proto__ === Function.prototype  // true
Function.__proto__ === Function.prototype  // true
Function.prototype.__proto__ === Object.prototype  // true
复制代码

Well Objectand Functionwho is chicken egg who is it?

Then on to delve into chicken eggs under the above code caused by the chicken issue, this starts with the following prototype / prototype chain classic map, in-depth understanding of this process Object.prototype, Function.prototype, function Object(), function Function()the relationship between this process may be a bit burned brain, after all, is a big thing JS metaphysics.

Object.prototype

The end of the prototype chain is Object.prototype(without regard to nullthe case of). All objects are from Object.prototypepublic property inherited toString () and so on .

Object.prototypeIt represents the Objectprototype object, in fact, Object.prototypenot by the Objectfunction of creation, why? Look at the following code:

function Dog() {
  this.name = '川普';
}
var dog = new Dog();
dog.__proto__ === Dog.prototype;  // true
复制代码

Examples of objects __proto__will point to the constructor prototypethat dog.__proto__point Dog.prototype, but Object.prototype.__proto__again null, it is Object.prototypenot through Objectfunctions created, how it was produced? In fact, Object.prototypethe browser according to an object underlying the creation of the ECMAScript specification, so just look at the classic view of the inside Object.prototypeby Objectthe function of creation, not really.

Function.prototype

Function.prototypeAnd Function.__proto__for the same object .

This also means that: Object/ Arrayetc on the structure and function is essentially Functionthe same, are inherited Function.prototypefrom the classic map view is through new Functionstructure out .

Of course, Function.prototypethe object is a function (object), which __proto__attribute points Object.prototype, i.e. Function.prototypedirectly inherited the root Object.prototype( ).

By this point we can figure out the inherited prototype chain : Function|Object|Array...--->Function.prototype--->Object.prototype(root). As shown below:

function Object()

ObjectAs a constructor and its __proto__attribute points Function.prototype, namely:

Object.__proto__ === Function.prototype  // true
复制代码

From the classic map view:

Used new Object()when creating instance objects o1, o1 of the object instance __proto__attribute points constructor prototypeattribute corresponding figure it is Object.prototypethat o1.__proto__ === Object.prototypethe result is true.

Function.prototypePointing to objects, it __proto__will point to Object.prototype, because Function.prototypethe object pointed to is also a common Objectobject creation, so it follows the basic rules.

function Function()

FunctionIs also a function object, but also __proto__property, since it is a function, then it must have been Functioncreated, it Functionis self-created, so it's __proto__pointing to its own Prototype:

Function.__proto__ === Function.prototype  // true
复制代码

Here a little brain burn it, we look at chicken-and-egg problem.

Function & Object chicken and egg problem

As is clear from the above, Objectthe constructor inherited Function.prototype, while Functionthe constructor inherited Object.prototype, there arises a chicken and egg problem. Why is there such a problem? We must first understand a deeper level to Function.prototypethis object because it is the cause Function instanceof Objectand Object instanceof Functionare truethe reason.

// Object instanceof Function 	即
Object.__proto__ === Function.prototype   // true

// Function instanceof Object 	即
Function.__proto__.__proto__ === Object.prototype   // true

// Object instanceof Object 		即 			
Object.__proto__.__proto__ === Object.prototype   // true

// Function instanceof Function 即	
Function.__proto__ === Function.prototype   // true
复制代码

The JS specification, Function.prototypebut is different from the general function (object) function (object), wherein:

1. Function.prototypeLike normal function can be called, but always returned undefined.
2. Normal function is actually Functionan instance of a normal function that is inherited Function.prototype. Ie func.__proto__ === Function.prototype.
3. Function.prototypeInherited Object.prototype, and not prototypethe property.
4. So, Function.prototypein fact, is a different type of function, it can be independent of / prior to Functionproduction.

And Objectitself is a (structural) function, are Functionexamples, i.e., Object.__proto__it is Function.prototype.

Summary: prior Object.prototype(prototype chain to the top), Function.prototypesuccession Object.prototypeto produce, finally, Functionand Objectother inherited constructors Function.prototypegenerated .

I guess we see here are tired of, is not it still a bit confusing? Chaos is normal. That article would let it mess with, next we will invite another friend to help, it completely clear rationale, old friend is - , instanceofthen please listen to next time decomposition slightly.

If you think the article to help you slightly, welcome in my GitHub blog points praise and attention, very grateful!