29/07/2022, 08:09 JavaScript Prototype

JavaScript Prototype

If this JavaScript tutorial saves you

hours of work, please whitelist it in
your ad blocker 😭 and

Donate Now
(https://www.javascripttutorial.net/donation/)

to support us ❤️in paying for web

hosting and CDN to keep the site
running.
Summary: in this tutorial, you’ll learn about the JavaScript prototype and how it works under the
hood.

Introduction to JavaScript prototype

JavaScript has the built-in Object() function. The typeof
(https://www.javascripttutorial.net/javascript-typeof/) operator returns 'function' if you pass the
Object function to it. For example:

typeof(Object)

Output:

'function'

https://www.javascripttutorial.net/javascript-prototype/ 1/12
29/07/2022, 08:09 JavaScript Prototype

Please note that Object() is a function, not an object. It’s confusing if this is the first time
you’ve learned about the JavaScript prototype.

Also, JavaScript provides an anonymous object (https://www.javascripttutorial.net/javascript-objects/) that can be

referenced via the prototype property of the Object() function:

console.log(Object.prototype);

(https://www.javascripttutorial.net/wp-content/uploads/2021/01/JavaScript-Prototype-Object.prototype.png)

The Object.prototype object has some useful properties (https://www.javascripttutorial.net/javascript-object-

properties/) and methods (https://www.javascripttutorial.net/javascript-object-methods/) such as toString() and
valueOf() .

Note when a function is a value of an object property, it’s called a method. Therefore, a method
is an object property with value as a function.

The Object.prototype also has an important property called constructor that references the
Object() function.

The following statement confirms that the Object.prototype.constructor property references the
Object function:

https://www.javascripttutorial.net/javascript-prototype/ 2/12
29/07/2022, 08:09 JavaScript Prototype

console.log(Object.prototype.constructor === Object); // true

Suppose a circle represents a function and a square represents an object. The following picture
illustrates the relationship between the Object() function and the Object.prototype object:

.constructor

constructor
.prototype toString()
Object
valueOf()
...
(https://www.javascripttutorial.net/wp-

content/uploads/2022/01/JS-prototype.svg)

First, define a constructor function (https://www.javascripttutorial.net/javascript-constructor-function/) called

Person as follows:

function Person(name) {

this.name = name;

In this example, the Person() function accepts a name argument and assigns it to the name
property of the this object.

Behind the scenes, JavaScript creates a new function Person() and an anonymous object:

.constructor

.prototype
Person constructor

(https://www.javascripttutorial.net/wp-

content/uploads/2022/01/JS-prototype-Person-type.svg)

Like the Object() function, the Person() function has a property called prototype that
references an anonymous object. And the anonymous object has the constructor property that
references the Person() function.

https://www.javascripttutorial.net/javascript-prototype/ 3/12
29/07/2022, 08:09 JavaScript Prototype

The following shows the Person() function and the anonymous object referenced by the
Person.prototype :

console.log(Person);

console.log(Person.prototype);

(https://www.javascripttutorial.net/wp-content/uploads/2021/01/JavaScript-

Prototype-Person-function.png)

In addition, JavaScript links the Person.prototype object to the Object.prototype object via the
[[Prototype]] , which is known as a prototype linkage.

The prototype linkage is denoted by [[Prototype]] in the following figure:

.constructor

constructor
.prototype toString()
Object
valueOf()
...

.constructor

.prototype [[Prototype]]
Person constructor

https://www.javascripttutorial.net/javascript-prototype/ 4/12
29/07/2022, 08:09 JavaScript Prototype

(https://www.javascripttutorial.net/wp-content/uploads/2022/01/JS-prototype-Person-prototype.svg)

Defining methods in the JavaScript prototype object

The following defines a new method called greet() in the Person.prototype object:

Person.prototype.greet = function() {

return "Hi, I'm " + this.name + "!";

In this case, the JavaScript engine adds the greet() method to the Person.prototype object:

.constructor

constructor
.prototype toString()
Object
valueOf()
...

.constructor

.prototype constructor [[Prototype]]

Person
greet()

(https://www.javascripttutorial.net/wp-content/uploads/2022/01/JS-prototype-method.svg)

The following creates a new instance of the Person :

let p1 = new Person('John');

Internally, the JavaScript engine creates a new object named p1  and links the p1 object to the
Person.prototype object via the prototype linkage:

https://www.javascripttutorial.net/javascript-prototype/ 5/12
29/07/2022, 08:09 JavaScript Prototype

.constructor

constructor
.prototype toString()
Object
valueOf()
...

.constructor

.prototype constructor [[Prototype]]

Person
greet()

[[Prototype]]

name: 'John'

p1

(https://www.javascripttutorial.net/wp-content/uploads/2022/01/JS-prototype-Person-object.svg)

The link between p1 , Person.prototype , and Object.protoype is called a prototype chain.

The following calls the greet() method on the p1 object:

let greeting = p1.greet();

console.log(greeting);

Because p1 doesn’t have the greet() method, JavaScript follows the prototype linkage and finds it
on the Person.prototype object.

Since JavaScript can find the greet() method on the Person.prototype object, it executes the
greet() method and returns the result:

The following calls the toString() method on the p1 object:

https://www.javascripttutorial.net/javascript-prototype/ 6/12
29/07/2022, 08:09 JavaScript Prototype

let s = p1.toString();

console.log(s);

In this case, the JavaScript engine follows the prototype chain to look up for the toString() method
in the Person.prototype .

Because the Person.prototype doesn’t have the toString() method, the JavaScript engine goes
up to the prototype chain and searches for the toString() method in the Object.prototype
object.

Since JavaScript can find the toString() method in the Object.prototype , it executes the
toString() method.

.constructor

constructor
.prototype toString()
Object
valueOf()
...

.constructor

.prototype constructor [[Prototype]]

Person
greet()

[[Prototype]]
p1.toString()

name: 'John'

p1

(https://www.javascripttutorial.net/wp-content/uploads/2022/01/JS-prototype-calling-a-method.svg)

https://www.javascripttutorial.net/javascript-prototype/ 7/12
29/07/2022, 08:09 JavaScript Prototype

If you call a method that doesn’t exist on the Person.prototype and Object.prototype object,
the JavaScript engine will follow the prototype chain and throw an error if it cannot find the method.
For example:

p1.fly();

Because the fly() method doesn’t exist on any object in the prototype chain, the JavaScript engine
issues the following error:

TypeError: p1.fly is not a function

The following creates another instance of the Person whose name property is 'Jane' :

let p2 = new Person('Jane');

(https://www.javascripttutorial.net/wp-content/uploads/2022/01/JS-prototype-two-person-objects.svg)

https://www.javascripttutorial.net/javascript-prototype/ 8/12
29/07/2022, 08:09 JavaScript Prototype

The p2 object has the properties and methods as the p1 object.

In conclusion, when you define a method on the prototype object, this method is shared by all
instances.

Defining methods in an individual object

The following defines the draw() method on the p1 object.

p1.draw = function () {

return "I can draw.";

};

The JavaScript engine adds the draw() method to the p1 object, not the Person.prototype
object:

(https://www.javascripttutorial.net/wp-content/uploads/2022/01/JS-prototype-object-with-method.svg)

It means that you can call the draw() method on the p1 object:

p1.draw();

https://www.javascripttutorial.net/javascript-prototype/ 9/12
29/07/2022, 08:09 JavaScript Prototype

But you cannot call the draw() method on the p2 object:

p2.draw()

Error:

TypeError: p2.draw is not a function

When you define a method in an object, the method is only available to that object. It cannot be
shared with other objects by default.

Getting prototype linkage

The __proto__ is pronounced as dunder proto. The __proto__ is an accessor property

(https://www.javascripttutorial.net/javascript-object-properties/) of the Object.prototype object. It exposes the
internal prototype linkage ( [[Prototype]]) of an object through which it is accessed.

The __proto__ has been standardized in ES6 (https://www.javascripttutorial.net/es6/) to ensure

compatibility for web browsers. However, it may be deprecated in favor of
Object.getPrototypeOf() in the future. Therefore, you should never use the __proto__  in your

production code.

The  p1.__proto__ exposes the [[Prototype]] that references the Person.prototype object.

Similarly, p2.__proto__ also references the same object as p1.__proto__:

console.log(p1.__proto__ === Person.prototype); // true

console.log(p1.__proto__ === p2.__proto__); // true

As mentioned earlier, you should use the Object.getPrototypeOf() method instead of the
__proto__ .

The Object.getPrototypeOf() method returns the prototype of a specified object.

https://www.javascripttutorial.net/javascript-prototype/ 10/12
29/07/2022, 08:09 JavaScript Prototype

console.log(p1.__proto__ === Object.getPrototypeOf(p1)); // true

Another popular way to get the prototype linkage is when the Object.getPrototypeOf() method is
not available is via the constructor property as follows:

p1.constructor.prototype

The p1.constructor returns Person , therefore, p1.constructor.prototype returns the

prototype object.

Shadowing

See the following method call:

console.log(p1.greet());

The p1 object doesn’t have the greet() method defined, therefore JavaScript goes up to the
prototype chain to find it. In this case, it can find the method in the Person.prototype object.

Let’s add a new method to the object p1 with the same name as the method in the
Person.prototype object:

p1.greet = function() {

console.log('Hello');

And call the greet() method:

console.log(p1.greet());

Because the p1 object has the greet() method, JavaScript just executes it immediately without
looking it up in the prototype chain.

https://www.javascripttutorial.net/javascript-prototype/ 11/12
29/07/2022, 08:09 JavaScript Prototype

This is an example of shadowing. The greet() method of the p1 object shadows the greet()
method of the prototype object which the p1 object references.

Summary

The Object() function has a property called prototype that references a

Object.prototype object.

The Object.prototype object has all properties and methods which are available in all objects
such as toString() and valueOf() .

The Object.prototype object has the constructor property that references the Object
function.

Every function has a prototype object. This prototype object references the
Object.prototype object via [[prototype]] linkage or __proto__ property.

The prototype chain allows one object to use the methods and properties of its prototype
objects via the [[prototype]] linkages.

The Object.getPrototypeOf() method returns the prototype object of a given object. Do use
the Object.getPrototypeOf() method instead of __proto__ .

https://www.javascripttutorial.net/javascript-prototype/ 12/12