Understanding the relationship of scope chains in JavaScript

There's a lot of confusion about the relationship in JavaScript. The scope chain is a one-way chain relationship, which is simple and clear;the invocation relationship of this mechanism is slightly more complex, and the archetype is the triangular relationship of prototype, Proto and constructor. This article first with a picture, and then explain in detail the triangular relationship of the prototype

Concept

A complex relationship in which the source is actually two lines of code

function Foo () {};var f1 = new Foo;

"Constructors"

The function used to initialize the newly created object is the constructor. In the example, the Foo () function is a constructor

"Instance Object"

The object created by the new operation of the constructor is an instance object. You can construct multiple instance objects with one constructor

function Foo () {};var f1 = new Foo;var F2 = new Foo;console.log (f1 = = = F2);//false

"Prototype objects and prototype"

The constructor has a prototype property that points to the prototype object of the instance object. Multiple objects instantiated by the same constructor have the same prototype object. Often use prototype objects to implement inheritance

function Foo () {}; Foo.prototype.a = 1;var f1 = new Foo;var F2 = new Foo;console.log (FOO.PROTOTYPE.A);//1console.log (f1.a);//1console.log ( F2.A);//1

"Constructor"

The prototype object has a constructor property that points to the constructor for the prototype object

function Foo () {};console.log (Foo.prototype.constructor = = = foo);//true

Because instance objects can inherit the properties of a prototype object, the instance object also has the constructor property, which also points to the constructor of the prototype object

function Foo () {};var f1 = new Foo;console.log (F1.constructor = = = Foo);//true

"Proto"

The instance object has a Proto property that points to the prototype object corresponding to the instance object

function Foo () {};var f1 = new Foo;console.log (f1.__proto__ = = = Foo.prototype);//true

Description

The concept is finished, now the diagram of the relationship is described in detail

function Foo () {};var f1 = new Foo;

"Part I: Foo"

The instance object F1 is created by the new operation of the constructor foo (). The prototype object of the constructor foo () is foo.prototype; The instance object F1 also points to the prototype object through the __proto__ property Foo.prototype

function Foo () {};var f1 = new Foo;console.log (F1.__proto = = = Foo.prototype);//true

The instance object F1 itself does not have a constructor property, but it can inherit the constructor property of the prototype object Foo.prototype

function Foo () {};var f1 = new Foo;console.log (Foo.prototype.constructor = = = Foo);//trueconsole.log (F1.constructor = = = Foo);//trueconsole.log (F1.hasownproperty (' constructor '));//false

Is the console effect of the instance object F1 "Part Two: Object" Foo.prototype is the prototype object of F1, and it is also an instance object. In fact, any object can be considered an object instantiated by the new operation of the object () constructor, so foo.prototype as an instance object whose constructor is object () and the prototype object is Object.prototype. Accordingly, the prototype property of the constructor object () points to the prototype object, objects, and the Proto property of the instance object Foo.prototype also points to the prototype object

function Foo () {};var f1 = new Foo;console.log (foo.prototype.__proto__ = = = Object.prototype);//true

The instance object Foo.prototype itself has a constructor property, so it overrides the constructor property inherited from the prototype object Object.prototype

function Foo () {};var f1 = new Foo;console.log (Foo.prototype.constructor = = = Foo);//trueconsole.log ( Object.prototype.constructor = = = Object);//trueconsole.log (Foo.prototype.hasOwnProperty (' constructor '));//true

Is the console effect of the instance object Foo.prototype

If Object.prototype is the instance object, what is the prototype object and the result is null. Privately thought, this may also be one of the reasons why typeof null result is ' object '

Console.log (object.prototype.__proto__ = = = null);//true

"Part III: Function"

As already mentioned, functions are objects, only objects with special functions. Any function can be seen as a result of a new operation instantiated through the function () constructor

If the function foo is treated as an instance object, its constructor is function (), and its prototype object is Function.prototype; Similarly, the constructor of the function object is also functions (), Its prototype object is Function.prototype

function Foo () {};var f1 = new Foo;console.log (foo.__proto__ = = = Function.prototype);//trueconsole.log (object.__proto_ _ = = = Function.prototype);//true

The constructor property of the prototype object Function.prototype points to the constructor function (); the instance object and Foo itself have no constructor property. Need to inherit the constructor property of the prototype object Function.prototype

function Foo () {};var f1 = new Foo;console.log (Function.prototype.constructor = = = function);//trueconsole.log ( Foo.constructor = = = Function);//trueconsole.log (Foo.hasownproperty (' constructor '));//falseconsole.log ( Object.constructor = = = Function);//trueconsole.log (Object.hasownproperty (' constructor '));//false

All functions can be considered as instantiated objects of the new operation of the constructor function (). Then, the function can be seen as the result of the instantiation of the new operation that called itself

So, if function is the instance object, its constructor is function and its prototype object is Function.prototype

Console.log (function.__proto__ = = = Function.prototype);//trueconsole.log (Function.prototype.constructor = = = function);//trueconsole.log (Function.prototype = = function);//true

If Function.prototype is an instance object, what is its prototype object? As before, all objects can be considered as instantiated results of the new operation of the object () constructor. So, the prototype object of Function.prototype is Object.prototype, whose prototype function is Object ()

Console.log (function.prototype.__proto__ = = = Object.prototype);//true

The second section describes that the prototype object of Object.prototype is null

Console.log (object.prototype.__proto__ = = = null);//true

Summarize

The "1" function (function is also the functions) is the result of the new function, so the function can be used as an instance object, its constructor is function (), the prototype object is Function.prototype

The "2" object (the function is also an object) is the result of the new object, so the object can be an instance object whose constructor is object () and the prototype object is Object.prototype

The prototype object for "3" Object.prototype is null

Understanding the relationship of scope chains in JavaScript