Graphical JavaScript prototype chain

This paper attempts to expound the concepts of JS Zhongyuan type (prototype) and prototype chain (prototype chain) and their action mechanism. The previous article (graphical JavaScript context and scope) introduced the concept of variable scope in JS, in fact, one of the core questions is: "What variables the JS interpreter can get when executing the current line of code", and the prototype and prototype chain is actually about this problem. We know that everything is object in JS, but there is no class in JS, and JS is an object-oriented (OOP) programming paradigm based on prototype (prototype-based). But not all objects have the prototype attribute:

var a = {}; Console.log (A.prototype); = = undefined var b = function () {}; Console.log (B.prototype); = = {} var c = ' Hello '; Console.log (C.prototype); = undefined

Prototype is the property that comes with each function definition, but the function itself is also an object in JS, let's take a look at the difference between the following concepts:

The 1.function, function, object, and {} functions are a keyword for JS, which defines the variables of the function type in two grammatical forms:

Function F1 () {     Console.log (' This is function f1! ');} typeof (F1);//=> ' function ' var F2 = function () {     

　　If you define a function with a more object-oriented approach, you can use functions:

 1  var  F3 = new  Function ("Console.log (' This is function f3! ');" );  2  F3 (); // => ' This is function f3! '  3  typeof  (F3); // => ' function '  4  typeof  (Function); // => ' function '  

 1  var  O1 = new   Object ();  2  typeof  (O1); // => ' object '  3  var  O2 =  {};  4  typeof  (O2); // => ' object '  5  typeof  (Object); // => ' function '  

2.prototype VS __proto__ Clear the above concepts and then look at prototype:
prototype and length are the two attributes of each function type, and other non-function types are not (as explained in the beginning example), which is easier to ignore or misunderstand because all types of constructors are functions themselves. So they bring their own prototype properties:
1 // Node 2 console.log (Object.prototype); // = = {} console.log (Function.prototype);//=> [Function:empty] Console.log (string.prototype);//=> [String : ']

In addition to Prototype, all objects in JS (except for special cases such as undefined, null, and so on) have a built-in [[Prototype]] property that points to the Prototype of its parent class, This built-in property does not give explicit access to the ECMA standard, but many JS implementations (such as node, most browsers, and so on) provide a __proto__ attribute to refer to this [[Prototype]], and we use the following example to illustrate the __proto in the instance How __ is pointing to the prototype of the constructor:

1 varperson =function(){};2Person.prototype.type = ' person '; 3Person.prototype.maxAge = 100; 4 varp =NewPerson ();5 Console.log (p.maxage);6P.name = ' rainy '; 7Person.prototype.constructor = = = person;//= True8p.__proto__ = = = Person.prototype;//= = True Console.log (p.prototype);//=> undefined

 

This paper attempts to expound the concepts of JS Zhongyuan type (prototype) and prototype chain (prototype chain) and their action mechanism. The previous article (graphical JavaScript context and scope) introduced the concept of variable scope in JS, in fact, one of the core questions is: "What variables the JS interpreter can get when executing the current line of code", and the prototype and prototype chain is actually about this problem. We know that everything is object in JS, but there is no class in JS, and JS is an object-oriented (OOP) programming paradigm based on prototype (prototype-based). But not all objects have the prototype attribute: var a = {}; Console.log (A.prototype); = = undefined var b = function () {}; Console.log (B.prototype); = = {} var c = ' Hello '; Console.log (C.prototype); = = Undefined prototype is the property that comes with each function definition, but the function itself is an object in JS, let's take a look at the differences between the following concepts: 1.function, function, object, and { The function is a keyword of JS, which defines the variables of the type of the functions, in two grammatical forms: function F1 () {Console.log (' This is function f1! ');} typeof (F1); = = ' function ' var F2 = function () {Console.log (' This is function f2! ');} typeof (F2); = ' function ' If the function is defined in a more object-oriented way, you can use Function:var F3 = new Function ("Console.log (' This is function f3! ');"); F3 (); = = ' This is function f3! ' typeof (F3); = ' function ' typeof (function); = = ' function ' is actually a class used to construct a variable of a function type, or a constructor for an instance of a function type (cOnstructor); A similar object or string, number, etc., is a constructor of the JS built-in type instance. The exception is object, which is used to generate the object type in the abbreviated form {}: var O1 = new Object (); typeof (O1); = = ' object ' var O2 = {}; typeof (O2); = = ' object ' typeof (object); = ' function ' 2.prototype VS __proto__ clear the above concept and see Prototype:each function has both properties:length and prototype Prototype and length are the two attributes of each function type, and other non-function types are not (as explained in the beginning example), which is easier to ignore or misunderstand because all types of constructors themselves are functions, so they have their own prototype properties: Node Console.log (Object.prototype); = = {} console.log (Function.prototype);//=> [Function:empty] Console.log (string.prototype); = = [String: '] In addition to Prototype, all objects in JS (except special cases such as undefined, null, and so on) have a built-in [[Prototype]] property that points to the Prototype of its parent class, This built-in property does not give explicit access to the ECMA standard, but many JS implementations (such as node, most browsers, and so on) provide a __proto__ attribute to refer to this [[Prototype]], and we use the following example to illustrate the __proto in the instance How __ refers to the prototype of the constructor: var person = function () {}; Person.prototype.type = ' person '; Person.prototype.maxAge = 100; var p = new person (); Console.log (P.maxage); P.name = ' rainy '; Person.prototype.constructor = = = person; = = True p.__proto__ = = = Person.prototype; = = True Console.log (p.prototype); = = Undefined The above code example can be interpreted as: the person is a variable of a function type, so comes with the prototype property, and the constructor in the prototype attribute points to the person itself An instance of the person class generated by the New keyword P1, which points to the person's prototype through the __proto__ property. The __proto__ here is just to illustrate the association that exists between the parent class when the instance P1 is implemented internally (to the prototype of the parent class), and the instance can be passed directly during the actual operation. Gets the attributes in the parent class prototype, which implements the inherited functionality. 3. Prototype chain clear the concept and relationship between prototype and __proto__ we will have a more profound understanding of the phrase "everything in JS". And then we think that since __proto__ is (almost) a built-in property of all objects and points to the prototype of the parent class, does that mean we can "go upstream" and find the source? Let's take a look at the following example://Node var Obj = function () {}; var o = new OBJ (); o.__proto__ = = = Obj.prototype; = = True O.__proto__.constructor = = = OBJ; = = True obj.__proto__ = = = Function.prototype; = = True Obj.__proto__.constructor = = = Function; = = True function.__proto__ = = = Function.prototype; = = True object.__proto__ = = = Object.prototype; = = False object.__proto__ = = = Function.prototype; = = True Function.__proto__.constructor = = = Function;//=> true function.__proto__.__proto__; = = {} FUNCTION.__PRoto__.__proto__ = = = o.__proto__.__proto__; = = True o.__proto__.__proto__.__proto__ = = = NULL; + True from the examples and plots above, the prototype object also has the __proto__ property, which is traced up to null. The function of the new keyword is to complete the connection between the example shown and the parent prototype, and create a new object; the role of the INSTANCEOF keyword can also be seen, in fact, is to judge __proto__ (and __proto__.__proto__ ... ) refers to whether the parent class is prototyped: var Obj = function () {}; var o = new OBJ (); o instanceof Obj; = = True o instanceof Object; = = True o instanceof Function; = = False o.__proto__ = = = Obj.prototype; = = True o.__proto__.__proto__ = = = Object.prototype; = = True o.__proto__.__proto__ = = = Function; = False reference JavaScript constructors, prototypes, and the New keyword JavaScript Object-oriented programming Professional JavaScript for We B developers rainy.im Source: http://blog.rainy.im/2015/07/20/prototype-chain-in-js/
It program Lion
Links: http://www.imooc.com/article/3654
Source: MU-Class network

Graphical JavaScript prototype chain