JavaScript prototypes and other concepts

Study JavaScript prototype concept two days, after seeing this article, finally dawned, the inside of the figure shows everything! Most of the content is reproduced from: 1.,190,000,005,824,45e,+16 Cut all objects

As everyone knows, JavaScript in the world of objects, traced from a null

"Everything is the object", this sentence is really a good marketing, easy to remember, easy to catchy, impressive.

When all things are born, an null object, born out of thin air, and then Object , Function learning null to shape themselves, and they are married to each other, providing prototype and constructor , one for the offspring of the gene, one to create thousands of children and grandchildren.

In JavaScript, null it also exists as an object, based on the descendants that it inherits, as the genus object. At first glance, it null 's like God, Object and Function Adam and Eve in the JavaScript world.

Prototype pointer __proto__

In JavaScript, each object has a prototype object, and the internal pointer to the prototype object is the one from which __proto__ you can inherit the properties of the prototype object, which is the genetic link in JavaScript, so that you can know the ancestors of this object. From the object, __proto__ you can access the prototype object that he inherits.

var a = new Array();a.__proto__ === Array.prototype // true

In the above code, an instance of an array is created a , and the prototype of the instance points to it Array.prototype .
Array.prototypeitself is an object as well as an inherited prototype:

Object.prototype  // true// 等同于 Array.prototype.__proto__ === Object.prototype

It is clear that the array itself is inherited from object, so who is the prototype of object pointing to?

null  // true// 等同于 Object.prototype.__proto__ === null

So, the object in JavaScript is traced from a null object. Buddha Yue: All things are empty, good and good.

In addition to using the method to .__proto__ access the prototype of an object, you can also use Object.getPrototypeOf methods to get the prototype of the object and Object.setPrototypeOf to override the object's prototype by means of a method.

It is worth noting that, according to the language standard, the __proto__ property only needs to be deployed by the browser, the other environment can not have this attribute, and the front and back of the two underscore that it is essentially an internal property, should not be exposed to the user. As a result, you should use this attribute sparingly, Object.getPrototypeof and use and Object.setPrototypeOf to perform the read and write operations of the prototype object. __proto__attributes are used here to describe the prototype in the object, because it is more visually and easily understandable.

Prototype Object prototype

function as a class citizen in JavaScript, which is both a function and an object, and the prototype of the function is pointing toFunction.prototype

var Foo = function() {}Foo.__proto__ === Function.prototype // true

function instances have properties in addition __proto__ to properties prototype . A new instance object constructed from this function, whose prototype pointer __proto__ points to the function's prototype properties.

var a = new Foo();a.__proto__ === Foo.prototype; // true

The property of a function prototype , by itself, is a Object constructed instance object.

Foo.prototype.__proto__ === Object.prototype; // true

prototypeproperty is special, it also has an implicit constructor , pointing to the constructor itself.

// truea.constructor === Foo; // truea.constructor === Foo.prototype.constructor; // true

Prototype chain

Concept:

The basic idea of the prototype chain as the main method to implement inheritance is to use the prototype to let one reference type inherit the properties and methods of another reference type.
Each constructor has a prototype object ( prototype ), and the prototype object contains a pointer to the constructor ( constructor ), and the instance contains an internal pointer () to the prototype object __proto__ .

So, if we make the prototype object equal to an instance of another type, the prototype object will contain a pointer to another prototype, and a pointer to another constructor is also included in the other prototype. If another prototype is an instance of another type, the above relationship is still true. In this way, the chain of examples and prototypes is constructed, which is the basic concept of the prototype chain.

Meaning: The role of the "prototype chain" is that when reading a property of an object, the JavaScript engine first looks for the properties of the object itself, and if not, to its prototype to find, if it is not found, to the prototype to find. And so on, if the object.prototype is not found until the topmost level, then Undefine is returned.

Paternity test

In JavaScript, there are also ways to identify the relationship between parent and child DNA:

1. The instanceof operator returns a Boolean value that indicates whether an object was created by a constructor.

2. Object.isprototypeof () isprotypeof returns true as long as an object is on the prototype chain

var Bar = function() {}var b = new Bar();b instanceof Bar // trueBar.prototype.isPrototypeOf(b) // trueObject.prototype.isPrototypeOf(Bar) // true

It is important to note that b the prototype of the instance is Bar.prototype notBar

A picture of a long history

This is a description of Object , Function and a function instance, the Foo connection between their prototypes. If you understand the above concept, this picture is not difficult to read.

From there, you can see an interesting place.

1. Function.prototype.__proto__Point Object.prototype to, this explanation Function.prototype is an Object instance, then should be first Object there again Function .

2. But Object.prototype.constructor.__proto__ it's pointing again Function.prototype . In this way, there is no Function , Object nor can I create an instance.

This produces a kind of "first chicken or Egg first" classic question, in the end is first Object or first? Function
So philosophical questions, left to you to think about.

To summarize a sentence:

Object:
Self properties
Constructor Properties (constructor)
Prototypes (__proto__)

Function (construction method):
Self properties
Constructor Properties (constructor)
Prototype Properties (prototype)
Prototypes (__proto__)

Object. prototype (__proto__) = = = function (construction method). Prototype properties (prototype)
Object. constructor Property = = = function (construction method)

JavaScript prototypes and other concepts