JavaScript basics: the difference between proto and prototype

1. Introduction

1. proto (__ proto__)

   In similar javalanguage, the concept of inheritance is passed between classes and to achieve, but javascriptthere is no class, it is an object, therefore, in javascript, the concept of inheritance is passed between the object and the object implementation.

   In consideration of javascriptsuccession when the scope is limited to reference data types, reference data types, although divided Function, and Objecttwo kinds, but in matters of inheritance, without distinction Functionand Object, just as objects can be unified.

   __proto__And prototypedifferent, prototype only in Function there, and __proto__then Functionand Objectin both. JavaScript is used __proto__to determine the inheritance relationship.

   javascriptThe essence of inheritance: __proto__Object B pointed to by the properties of an object A. B is the prototype object (or parent object) of A. Object A can use the properties and methods of object B, and can also use the prototype object C of object B. The properties and methods on the above, recursively, are the so-called prototype chain.

   var A = {
         
         name:'前端收割机'}
   var B = {
         
         age:18}
   var c = {
         
         hobby:'摄影'}
   
   A.__proto__ = B;//将B设置为A的父对象
   B.__proto__ = C;//将C设置为B的父对象
   
   console.log(A.name) //前端收割机
   console.log(A.age)  //18
   console.log(A.hobby)//摄影
   

2. prototype

   One __proto__realizes the inheritance problem. That should prototypedo it?

   prototypeWhat role does underway in succession, in fact, prototypethe real work is at the Functiontime as a constructor, because __proto__is not the official standard defined attributes, so help prototypeattribute to mimic the inheritance patterns between class and class.

   When a newfunction is called by a keyword, the constructor is executed, which is responsible for creating an instance object, __proto__pointing the properties of the instance object to the constructor prototypeto implement inheritance prototypeof all the properties and methods of the constructor, thisbinding it to the instance, and then Execute the function body.

   

   From the above figure, we can find the prototype chain of fooobjects and Foofunctions:

   1. fooObject prototype chain

   foo.__proto__ == Foo.prototype;
   foo.__proto__.__proto__ == Foo.prototype.__proto__ == Object.prototype;
   foo.__proto__.__proto__.__proto__ == Foo.prototype.__proto__.__proto__ == Object.prototype.__proto__ == null;
   

   

   2. FooConstructor prototype chain

   Foo.__proto__ == Function.prototype;
   Foo.__proto__.__proto__ == Function.prototype.__proto__;
   Foo.__proto__.__proto__.__proto__ == Function.prototype.__proto__.__proto__ == Object.prototype.__proto__ == null;
   

   

   The constructor Foois not on the prototype chain Foo.prototype, so Foo.prototypethe properties and methods cannot be inherited . fooThe prototype chain of the instance has it Foo.prototype, so it foocan inherit Foo.prototypethe properties and methods.

Second, the role

1. proto (__ proto__):

   • Realize the inheritance between objects and form a prototype chain.
   • Make the child object can use the properties and methods of the parent.

2. prototype:

   • Let the objects instantiated by the constructor find common attributes and methods (ie foo.__proto__ === Foo.prototype).
   • The Javascriptmeans of prototypeproperty to mimic the inheritance patterns between the implementation class and class.

Three, summary

1. proto（和 constructor 属性）是**对象**所独有的；prototypeattribute is a function of unique, because the function is also an object, so also has the function __proto__and constructorproperties.
2. __proto__The function of the attribute is when the attribute of an object is accessed, if the attribute does not exist in the object, it will __proto__search for the object (parent object) pointed to by its attribute, and keep searching until __proto__the end of the attribute null. Make the child object can use the properties and methods of the parent.
3. prototypeProperties of the role is to make the function objects instantiated who can find common properties and methods, the Javascriptmeans of prototypeproperty to mimic the inheritance patterns between the implementation class and class.