prototype of function in JS?

javascript prototype explained
javascript prototype inheritance
javascript prototype vs class
inheritance in javascript
javascript constructor
javascript prototype constructor
closure in javascript
javascript object

See the code:

function A(){
    
}
var x = new A();
console.log(x.attr);  // undefined
A.prototype.attr = 1; 
console.log(x.attr); // 1

Confusion is caused by prototypical inheritance. x in itself doesn't have a property attr. Which can be verified by running the following:

x.hasOwnProperty('attr')

This will return false.

However x.attr references the attr property assigned to A.prototype.

To see that try to console log

x.__proto__

attr property will be visible there.

JavaScript Prototypes, is a weird, so the constructor is the class/function/constructor itself. When a function is created in JavaScript, the JavaScript engine adds a prototype property to the function. This prototype property is an object (called as prototype object) which has a constructor property by default. The constructor property points back to the function on which prototype object is a property.

No. x is an instance of A. When you try to access x.attr initially, its prototype, A, does not have an attribute named attr. Thus, it is equivalent to calling x.i_want_something_which_does_not_exist, which returns undefined. But after you assign A.prototype.attr, all instances of A will share that value. For example,

function A(){

}
var x = new A();
var y = new A();
document.write(x.attr+"<br>");  // undefined
document.write(y.attr+"<br>");  // undefined
A.prototype.attr = 1; 
document.write(x.attr+"<br>"); // 1
document.write(y.attr+"<br>"); // 1

Edit: Here is an example of three instances:

function printValues(x, y, z){
  document.write("x.attr="+x.attr+", y="+y.attr+", z.attr="+z.attr+"<br />"); // Although I strongly recomment you to never use document.write
  // https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice
}
function A(){

}
var x = new A();
var y = new A();
var z = new A();
printValues(x, y, z);

A.prototype.attr = 1; 
printValues(x, y, z);

y.attr = 2;
printValues(x, y, z);

produces:

x.attr=undefined, y=undefined, z.attr=undefined
x.attr=1, y=1, z.attr=1
x.attr=1, y=2, z.attr=1

Note that after running y.attr=1, y.attr has a different reference than x.attr and z.attr, which, by the way, still share same reference.

Object prototypes, The prototype is an object that is associated with every functions and objects by default in JavaScript, where function's prototype property is accessible and modifiable and object's prototype property (aka attribute) is not visible. Every function includes prototype object by default. The answer is Prototype. The prototype is an object that is associated with every functions and objects by default in JavaScript, where function's prototype property is accessible and modifiable and object's prototype property (aka attribute) is not visible. Every function includes prototype object by default.

You just add property attr to prototype object of A. When you call x.attr it firstly try to find it in own properties of x, and if can't find there - go to prototype of 'A'.

Function, Well, simply put, every function in JavaScript has a prototype property that references an Duration: 28:23 Posted: Oct 4, 2018 Given a function Foo, Foo.prototype is not the prototype of the Foo object. It is the prototype that will be assigned to objects created using new Foo().

Prototype in JavaScript, When we create an object using the above function constructor, JavaScript Engine will add dunder proto or __proto__ in the object which will point to the  In this code, the Foo() function accepts an argument, adds the name property to the object, and sets the value of the name property to the name argument. Behind the scenes, the JavaScript engine creates a new function Foo() and an anonymous object. The Foo() function has a property named prototype that points to the anonymous object.

Prototype in JavaScript, Remember, new objects can be created with a constructor function, like new F() . If F.prototype is an object, then the new operator uses it to set  Function.prototype.call() Calls a function and sets its this to the provided value. Arguments can be passed as they are. Function.prototype.isGenerator() Returns true if the function is a generator; otherwise returns false. Function.prototype.toSource() Returns a string representing the source code of the function. Overrides the Object.prototype.toSource method.

Why Use Prototype in JavaScript - JavaScript, This tutorial explains the JavaScript prototype concept in detail and clears all confusions The Foo() function has a property named prototype that points to the  isPrototypeOf() method, along with the instanceof operator particularly comes in handy if you have code that can only function when dealing with objects descended from a specific prototype chain, e.g., to guarantee that certain methods or properties will be present on that object.

How To Work with Prototypes and Inheritance in JavaScript , Functions in JavaScript are special objects which can be “called”. We make them and by using the Function constructor function (or function literal)  Object.prototype.constructor Specifies the function that creates an object's prototype. Object.prototype.__proto__ Points to the object which was used as prototype when the object was instantiated. Object.prototype.__noSuchMethod__ Allows a function to be defined that will be executed when an undefined object member is called as a method.

Comments
  • No, x still references the same A object. Also, x doesn't have the property attr, that would be what would happen if you said x.attr = 1, which is not what you did. x's prototype has the property attr, just like you wrote.
  • But the first time, I invoke document.write(x.attr+"<br>"); , x's prototype don't have property attr, so x's prototype is reallocated?
  • No, x's prototype gets a new property. It's unclear what you mean by "reallocated" here.
  • if you want to understand it better, you should read this article: hackernoon.com/prototypes-in-javascript-5bba2990e04b
  • A literal reading of your question cannot be answered: whether or not a particular line of code triggers a reallocation is not only implementation dependent, but dependent on how the program runs. Is reallocation really what you're concerned with here?
  • Do you mean when we execute A.prototype.attr = 1; All existed instances of A will add attr to instance.__proto__?
  • No, it doesn't have to add to every instance. By default instance.__proto__ is referencing A.prototype. So there is only one attr property which is used by all instances
  • But you can set y.attr=2;, which means attr is not shared by x and y. So x have his own attr.
  • @gaussclb, I forgot to answer this. I've edited my answer to include this, thanks!
  • My bad, fixed it @gaussclb!