proto VS prototype in JavaScript

Question

This figure again shows that every object has a prototype  Constructor   function Foo also has its own   proto   which is Function prototype    and which in turn also references via its   proto   property again to   the Object prototype  Thus  repeat  Foo prototype is just an explicit   property of Foo which refers to the prototype of b and c objects    var b   new Foo 20   var c   new Foo 30     What are the differences between   proto   and prototype     The figure was taken from dmitrysoshnikov com

User · Answer

Every function you create has a property called prototype, and it starts off its life as an empty object. This property is of no use until you use this function as constructor function i.e. with the 'new' keyword.

This is often confused with the __proto__ property of an object. Some might get confused and except that the prototype property of an object might get them the proto of an object. But this is not case. prototype is used to get the __proto__ of an object created from a function constructor.

In the above example:

_x000D_

function Person(name){_x000D_
    this.name = name_x000D_
}; _x000D_
_x000D_
var eve = new Person("Eve");_x000D_
_x000D_
console.log(eve.__proto__ == Person.prototype) // true_x000D_
// this is exactly what prototype does, made Person.prototype equal to eve.__proto__

_x000D_

I hope it makes sense.

User · Answer

I ll try a 4th grade explanation   Things are very simple  A prototype is an example of how something should be built  So    I m a function and I build new objects similar to my prototype I m an object and I was built using my   proto   as an example   proof   function Foo        var bar   new Foo        bar  is constructed from how Foo knows to construct objects bar   proto       Foo prototype      gt  true     bar is an instance - it does not know how to create objects bar prototype      gt  undefined

User · Answer

prototype  prototype is a property of a Function  It is the blueprint for creating objects by using that  constructor  function with new keyword     proto      proto   is used in the lookup chain to resolve methods  properties  when an object is created  using constructor function with new keyword     proto   is set to  Constructor  Function prototype  function Robot name        this name   name    var robot   new Robot        the following are true    robot   proto      Robot prototype robot   proto     proto      Object prototype   Here is my  imaginary  explanation to clear the confusion   Imagine there is an imaginary class  blueprint coockie cutter  associated with function  That imaginary class is used to instantiate objects  prototype is the extention mechanism  extention method in C   or Swift Extension  to add things to that imaginary class         function Robot name        this name   name      The above can be imagined as           imaginary class class Robot extends Object       static prototype   Robot class          Robot prototype is the way to add things to Robot class        since Robot extends Object  therefore Robot prototype   proto      Object prototype      var   proto         var name               constructor     function Robot name             this   proto     prototype          prototype   undefined           this name   name              So       var robot   new Robot     robot   proto      Robot prototype robot prototype    undefined robot   proto     proto      Object prototype   Now adding method to the prototype of Robot   Robot prototype move x  y    function x  y   Robot position x   x  Robot position y   y      Robot prototype move x  y      imagining     gt  Robot class move x  y    The above can be imagined as extension of Robot class          Swift way of extention extension Robot      function move x  y               Robot position x   x  Robot position y   y           Which in turn         imaginary class class Robot       static prototype   Robot class    Robot prototype way to extend Robot class     var   proto         var name               constructor     function Robot name             this   proto     prototype          prototype   undefined           this name   name                added by prototype  as like C  extension method      function move x  y            Robot position x   x  Robot position y   y

User · Answer

DEFINITIONS   number inside the parenthesis    is a  link  to the code that is written below   prototype - an object that consists of      functions  3  of this    particular ConstructorFunction prototype 5  that are accessible by each    object  4  created or to-be-created through this constructor function  1      the constructor function itself  1        proto   of this particular object  prototype object     proto    dandor proto   - a link BETWEEN any object  2  created through a particular constructor function  1   AND the prototype object s properties  5  of that constructor THAT allows each created object  2  to have access to the prototype s functions and methods  4     proto   is by default included in every single object in JS   CODE CLARIFICATION  1       function Person  name  age            this name   name          this age   age              2       var John   new Person    John     37          John is an object   3         Person prototype getOlder   function             this age                 getOlder is a key that has a value of the function   4       John getOlder      5       Person prototype

User · Answer

Prototype       Prototype   is an internal hidden property of objects in JS and it is a reference to another object  Every object at the time of creation receives a non-null value for   Prototype    Remember   Get   operation is invoked when we reference a property on an object like  myObject a  If the object itself has a property  a on it then that property will be used  let myObject        a  2     console log myObject a                 2  But if the object itself directly does not have the requested property then   Get   operation will proceed to follow the   Prototype   link of the object  This process will continue until either a matching property name is found or the   Prototype   chain ends at the built-in Object prototype   If no matching property is found then undefined will be returned  Object create specifiedObject  creates an object with the   Prototype   linkage to the specified object  let anotherObject        a  2        create an object linked to anotherObject let myObject  Object create anotherObject   console log myObject a                     2  Both for  in loop and in operator use   Prototype   chain lookup process  So if we use for  in loop to iterate over the properties of an object then all the enumerable properties which can be reached via that object s   Prototype   chain also will be enumerated along with the enumerable properties of the object itself  And when using in operator to test for the existence of a property on an object then in operator will check all the properties via   Prototype   linkage of the object regardless of their enumerability     for  in loop uses   Prototype   chain lookup process let anotherObject        a  2     let myObject  Object create anotherObject    for let k in myObject        console log  quot found   quot    k                 found  a       in operator uses   Prototype   chain lookup process console log  quot a quot  in myObject                   true   prototype    prototype is a property of functions in JS and it refers to an object having constructor property which stores all the properties and methods  of the function object  let foo  function      console log foo prototype              returns  constructor  f  object which now contains all the default properties  foo id   quot Walter White quot    foo job   quot teacher quot    console log foo prototype             returns  constructor  f  object which now contains all the default properties and 2 more properties that we added to the fn object     constructor  f      constructor  f           id   quot Walter White quot          job   quot teacher quot          arguments  null         caller  null         length  0         name   quot foo quot          prototype   constructor  f            proto    f             FunctionLocation    VM789 1           Scopes    Scopes 2        proto    Object      But normal objects in JS does not have  prototype property  We know Object prototype is the root object of all the objects in JS  So clearly Object is a function i e  typeof Object      quot function quot    That means we also can create object from the Object function like  let myObj  new Object     Similarly Array  Function are also functions so we can use Array prototype  Function prototype to store all the generic properties of arrays and functions  So we can say JS is built on functions     prototype                                SyntaxError  Unexpected token       function      prototype                     constructor  f   Also using new operator if we create objects from a function then internal hidden   Prototype   property of those newly created objects will point to the object referenced by the  prototype property of the original function  In the below code  we have created an object  a from a fn  Letter and added 2 properties one to the fn object and another to the prototype object of the fn  Now if we try to access both of the properties on the newly created object  a then we only will be able to access the property added to the prototype object of the function  This is because the prototype object of the function is now on the   Prototype   chain of the newly created object  a  let Letter  function      let a  new Letter     Letter from   quot Albuquerque quot    Letter prototype to   quot New Hampshire quot    console log a from                     undefined  console log a to                       New Hampshire     proto       proto   is a property of objects in JS and it references the another object in the   Prototype   chain  We know   Prototype   is an internal hidden property of objects in JS and it references another object in the   Prototype   chain  We can get or set the object referred by the internal   Prototype   property in 2 ways  Object getPrototypeOf obj    Object setPrototypeOf obj   obj   proto     We can traverse the   Prototype   chain using      proto     proto        Along with  constructor   toString      isPrototypeOf    our dunder proto property    proto    actually exists on the built-in Object prototype root object  but available on any particular object  Our    proto   is actually a getter setter  Implementation of    proto   in Object prototype is as below   Object defineProperty Object prototype   quot   proto   quot         get  function             return Object getPrototypeOf this              set  function o            Object setPrototypeOf this  o           return o             To retrieve the value of obj   proto   is like calling  obj   proto     which actually returns the calling of the getter fn  Object getPrototypeOf obj  which exists on Object prototype object  Although    proto   is a settable property but we should not change   Prototype   of an already existing object because of performance issues  Using new operator if we create objects from a function then internal hidden   Prototype   property of those newly created objects will point to the object referenced by the  prototype property of the original function   Using    proto   property we can access the other object referenced by internal hidden   Prototype   property of the object  But   proto   is not the same as   Prototype   rather a getter setter for it  Consider below code   let Letter  function       let a  new Letter     let b  new Letter     let z  new Letter        output in console a   proto       Letter prototype                   true  b   proto       Letter prototype                   true  z   proto       Letter prototype                   true  Letter   proto       Function prototype            true  Function prototype   proto       Object prototype            true  Letter prototype   proto       Object prototype              true

User · Answer

Summary   The   proto   property of an object is a property that maps to the prototype of the constructor function of the object  In other words   instance   proto       constructor prototype    true  This is used to form the prototype chain of an object  The prototype chain is a lookup mechanism for properties on an object  If an object s property is accessed  JavaScript will first look on the object itself  If the property isn t found there  it will climb all the way up to protochain until it is found  or not   Example    x000D   x000D  function Person  name  city    x000D    this name   name  x000D    x000D   x000D  Person prototype age   25  x000D   x000D  const willem   new Person  Willem    x000D   x000D  console log willem   proto       Person prototype      the   proto   property on the instance refers to the prototype of the constructor x000D   x000D  console log willem age      25 doesn t find it at willem object but is present at prototype x000D  console log willem   proto   age      now we are directly accessing the prototype of the Person function  x000D   x000D   x000D    Our first log results to true  this is because as mentioned the   proto   property of the instance created by the constructor refers to the prototype property of the constructor  Remember  in JavaScript  functions are also Objects  Objects can have properties  and a default property of any function is one property named prototype   Then  when this function is utilized as a constructor function  the object instantiated from it will receive a property called   proto    And this   proto   property refers to the prototype property of the constructor function  which by default every function has    Why is this useful   JavaScript has a mechanism when looking up properties on Objects which is called  prototypal inheritance   here is what it basically does    First  it s checked if the property is located on the Object itself  If so  this property is returned  If the property is not located on the object itself  it will  climb up the protochain   It basically looks at the object referred to by the   proto   property  There  it checks if the property is available on the object referred to by   proto    If the property isn t located on the   proto   object  it will climb up the   proto   chain  all the way up to Object object  If it cannot find the property anywhere on the object and its prototype chain  it will return undefined    For example    x000D   x000D  function Person  name    x000D    this name   name  x000D    x000D   x000D  let mySelf   new Person  Willem    x000D   x000D  console log mySelf   proto       Person prototype   x000D   x000D  console log mySelf   proto     proto       Object prototype   x000D   x000D   x000D

User · Answer

In JavaScript  a function can be used as a constructor  That means we can create objects out of them using the new keyword  Every constructor function comes with a built-in object chained with them  This built-in object is called a prototype  Instances of a constructor function use   proto   to access the prototype property of its constructor function      First we created a constructor  function Foo      To be clear  Foo is just another function  But we can create an object from it with the new keyword  That s why we call it the constructor function Every function has a unique property which is called the prototype property  So  Constructor function Foo has a prototype property which points to its prototype  which is Foo prototype  see image   Constructor functions are themselves a function which is an instance of a system constructor called the   Function   constructor  So we can say that function Foo is constructed by a   Function   constructor  So    proto   of our Foo function will point to the prototype of its constructor  which is Function prototype  Function prototype is itself is nothing but an object which is constructed from another system constructor called   Object    So    Object   is the constructor of Function prototype  So  we can say Function prototype is an instance of   Object    So   proto   of Function prototype points to Object prototype  Object prototype is the last man standing in the prototype chain  I mean it has not been constructed  It s already there in the system  So its   proto   points to null  Now we come to instances of Foo  When we create an instance using new Foo    it creates a new object which is an instance of Foo  That means Foo is the constructor of these instances  Here we created two instances  x and y     proto   of x and y thus points to Foo prototype

User · Answer

THIS IS THE BEST EXPLANATION IN THE WORLD        var q      var prototype    prop  11   q prop    undefined q   proto     prototype q prop    11   in function constructors javascript engine call this q   proto     prototype automatically  when we write new Class  and in to the   proto   prop set Class prototype  function Class     Class prototype    prop  999     set prototype as we need  before call new  var q   new Class      q   proto     Class prototype q prop    999   Enjoy

User · Answer

Prototype or Object prototype is a property of an object literal  It represents the Object prototype object which you can override to add more properties or methods further along the prototype chain      proto   is an accessor property  get and set function  that exposes the internal prototype of an object thru which it is accessed   References    https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Object prototype http   www w3schools com js js object prototypes asp https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Object proto

User · Answer

This is a very important question relevant to anyone who wants to understand prototypical inheritance  From what I understand  prototype is assigned by default when an object is created with new from a function because Function has prototype object by definition   function protofoo      var protofoo1   new protofoo    console log protofoo prototype toString        object Object    When we create an ordinary object without new  ie explicitly from a function  it doesn t have prototype but it has an empty proto which can be assigned a prototype   var foo     check  10    console log foo   proto        empty console log bar prototype       TypeError foo   proto     protofoo1     assigned console log foo   proto       protofoo   We can use Object create to link an object explicitly      we can create  bar  and link it to  foo  var bar   Object create  foo    bar fooprops   We checking prototypes   console log bar   proto         foo  console log bar fooprops       We checking prototypes  console log bar check      10 is delegated to  foo

User · Answer

Prototype property is created when a function is declared    For instance    function Person dob       this dob   dob        Person prototype property is created internally once you declare above function  Many properties can be added to the Person prototype which are shared by Person instances created using new Person        adds a new method age to the Person prototype Object  Person prototype age   function   return date-dob      It is worth noting that Person prototype is an Object literal by default  it can be changed as required     Every instance created using new Person   has a   proto   property which points to the Person prototype  This is the chain that is used to traverse to find a property of a particular object    var person1   new Person somedate   var person2   new Person somedate     creates 2 instances of Person  these 2 objects can call age method of Person prototype as person1 age  person2 age   In the above picture from your question  you can see that Foo is a Function Object and therefore it has a   proto   link to the Function prototype which in turn is an instance of Object and has a   proto   link to Object prototype  The proto link ends here with   proto   in the Object prototype pointing to null   Any object can have access to all the properties in its proto chain as linked by   proto     thus forming the basis for prototypal inheritance     proto   is not a standard way of accessing the prototype chain  the standard but similar approach is to use Object getPrototypeOf obj    Below code for instanceof operator gives a better understanding   object instanceof Class operator returns true when an object is an instance of a Class  more specifically if Class prototype is found in the proto chain of that object then the object is an instance of that Class   function instanceOf Func     var obj   this    while obj     null       if Object getPrototypeOf obj      Func prototype        return true      obj   Object getPrototypeOf obj         return false            The above method can be called as  instanceOf call object  Class  which return true if object is instance of Class

User · Answer

I ve made for myself a small drawing that represents the following code snippet   var Cat   function      var tom   new Cat       I have a classical OO background  so it was helpful to represent the hierarchy in this manner  To help you read this diagram  treat the rectangles in the image as JavaScript objects  And yes  functions are also objects      Objects in JavaScript have properties and   proto   is just one of them    The idea behind this property is to point to the ancestor object in the  inheritance  hierarchy    The root object in JavaScript is Object prototype and all other objects are descendants of this one  The   proto   property of the root object is null  which represents the end of inheritance chain   You ll notice that prototype is a property of functions  Cat is a function  but also Function and Object are  native  functions  tom is not a function  thus it does not have this property   The idea behind this property is to point to an object which will be used in the construction  i e  when you call the new operator on that function      Note that prototype objects  yellow rectangles  have another property called   constructor which points back to the respective function object  For   brevity reasons this was not depicted    Indeed  when we create the tom object with new Cat    the created object will have the   proto   property set to the prototype object of the constructor function   In the end  let us play with this diagram a bit  The following statements are true    tom   proto   property points to the same object as Cat prototype  Cat   proto   points to the Function prototype object  just like Function   proto   and Object   proto   do  Cat prototype   proto   and tom   proto     proto   point to the same object and that is Object prototype    Cheers

User · Answer

prototype is a property of a Function object  It is the prototype of objects constructed by that function     proto   is internal property of an object  pointing to its prototype  Current standards provide an equivalent Object getPrototypeOf O  method  though de facto standard   proto   is quicker   You can find instanceof relationships by comparing a function s prototype to an object s   proto   chain  and you can break these relationships by changing prototype   function Point x  y        this x   x      this y   y     var myPoint   new Point        the following are all true myPoint   proto      Point prototype myPoint   proto     proto      Object prototype myPoint instanceof Point  myPoint instanceof Object    Here Point is a constructor function  it builds an object  data structure  procedurally  myPoint is an object constructed by Point   so Point prototype gets saved to myPoint   proto   at that time

User · Answer

As this rightly stated       proto   is the actual object that is used in the lookup chain to   resolve methods  etc   prototype is the object that is used to build     proto   when you create an object with new     new Foo     proto       Foo prototype    new Foo   prototype     undefined     We can further note that   proto   property of an object created using function constructor points towards the memory location pointed towards by prototype property of that respective constructor    If we change the memory location of prototype of constructor function    proto   of derived object will still continue to point towards the original address space  Therefore to make common property available down the inheritance chain  always append property to constructor function prototype  instead of re-initializing it  which would change its memory address    Consider the following example   function Human        this speed   25     var himansh   new Human     Human prototype showSpeed   function        return this speed     himansh   proto       Human prototype     true himansh showSpeed         25    now re-initialzing the Human prototype aka changing its memory location Human prototype    lhs  2  rhs 3     himansh   proto   will still continue to point towards the same original memory location    himansh   proto       Human prototype     false himansh showSpeed         25

User · Answer

Another good way to understand it   var foo           foo constructor is Object  so foo constructor prototype is actually  Object prototype  Object prototype in return is what foo   proto   links to      console log foo constructor prototype     foo   proto        this proves what the above comment proclaims  Both statements evaluate to true  console log foo   proto       Object prototype   console log foo constructor prototype     Object prototype     Only after IE11   proto   is supported  Before that version  such as IE9  you could use the constructor to get the   proto

User · Answer

What about using   proto   for static methods   function Foo name     this name   name   Foo   proto   collection push this    Foo   proto   count       Foo   proto   count 0 Foo   proto   collection     var bar   new Foo  bar   var baz   new Foo  baz    Foo count   2 Foo collection                   bar count    undefined

User · Answer

I know  I am late but let me try to simplify it  Let us say there is a function     function Foo message             this message   message                  console log Foo prototype    Foo function will have a prototype object linked  So Whenever we create a function in JavaScript  it always has a prototype object linked to it  Now let us go ahead and create two objects using the function Foo      var a   new Foo  quot a quot        var b   new Foo  quot b quot        console log a message       console log b message     Now we have two objects  object a and object b  Both are created using constructor Foo  Keep in mind constructor is just a word here  Object a and b both have a copy of message property  These two objects a and b are linked to prototype object of constructor Foo  On objects a and b  we can access Foo prototype using   proto   property in all browsers and in IE we can use Object getPrototypeOf a  or Object getPrototypeOf b   Now  Foo prototype  a   proto    and b   proto    all denotes same object      b   proto       Object getPrototypeOf a       a   proto        Foo prototype      a constructor prototype      a   proto     all of above would return true  As we know  in JavaScript properties can be added dynamically  We can add property to object     Foo prototype Greet   function              console log this message             a Greet     a     b Greet     b     a constructor prototype Greet     undefined   As you see we added Greet   method in Foo prototype but it is accessible in a and b or any other object which is constructed using Foo  While executing a Greet    JavaScript will first search Greet in object a on property list  On not finding   it will go up in   proto   chain of a  Since a   proto   and Foo prototype is same object  JavaScript will find Greet   method and execute it  I hope  now prototype and   proto    is simplified a bit

User · Answer

I happen to be learning prototype from You Don t Know JS  this  amp  Object Prototypes  which is a wonderful book to understand the design underneath and clarify so many misconceptions  that s why I m trying to avoid using inheritance and things like instanceof     But I have the same question as people asked here  Several answers are really helpful and enlightening  I d also love to share my understandings      What is a prototype   Objects in JavaScript have an internal property  denoted in the specification as  Prototype    which is simply a reference to another object  Almost all objects are given a non-nullvalue for this property  at the time of their creation   How to get an object s prototype   via   proto  or Object getPrototypeOf  var a     name   wendi     a   proto       Object prototype    true Object getPrototypeOf a      Object prototype    true  function Foo       var b   new Foo    b   proto       Foo prototype b   proto     proto       Object prototype   What is the prototype    prototype is an object automatically created as a special property of a function  which is used to establish the delegation  inheritance  chain  aka prototype chain   When we create a function a  prototype is automatically created as a special property on a and saves the function code on as the constructor on prototype   function Foo       Foo prototype    Object  constructor  function  Foo prototype constructor     Foo    true   I d love to consider this property as the place to store the properties  including methods  of a function object  That s also the reason why utility functions in JS are defined like Array prototype forEach     Function prototype bind    Object prototype toString     Why to emphasize the property of a function      prototype    undefined   function      prototype    Object  constructor  function      The example above shows object does not have the prototype property     But we have Object prototype  which implies an interesting fact that typeof Object      function  var obj   new Object      So  Arary  Function  Objectare all functions  I should admit that this refreshes my impression on JS  I know functions are first-class citizen in JS but it seems that it is built on functions   What s the difference between   proto   and prototype     proto  a reference works on every object to refer to its   Prototype  property   prototype is an object automatically created as a special property of a function  which is used to store the properties  including methods  of a function object   With these two  we could mentally map out the prototype chain  Like this picture illustrates     function Foo      var b   new Foo     b   proto       Foo prototype    true Foo   proto       Function prototype    true Function prototype   proto       Object prototype    true

User · Answer

use strict  function A      var a   new A    class B extends A    var b   new B    console log                    console log B   proto       A      true console log B prototype   proto       A prototype      true console log b   proto       B prototype      true console log a   proto       A prototype      true console log A   proto       Function   proto        true console log Object   proto       Function   proto        true console log Object prototype     Function   proto     proto        true console log Object prototype   proto       null      true   In JavaScript  Every object function is object too   has a   proto   property  the property is reference to its prototype   When we use the new operator with a constructor to create a new object  the new object s   proto   property will be set with constructor s prototype property  then the constructor will be call by the new object  in that process  this  will be a reference to the new object in the constructor scope  finally return the new object   Constructor s prototype is   proto   property  Constructor s prototype property is work with the new operator   Constructor must be a function  but function not always is constructor even if it has prototype property   Prototype chain actually is object s   proto   property to reference its prototype  and the prototype s   proto   property to reference the prototype s prototype  and so on  until to reference Object s prototype s   proto   property which is reference to null   For example   console log a constructor     A      true     a  don t have constructor     so it reference to A prototype by its     proto     property     and found constructor is reference to A     Prototype   and   proto   property actually is same thing   We can use Object s getPrototypeOf method to get something s prototype   console log Object getPrototypeOf a      a   proto        true   Any function we written can be use to create an object with the new operator  so anyone of those functions can be a constructor

User · Answer

Prototype VS    proto   VS    Prototype    When creating a function  a property object called prototype is being created automatically  you didn t create it yourself  and is being attached to the function object  the constructor   Note  This new prototype object also points to  or has an internal-private link to  the native JavaScript Object   Example   function Foo          this name    John Doe         Foo has an object property called prototype     prototype was created automatically when we declared the function Foo  Foo hasOwnProperty  prototype       true     Now  we can assign properties and methods to it  Foo prototype myName   function          return  My name is     this name      If you create a new object out of Foo using the new keyword  you are basically creating  among other things  a new object that has an internal or private link to the function Foo s prototype we discussed earlier   var b   new Foo     b   Prototype       Foo prototype     true    The private linkage to that function s object called double brackets prototype or just   Prototype    Many browsers are providing us a public linkage to it that called   proto     To be more specific    proto   is actually a getter function that belong to the native JavaScript Object  It returns the internal-private prototype linkage of whatever the this binding is  returns the   Prototype   of b    b   proto       Foo prototype    true   It is worth noting that starting of ECMAScript5  you can also use the getPrototypeOf method to get the internal private linkage   Object getPrototypeOf b      b   proto      true    NOTE  this answer doesn t intend to cover the whole process of creating new objects or new constructors  but to help better understand what is   proto    prototype and   Prototype   and how it works

User · Answer

To put it simply    gt  var a   1 undefined  gt  a   proto    Number  0   gt  Number prototype  Number  0   gt  Number prototype     a   proto   true   This allows you to attach properties to X prototype AFTER objects of type X has been instantiated  and they will still get access to those new properties through the   proto   reference which the Javascript-engine uses to walk up the prototype chain

User · Answer

Explanatory example    function Dog     Dog prototype bark    woof   let myPuppie   new Dog     now  myPupppie has   proto   property which points to Dog prototype    gt  myPuppie   proto    gt  gt   bark   woof   constructor        but myPuppie does NOT have a prototype property    gt  myPuppie prototype  gt  gt  undefined   So    proto   of mypuppie is the reference to the  prototype property of constructor function that was used to instantiate this object  and the current myPuppie object has  delegates to  relationship to this   proto   object   while  prototype property of myPuppie is simply absent  since we did not set it    Good explanation by MPJ here  proto vs prototype - Object Creation in JavaScript

User · Answer

To explain let us create a function   function a  name      this name   name       When JavaScript executes this code  it adds prototype property to a  prototype property is an object with two properties to it    constructor   proto     So when we do  a prototype it returns        constructor  a     function definition       proto    Object   Now as you can see constructor is nothing but the function a itself and   proto   points to the root level Object of JavaScript   Let us see what happens when we use a function with new key word   var b   new a   JavaScript      When JavaScript executes this code it does 4 things    It creates a new object  an empty object       It creates   proto   on b and makes it point to a prototype so b   proto       a prototype It executes a prototype constructor  which is definition of function a   with the newly created object  created in step 1  as its context  this   hence the name property passed as  JavaScript   which is added to this  gets added to newly created object  It returns newly created object in  created in step 1  so var b gets assigned to newly created object    Now if we add a prototype car    BMW  and do  b car  the output  BMW  appears   this is because when JavaScript executed this code it searched for car property on b  it did not find then JavaScript used b   proto    which was made to point to  a prototype  in step 2  and finds car property so return  BMW

User · Answer

To make it a little bit clear in addition to above great answers   function Person name       this name   name       var eve   new Person  Eve     eve   proto      Person prototype   true  eve prototype    undefined   Instances have   proto    classes have prototype

User · Answer

proto   is the actual object that is used in the lookup chain to resolve methods  etc   prototype is the object that is used to build   proto   when you create an object with new     new Foo     proto       Foo prototype    new Foo   prototype     undefined

User · Answer

There is only one object that is used for protypal chaining  This object obviously has a name and a value    proto   is its name  and prototype is its value  That s all   to make it even easier to grasp  look at the diagram on the top of this post  Diagram by dmitry soshnikov   you ll never find   proto   points to something else other than prototype as its value   The gist is this    proto   is the name that references the prototypal object  and prototype is the actual prototypal object   It s like saying   let x    name   john      x is the object name  pointer   and  name   john   is the actual object  data value    NOTE  this just a massively simplified hint on how they are related on a high level   Update  Here is a simple concrete javascript example for better illustration   let x   new String  testing      Or any other javascript object you want to create  Object getPrototypeOf x      x   proto       true   This means that when Object getPrototypeOf x  gets us the actual value of x  which is its prototype   is exactly what the   proto   of x is pointing to  Therefore   proto   is indeed pointing to the prototype of x  Thus   proto   references x  pointer of x   and prototype is the value of x  its prototype    I hope it s a bit clear now

User · Answer

proto   is the base to construct prototype and a constructor function eg  function human     has prototype which is shared via   proto   in the new instance of the constructor function  A more detailed read here

User · Answer

x000D   x000D   function     x000D        let a   function   console log this b    x000D        a prototype b   1  x000D        a   proto   b   2  x000D        let q   new a    x000D        console log a b   x000D        console log q b   x000D           x000D   x000D   x000D    Try this code to understand

User · Answer

my understanding is    proto   and prototype are all served for the prototype chain technique   the difference is functions named with underscore like   proto    are not aim for developers invoked explicitly at all  in other words  they are just for some mechanisms like inherit etc  they are  back-end   but functions named without underscore are designed for invoked explicitly  they are  front-end

User · Answer

A nice way to think of it is    prototype is used by constructor functions  It should ve really been called something like   quot prototypeToInstall quot   since that s what it is  and   proto   is that  quot installed prototype quot  on an object  that was created installed upon the object from said constructor   function

[javascript] proto VS. prototype in JavaScript

Examples related to javascript

Examples related to prototype

Examples related to javascript-objects

Examples related to prototypal-inheritance

[javascript] __proto__ VS. prototype in JavaScript

Examples related to javascript

Examples related to prototype

Examples related to javascript-objects

Examples related to prototypal-inheritance

[javascript] proto VS. prototype in JavaScript