How JavaScript's prototype system is built up

Unlike traditional object-oriented languages, which are inherited by classes, there is no traditional "class" in JavaScript, and JavaScript is inherited by constructors. JavaScript constructors are often confused with "classes", just because they assume the same functionality, but they implement inheritance in a completely different way. Class inheritance implements inheritance by generating a copy of a class, and the constructor implements inheritance through a prototype association. The mechanism of class inheritance is "Copy, copy," and the mechanism of prototype inheritance is "reference, association".

First, what is the prototype

All objects in JavaScript, including functions, have an internal pointer [[prototype]] that points to a reference to another object.

If the intrinsic property of object A [[prototype]] points to object B, then B is the prototype of a.

Similarly, object B has an intrinsic property [[[Prototype]], which points to another object c,c also has an intrinsic property [[[prototype]] pointing to another object D ... This is the prototype chain.

The inheritance of JavaScript is based on the prototype chain.

The [[prototype]] attribute is an internal implementation and is inaccessible, but there are also browsers that expose the __proto__ property for accessing prototype objects.

Ii. the nature of the associated inheritance

When a property of an object is called, if the property does not exist in its own property, the JavaScript engine looks up along the object's prototype chain until the first matching property name is found.

This is association inheritance, which is very similar to the working mechanism of a scope chain. The inheritance pattern based on the prototype chain same strain is the fundamental feature of the JavaScript object system.

Prototype properties of functions

All functions (and only functions) have a built-in property, prototype, which points to a reference to another object, also known as a prototype.

This reflects the particularity of the function as a class citizen: the function has an accessible internal attribute prototype, which can explicitly set its prototype object, thus affecting the prototype chain's construction pattern. An object has no prototype property, but has a constructor property that points to its constructor (all JavaScript objects are constructed from functions).

The intrinsic properties of the function prototype and the inner properties of the object must be strictly distinguished [[prototype]]. Prototype inheritance is based on [[prototype]], not prototype.

JavaScript entire object system is built on the basis of the constructor, JavaScript provides nine built-in constructors, and we can also use a custom function as a constructor.

Built-in constructors, whose prototypes are JavaScript-ready, for example:

Object.getownpropertynames (Object.prototype) returns the following results:

["__definegetter__", "__definesetter__", "hasOwnProperty", "__lookupgetter__", "__lookupsetter__", "constructor", " ToString "," tolocalestring "," ValueOf "," isprototypeof "," propertyisenumerable "," __proto__ "]

The prototype object for a custom constructor is a default object that contains only two properties (constructor and __proto__), and the prototype object's [[prototype]] points to object.prototype.

The prototypes of all constructors can be customized, but generally do not modify the built-in constructors.

Iv. How the Association is established

1, the object of the prototype chain

The [[prototype]] of the object is specific to whom, depending on how the object was created.

The object's direct amount of [[prototype]] points to the prototype object is Object.prototype;

var obj = {}; obj.__proto__ = = = Object.prototype//True

An object created by Object.create () whose [[prototype]] attribute points to the object specified by the first parameter;

An object created through a constructor whose [[prototype]] attribute points to the prototype object of the constructor.

2, the function of the prototype chain

The prototype chain of the function is very simple, and all functions of [[prototype]] are pointing to Function.prototype

array.__proto__ = = = Function.prototype//True

function.__proto__ = = = Function.prototype//True

var f = function () {}; f.__proto__ = = = Function.prototype//True

5 , the construction of object system

Based on the above rules, we try to build the JavaScript object system from scratch.

The initial environment of JavaScript provides three purely independent objects (Global&math&json) and nine constructors.

Global is the overall environment, not to mention.

In nine constructors, object is the ancestor of all objects, and the remaining eight constructors are instances of object.

Date instanceof Object//True

......

Both math and JSON are objects, as well as instances of object.

Math.constructor = = = Object//True

Math instanceof Object//True

So the first step in building a JavaScript object system is to create a constructor, object, and the prototype objects Object.prototype.

Then create the remaining eight constructors to point to the [[prototype]] of their prototype object to Object.prototype. Why not point directly to object? Because [[prototype]] can only point to objects, not constructors.

Check:

function.prototype.__proto__ = = = Object.prototype//True

Now the association between the prototype objects has, there is no association between the functions, the function of [[prototype]] all point to function.prototype and then get an initial object system.

      

The custom constructor was created at the same level as the built-in constructor, because the custom constructor's prototype object's [[prototype]] also points to object.prototype, but we can modify the constructor's prototype to change the depth of the prototype chain.

var obj = new Array; obj [[prototype]] points to Array.prototype

var f = function () {}; Create a function as a constructor

F.prototype = obj; Modifying the prototype of a constructor

var o = new F (); Create an instance object of F

So what is the prototype chain of O?

The prototype of object o [[prototype]] points to the prototype object of the constructor F;

The prototype object of the constructor F (that is, object obj) [[prototype]] points to array.prototype;

Array.prototype [[prototype]] points to object.prototype;

This can be done by:

Can detect:

Console.log (o instanceof F); True

Console.log (o instanceof Array); True

Console.log (o instanceof Object); True

Note: Object instanceof Constructor

The instanceof operator is used to detect whether the Constructor.prototype exists on the prototype chain of object.

6 , Daosh in the absence of

All prototype chains converge to the same source, that is, Object.prototype, which is also an object and [[prototype]] property, so object.prototype.__proto__ = = = =? The answer is NULL.

Looks a bit mysterious appearance, is so-called heaven and earth beginning, divide Yin and yang:

Nine constructors are actually nine tails:

　　　As a result, the creator of the fire Shadow has learned JavaScript, and JavaScript creators have learned the book of the Ching.

How JavaScript's prototype system is built up