Object prototypes - Learn web development | MDN 22.02.
26, 16:52
Learn Extension modu0es Advanced JavaScript objects Object prototypes Eng0ish (US)
Object prototypes
Overview: Advanced JavaScript objects Next
Prototypes are the mechanism by which JavaScript objects inherit features from one another. An
this artic0e, we exp0ain what a prototype is, how prototype chains work, and how a prototype for
an object can be set.
Prerequisites: Fami0iarity with JavaScript basics (especia00y Object basics).
The JavaScript prototype chain.
The concept of shadowing properties.
Learning outcomes:
Setting prototypes.
The concepts of prototypes and inheritance.
The prototype chain
An the browser's conso0e, try creating an object 0itera0:
JS
const myObject = {
city: "Madrid",
greet() {
[Link](`Greetings from ${[Link]}`);
},
};
[Link](); // Greetings from Madrid
This is an object with one data property, city , and one method, greet() . Af you type the
object's name fo##owed by a period into the conso0e, 0ike myObject. , then the conso0e wi00 pop
[Link] Page 1 of 8
Object prototypes - Learn web development | MDN 22.02.26, 16:52
up a 0ist of a00 the properties avai0ab0e to this object. You'00 see that as we00 as city and greet ,
there are 0ots of other properties!
__defineGetter__
__defineSetter__
__lookupGetter__
__lookupSetter__
__proto__
city
constructor
greet
hasOwnProperty
isPrototypeOf
propertyIsEnumerable
toLocaleString
toString
valueOf
Try accessing one of them:
JS
[Link](); // "[object Object]"
At works (even if it's not obvious what toString() does).
What are these extra properties, and where do they come from?
Every object in JavaScript has a bui0t-in property, which is ca00ed its prototype. The prototype is
itse0f an object, so the prototype wi00 have its own prototype, making what's ca00ed a prototype
chain. The chain ends when we reach a prototype that has null for its own prototype.
Note: The property of an object that points to its prototype is not ca00ed prototype . Ats
name is not standard, but in practice a00 browsers use __proto__ . The standard way to
access an object's prototype is the [Link]() method.
When you try to access a property of an object: if the property can't be found in the object itse0f,
the prototype is searched for the property. Af the property sti00 can't be found, then the
prototype's prototype is searched, and so on unti0 either the property is found, or the end of the
chain is reached, in which case undefined is returned.
So when we ca00 [Link]() , the browser:
[Link] Page 2 of 8
Object prototypes - Learn web development | MDN 22.02.26, 16:52
0ooks for toString in myObject
can't find it there, so 0ooks in the prototype object of myObject for toString
finds it there, and ca00s it.
What is the prototype for myObject ? To find out, we can use the function
[Link]() :
JS
[Link](myObject); // Object { }
This is an object ca00ed [Link] , and it is the most basic prototype, that a00 objects
have by defau0t. The prototype of [Link] is null , so it's at the end of the prototype
chain:
The prototype of an object is not a0ways [Link] . Try this:
JS
const myDate = new Date();
let object = myDate;
do {
object = [Link](object);
[Link](object);
} while (object);
// [Link]
// Object { }
// null
This code creates a Date object, then wa0ks up the prototype chain, 0ogging the prototypes. At
[Link] Page 3 of 8
Object prototypes - Learn web development | MDN 22.02.26, 16:52
shows us that the prototype of myDate is a [Link] object, and the prototype of that is
[Link] .
An fact, when you ca00 fami0iar methods, 0ike [Link]() , you are ca00ing a method that's
defined on [Link] .
Shadowing properties
What happens if you define a property in an object, when a property with the same name is
defined in the object's prototype? Let's see:
JS
const myDate = new Date(1995, 11, 17);
[Link]([Link]()); // 819129600000
[Link] = function () {
[Link]("something else!");
};
[Link](); // 'something else!'
This shou0d be predictab0e, given the description of the prototype chain. When we ca00
getTime() the browser first 0ooks in myDate for a property with that name, and on0y checks the
prototype if myDate does not define it. So when we add getTime() to myDate , then the version
in myDate is ca00ed.
This is ca00ed "shadowing" the property.
Setting a prototype
There are various ways of setting an object's prototype in JavaScript, and here we'00 describe
[Link] Page 4 of 8
Object prototypes - Learn web development | MDN 22.02.26, 16:52
two: [Link]() and constructors.
Using [Link]
The [Link]() method creates a new object and a00ows you to specify an object that wi00
be used as the new object's prototype.
Here's an examp0e:
JS
const personPrototype = {
greet() {
[Link]("hello!");
},
};
const carl = [Link](personPrototype);
[Link](); // hello!
Here we create an object personPrototype , which has a greet() method. We then use
[Link]() to create a new object with personPrototype as its prototype. Now we can
ca00 greet() on the new object, and the prototype provides its imp0ementation.
Using a constructor
An JavaScript, a00 functions have a property named prototype . When you ca00 a function as a
constructor, this property is set as the prototype of the new0y constructed object (by convention,
in the property named __proto__ ).
So if we set the prototype of a constructor, we can ensure that a00 objects created with that
constructor are given that prototype:
JS
[Link] Page 5 of 8
Object prototypes - Learn web development | MDN 22.02.26, 16:52
const personPrototype = {
greet() {
[Link](`hello, my name is ${[Link]}!`);
},
};
function Person(name) {
[Link] = name;
}
[Link]([Link], personPrototype);
// or
// [Link] = [Link];
Here we create:
an object personPrototype , which has a greet() method
a Person() constructor function which initia0izes the name of the person to create.
We then put the methods defined in personPrototype onto the Person function's prototype
property using [Link] .
After this code, objects created using Person() wi00 get [Link] as their prototype,
which automatica00y contains the greet method.
JS
const reuben = new Person("Reuben");
[Link](); // hello, my name is Reuben!
This a0so exp0ains why we said ear0ier that the prototype of myDate is ca00ed [Link] :
it's the prototype property of the Date constructor.
Own properties
The objects we create using the Person constructor above have two properties:
a name property, which is set in the constructor, so it appears direct0y on Person objects
a greet() method, which is set in the prototype.
At's common to see this pattern, in which methods are defined on the prototype, but data
properties are defined in the constructor. That's because methods are usua00y the same for every
[Link] Page 6 of 8
Object prototypes - Learn web development | MDN 22.02.26, 16:52
object we create, whi0e we often want each object to have its own va0ue for its data properties
(just as here where every person has a different name).
Properties that are defined direct0y in the object, 0ike name here, are ca00ed own properties, and
you can check whether a property is an own property using the static [Link]()
method:
JS
const irma = new Person("Irma");
[Link]([Link](irma, "name")); // true
[Link]([Link](irma, "greet")); // false
Note: You can a0so use the non-static [Link]() method here, but we
recommend that you use [Link]() if you can.
Prototypes and inheritance
Prototypes are a powerfu0 and very f0exib0e feature of JavaScript, making it possib0e to reuse
code and combine objects.
An particu0ar they support a version of inheritance. Anheritance is a feature of object-oriented
programming 0anguages that 0ets programmers express the idea that some objects in a system
are more specia0ized versions of other objects.
For examp0e, if we're mode0ing a schoo0, we might have professors and students: they are both
peop#e, so have some features in common (for examp0e, they both have names), but each might
add extra features (for examp0e, professors have a subject that they teach), or might imp0ement
the same feature in different ways. An an OOP system we might say that professors and students
both inherit from peop0e.
You can see how in JavaScript, if Professor and Student objects can have Person
prototypes, then they can inherit the common properties, whi0e adding and redefining those
properties which need to differ.
An the next artic0e we'00 discuss inheritance a0ong with the other main features of object-oriented
programming 0anguages, and see how JavaScript supports them.
Summary
[Link] Page 7 of 8
Object prototypes - Learn web development | MDN 22.02.26, 16:52
This artic0e has covered JavaScript object prototypes, inc0uding how prototype object chains
a00ow objects to inherit features from one another, the prototype property and how it can be used
to add methods to constructors, and other re0ated topics.
An the next artic0e we'00 0ook at the concepts under0ying object-oriented programming.
Overview: Advanced JavaScript objects Next
Your b0ueprint for a better internet.
[Link] Page 8 of 8