Graphical JavaScript prototypes and prototype chains

Basic understanding

JavaScript objects can be divided into two categories:

1. ordinary objects, except for objects other than the function object, are instances of the new function object () , the normal object is not prototype, and there is no inheritance and the prototype chain is said.

2. function Objects , including two kinds:

• Functions created by Function:

      function f1() {    } // 匿名函数    var f2 = function() {    }    var f3 = new Function(‘x‘,‘console.log(x)‘);    // 以上都是函数对象

• function objects built into the system:

Function,Object, Array,string,number

Go to the Chase

Explains the complex relationships of __proto__, prototype object prototype, and constructor constructor, as explained below.

Explain the meaning of each object

• function foo () is the Foo class

function Foo() {    this.name = ‘xxx‘;    ...} // 构造函数Foo.prototype.sayName = function() {    console.log(this.name);} // 原型对象

• The function object (), which is the JS built-in object, is inherited from object in JavaScript. This is represented by function xxx () because the source code of the object is constructed, that is, object is also a similar function.

• function function () is the JS built-in object function.

• F1,f2 an Instance object that represents Foo

• O1,o2 instance object that represents object

• Xxx.prototype represents the prototype object of XXX

Prototype and prototype chain prototype 1) prototype

That is, the prototype object, only the function object has the prototype attribute, its main function is inherits, passes the attribute and the method which defines in it to ' the descendant ' (for example instantiates).

2) __proto__

Each object has a __proto__ property, and its primary function is to store inherited methods and properties.

3) How to inherit

Take F1 as an example, the process of inheritance can be expressed as, that f1.__proto__ = Foo.prototype is 对象.__proto__ = 构造器.prototype , the above figure can be fully referenced by this formula to understand.

Prototype chain 1) F1 the prototype chain.

1. F1 is an ordinary object, its constructor is Foo, and Foo is the prototype, the first chain of the prototype chain is f1.__proto__ == Foo.prototype ;

2. Foo.prototype (Note that this is not foo) is a JSON object, the ordinary object, the constructor is object, the second chain of the prototype chain is derived from the object as the prototype Foo.prototype.__proto__ == Object.prototype ;

3. Object.prototype is a null prototype, the third chain of the prototype chain is Object.prototype.__proto__ == null ;

F1 's prototype chain can be represented graphically:

Validation can be printed in the browser console:

2) Foo's prototype chain

1. Foo is a function object, its constructor is functions, the function is the prototype, the first chain of the prototype chain is Foo.__proto__ == Function.prototype ;

2. Function.prototype is a JSON object, that is, the ordinary object, the constructor is object, the object is the prototype, the second chain of the prototype chain is Function.prototype.__proto__ == Object.prototype ;

3. Finally, the Object.prototype is a null prototype, and the third chain of the prototype chain is Object.prototype.__proto__ == null ;

The prototype chain of Foo can be graphically represented as:

Validation can be printed in the browser console:

3) Summary

The purpose of listing two prototype chains is to:

When the JS engine executes the object's properties or methods, it finds out whether the method exists on the object itself, and if it does not exist, it is found on the prototype chain. Thus F1 has a prototype method of Foo, object, and Foo has a prototype method of function and object. Note that although the F1 prototype chain has a chain that relates to the function object Foo, F1 does not have a function-prototype method because the prototype chain does not extend to function.

Bind is the prototype method of function, and F1 does not have it.

Summarize

How to find the prototype chain of an object that only takes two steps

1. Determines whether an object is a normal object or a function object, drawing the object's constructor

2. object. Proto = constructor. prototype

On the top of the graph, only the special relationship of object and function and the constructor constructor did not say, if there is unclear and the wrong place, please help me to point out, I also with you in the study, please light spray (ˇ?ˇ)

Graphical JavaScript prototypes and prototype chains