Will want to waste, will be solid xing; Take what you want and hold on to it. — Tao Te Ching

JavaScript Prototype Series (I) Constructors, prototypes, and prototype chains

What is Prototype Inheritance

Function, Object, Null, etc

Introduction to the

You basically know that the end of the prototype chain points to NULL, __proto__, Object. Prototype, null, function.prototype. __proto__, Object. __proto__, Function, Object What? Let’s take our time.

Object


The Object constructor creates an Object wrapper. All objects in JavaScript come from Objects; All objects inherit methods and properties from Object.prototype, although they may be overridden.

When Object is used as a constructor, its [[Prototype]] internal property values point to function.prototype

    Object.__proto__ === Function.prototype; // true
Copy the code

Object.prototype

Object. Prototype Specifies the prototype Object. The [[prototype]] attribute is null, and the accessor attribute __proto__ exposes the interior of an Object. Object. Prototype is an Object created by the ECMAScript specification at the bottom of the browser.

object

Instantiate an object with a literal whose __proto__ refers to Object.prototype.

    var obj = {};
    obj.__proto__ === Object.prototype; // true
Copy the code

Instantiate an Object with its __proto__ pointing to Object.prototype.

    var obj = new Object;
    obj.__proto__ === Object.prototype; // true
Copy the code

Function


Excerpts from ECMAScript 5.1 specification

An instance of the standard built-in constructor Function, and can be called as a subroutine. Note: In addition to having named attributes, functions also contain executable code, state, which determines how they will behave when called. Function code is not limited to ECMAScript.

The Function constructor creates a new Function object. In JavaScript every Function is actually a Function object.

Function.prototype

A global Function object has no properties and methods of its own, but since it is a Function itself, it inherits some properties and methods from function.prototype via the prototype chain. Prototype is also a “Function Object” whose [[prototype]] internal property values point to Object.prototype.

Prototype’s [[Class]] attribute is Function, so this is a Function, but not the same.

    Function.prototype; ƒ () {[native code]}
    Function.prototype.prototype; // undefined
Copy the code

Function objects created with function.prototype. bind have no prototype properties.

    let foo = Function.prototype.bind();
    foo.prototype; // undefined
Copy the code

Function. The prototype is a Function of engine is created, the engine that does not need to add the prototype to the Function object attributes, or the Function. The prototype. The prototype… It would be endless and meaningless.

Function.prototype.__proto__ points to Object.prototype.

    Function.prototype.__proto__ === Object.prototype; // true
Copy the code

Function.proto

The Function constructor is a Function object whose [[Class]] property is Function. Function’s [[Prototype]] property points to function. Prototype, i.e

    Function.__proto__ === Function.prototype; // true
Copy the code

function

Instantiate a Function whose __proto__ points to function. prototype.

    function foo () {}
    foo.__proto__ === Function.prototype; // true
    // foo.__proto__ => Function.prototype => Function.prototype.__proto__ => Object.prototype => Object.prototype.__proto__  => null
Copy the code

The chicken and egg problem of Object and Function


After the above elaboration of Object and Function, several problems are extended as follows:

  • When null is dropped on the prototype chain, the end of the prototype chain (root) is Object.prototype. All objects inherit properties from Object.prototype.

  • Function.prototype and function. __proto__ are the same object.

    This means:Object/Array/String, etc.The constructorIn essence,FunctionBe inherited fromFunction.prototype.

  • Prototype directly inherits root (object.prototype).

    // Function. Prototype inherits Object. Prototype
    Function.prototype.__proto__ === Object.prototype; // true
    Function.prototype instanceof Object; // true
    Function.prototype instanceof Function; // false

    // Object Array Function and other constructors inherit function.prototype
    Function instanceof Function; // true
    Array instanceof Function;  // true
    Object instanceof Function; // true
    Function instanceof Object; // true
Copy the code

By the above code know inherited prototype chain is roughly: Object. The prototype (root) < – Function. The prototype < – Function | Object | Array… .

One of the odder phenomena is as follows:

  • The first question
    Function.__proto__ === Function.prototype;
Copy the code

Is a Function object an instance created by the Function constructor?

  • The second question
    Function instanceof Object; // true
    Object instanceof Function; // true
    Object instanceof Object; // true
    Function instanceof Function; // true
Copy the code

Function instanceof Object is true, and Object instanceof Function is true.

answer


Function. Prototype (); Object ();

  • Function.prototypeIs a function (object) that is different from a normal function (object).

The Function prototype object is itself a Function object (its [[Class]] is “Function”) that, when invoked, accepts any arguments and returns undefined. The value of the [[Prototype]] internal property of the Function prototype Object is the standard built-in object prototype object (15.2.4). The Initial value of the [[Extensible]] internal property of the Function prototype object is true. The Function prototype object does not have a valueOf property of its own; however, it inherits the valueOf property from the Object prototype Object.

The above can be summarized as:

  • Function. Prototype can be called like a normal Function, but always returns undefined.

  • Normal functions are actually instances of Function, i.e. normal functions inherit from function.prototype. Func. __proto__ = = = the Function prototype.

  • Prototype inherits from Object.prototype and does not have the prototype property. Func. The prototype is ordinary objects, the Function prototype. The prototype is null.

  • Function. Prototype is an alternative Function that precedes Function independently of /.

  • Function. __proto__ is Function. Prototype.

The value of the [[Prototype]] internal property of the Object constructor is the standard built-in Function prototype object. The value of the [[Prototype]] internal property of the Object prototype object is null, the value of the [[Class]] internal property is “Object”, and the initial value of the [[Extensible]] internal property is true.

The first question

Is a Function object an instance created by the Function constructor?

Yes part: according to the definition of “instance” in JavaScript, a is an instanceof b, i.e. a instanceof b is true. The default judgment condition is that b.prototype is on the prototype chain of a. Function instanceof Function = true; object.getProtoTypeof (Function) == Function. Prototype

The No part: Function is a built-in object, so there is No such thing as a “Function object created by the Function constructor”. In fact, when you write a function directly (such as function f() {} or x => x), there is no function constructor to call, Only when the Function constructor is explicitly called (e.g. New Function(‘x’, ‘return x’)).

Function. Prototype all constructors are integrated into Function. Prototype. So function.__proto__ === function.prototype.

The second question

    // function.__proto__ and function. prototype refer to the same Object, function.prototype. __proto__ refer to object. prototype
    // Function.__proto__ => Function.prototype.__proto__ => Object.prototype => Object.prototype.__proto__ => null
    Function instanceof Object; // true
    // Object as a constructor inherits from function. prototype
    // Object.__proto__ => Function.prototype
    Object instanceof Function; // true
    Prototype; Function. Prototype__proto__ points to object. prototype
    // Object.__proto__ => Function.prototype => Function.prototype.__proto__ => Object.prototype
    Object instanceof Object; // true
    // the Function constructor also inherits from function.prototype
    // Function.__proto__ => Function.prototype
    Function instanceof Function; // true
Copy the code

To sum up: Prototype (the top of the prototype chain), Function. Prototype is derived from Object. Prototype. Function and Object and other constructors derive from function. prototype.

conclusion


  • Object.prototypeIs the underlying browser basisECMAScriptAn object created by the specification.
  • Function.prototypeDirectly inheritedObject.prototypeAgain, it is a function created by the engine, which does not think it needs to be added to this function objectprototypeProperties.Function.prototype.prototypeforundefined.
  • To have a firstObject.prototype(Top of prototype chain),Function.prototypeinheritanceObject.prototypeAnd finally,FunctionObjectAnd other constructorsFunction.prototypeAnd produce.

reference

MDN Object.prototype

MDN Function.prototype

Get a deep understanding of JS objects and prototype chains from __proto__ and Prototype

From the probe into the Function.proto===Function. Prototype procedure

[Advanced 5-3] Further explore the Function & Object egg problem