F.prototype & constructors

Where new objects find their shared methods

In the lesson The prototype chain, you saw that every object has a hidden link to one other object. That other object is its prototype. When you read a property the object doesn't have, JavaScript follows the link and looks in the prototype.

This lesson asks one question. When new User("Ada") makes a new object, which object does its hidden link point to?

The answer is User.prototype. Here is how it works:

• A function written with the function keyword has a property called prototype.
• That property holds a plain object.
• When you call the function with new, the new object's hidden link points to that object.

A function you call with new is called a constructor. An object it makes is called an instance. So new User("Ada") makes an instance of User.

In this lesson you will use that fact to:

• share one method between many objects,
• understand the constructor property,
• replace F.prototype without surprises,
• make one constructor build on another one.

The class syntax in the next module makes the same links. It just writes them for you.

Start with one constructor and one method. The constructor puts data, the name, on each new object. User.prototype holds a method, greet, that every instance can use.

1function User(name) {Run2  this.name = name;3}4 5User.prototype.greet = function () {6  return "Hi, " + this.name;7};8 9const ada = new User("Ada");10console.log(Object.getPrototypeOf(ada) === User.prototype);11console.log(ada.greet());12console.log(ada.constructor === User);

Line 10 is the key check: Object.getPrototypeOf(ada) === User.prototype. Object.getPrototypeOf(obj) gives you the object that obj's hidden link points to. You may also see __proto__ in old articles or in DevTools. In your own code, use Object.getPrototypeOf.

Here is what happens on line 11, when ada.greet() runs:

1. JavaScript asks: does ada have a greet property of her own? She doesn't.
2. It follows the hidden link to User.prototype and finds greet there.
3. It calls greet with this set to ada, because ada is before the dot.

That last step is why one shared method can still read each instance's own name.

When JavaScript makes a function, it also makes its prototype object. That object starts with one property, constructor, which points back to the function. So User.prototype.constructor is User.

That is why line 12 of the first example printed true for ada.constructor === User. ada doesn't have her own constructor property. JavaScript finds it on User.prototype.

1function Product(name) {2  this.name = name;3}4console.log(Product.prototype.constructor === Product);

Line 4 prints true. The constructor property is useful to look at, but it is a normal property. It does not build objects, and your code can change it.

Now see what happens when you put a whole new object in User.prototype. Choose whether the new object has constructor: User, then step through.

1function User(name) {2  this.name = name;3}4User.prototype.greet = function () {Run5  return "Old shelf: " + this.name;6};7const ada = new User("Ada");8 9User.prototype = {10  greet() {11    return "New shelf: " + this.name;12  },13};14const lin = new User("Lin");15 16console.log(ada.greet());17console.log(lin.greet());18console.log(ada.constructor === User);19console.log(lin.constructor === User);

Two things to remember from this experiment:

• Putting a new object in User.prototype does not change objects you already made. ada still links to the old object.
• An object you write with { } does not get constructor: User by itself. If your code reads instance.constructor, add it back when you replace the prototype.

1function User(name) {2  this.name = name;3}4User.prototype.greet = function () {5  return "Hi, " + this.name;6};7const ada = new User("Ada");8User.prototype.wave = function () {9  return "Wave, " + this.name;10};11console.log(ada.wave());12console.log(ada.constructor === User);13User.prototype = {14  greet() {15    return "Hello, " + this.name;16  },17};18const lin = new User("Lin");19console.log(ada.greet());20console.log(lin.greet());21console.log(lin.constructor === User);

Line by line:

1. Line 8 adds wave to the object that is already in User.prototype. ada links to that object, so she can use wave too.
2. Line 12 prints true. Adding a method kept the constructor property.
3. Line 13 puts a brand-new object in User.prototype, with a new greet.
4. Line 19 prints Hi, Ada. ada still uses the old object.
5. Line 20 prints Hello, Lin. lin was made after line 13, so he uses the new object.
6. Line 21 prints false. The new object has no constructor, so JavaScript keeps looking up the chain. It finds Object.prototype.constructor, which is Object.

1function Product(name) {2  this.name = name;3}4Product.prototype = {5  describe() {6    return this.name;7  },8};9Object.defineProperty(Product.prototype, "constructor", {10  value: Product,11  writable: true,12  configurable: true,13});14console.log(Product.prototype.constructor === Product);15console.log(Object.keys(Product.prototype).includes("constructor"));

Lines 9 to 13 use Object.defineProperty. It adds a property and lets you set its settings. One setting is enumerable: whether Object.keys and for...in list the property. You didn't set it here, so it is false.

That matches the original constructor property, which is not listed either. Line 14 prints true, and line 15 prints false.

1function User(name) {2  this.name = name;3}4const ada = new User("Ada");5const oldShelf = Object.getPrototypeOf(ada);6User.prototype = {};7const lin = new User("Lin");8console.log(Object.getPrototypeOf(ada) === oldShelf);9console.log(Object.getPrototypeOf(lin) === User.prototype);

Line 5 saves the object that ada links to as oldShelf. Line 6 puts a new object in User.prototype. That changes the function's property, but it cannot change the hidden link already stored in ada. Both lines 8 and 9 print true.

1function User(name) {2  this.name = name;3}4const ada = new User("Ada");5console.log(ada instanceof User);6User.prototype = {};7const lin = new User("Lin");8console.log(ada instanceof User);9console.log(lin instanceof User);

ada instanceof User asks: is the object in User.prototype right now somewhere in ada's chain of links?

• Line 5 prints true. Nothing has been replaced yet.
• Line 8 prints false. ada still links to the old object, and User.prototype is now a different one.
• Line 9 prints true. lin links to the new object.

If you write this.greet = function () { ... } inside a constructor, it makes a new function each time the constructor runs. A hundred users get a hundred greet functions that all do the same thing.

If you put the method on F.prototype instead, there is only one function. Every instance finds that same one.

1function Product(name, price) {2  this.name = name;3  this.price = price;4}5Product.prototype.describe = function () {6  return this.name + " costs $" + this.price;7};8const a = new Product("Tea", 3);9const b = new Product("Bread", 2);10console.log(a.describe());11console.log(a.describe === b.describe);

1. Lines 1 to 4 give each product its own name and price.
2. Line 5 puts one describe function on Product.prototype.
3. Line 10 prints Tea costs $3, using Tea's own data.
4. Line 11 prints true. Both products found the very same function.

1function Product(name, price) {2  this.name = name;3  this.price = price;4}5Product.prototype.describe = function () {6  return this.name + " costs $" + this.price;7};8const item = new Product("Tea", 3);9const sibling = new item.constructor("Coffee", 4);10console.log(sibling.describe());11console.log(sibling.constructor === Product);

On line 9, item.constructor is found on Product.prototype, and it is Product. So new item.constructor("Coffee", 4) makes another product. Line 10 prints Coffee costs $4.

This only works if constructor still points to the right function. If someone replaced the prototype and didn't add it back, item.constructor would be Object.

1function UserOwn(name) {2  this.name = name;3  this.greet = function () {4    return "Hi, " + this.name;5  };6}7 8function UserShared(name) {9  this.name = name;10}11UserShared.prototype.greet = function () {12  return "Hi, " + this.name;13};

The table below lists four kinds of things. Read each row as: where is it stored, and how JavaScript finds it.

This is why older JavaScript code often adds methods right after the constructor function. The method still gets the instance as this when you call it as ada.greet().

Sometimes you want a more specific kind of object. An Admin is a User with a level. Admins should get everything users have. This is called inheritance.

Before class existed, code connected two constructors by hand. The usual pattern has three jobs:

1. Inside Admin, run User.call(this, name). .call(this, ...) runs a function with this set to the object you pass. So User writes name onto the new admin.
2. Set Admin.prototype = Object.create(User.prototype). Object.create(obj) makes a new empty object whose hidden link points to obj. Now admins can find user methods.
3. Set Admin.prototype.constructor = Admin, because the new object has no constructor of its own. Then add the admin's own methods.

1function User(name) {Run2  this.name = name;3}4User.prototype.greet = function () {5  return "Hi, " + this.name;6};7 8function Admin(name, level) {9  User.call(this, name);10  this.level = level;11}12Admin.prototype = Object.create(User.prototype);13Admin.prototype.constructor = Admin;14Admin.prototype.greet = function () {15  return User.prototype.greet.call(this) + " (admin " + this.level + ")";16};17 18const maya = new Admin("Maya", 2);19console.log(maya.greet());20console.log(maya instanceof Admin);21console.log(maya instanceof User);

Line 14 puts a new greet on Admin.prototype. It has the same name as the method on User.prototype. This is called overriding: JavaScript finds Admin.prototype.greet first, so it never reaches the user one by itself.

On line 15, User.prototype.greet.call(this) runs the user method on purpose, with the same admin as this. Then it adds (admin 2).

1function User(name) {2  this.name = name;3}4function Admin(name) {5  User.call(this, name);6}7Admin.prototype = Object.create(User.prototype);8Admin.prototype.constructor = Object;9const maya = new Admin("Maya");10console.log(maya instanceof Admin);11console.log(maya instanceof User);12console.log(maya.constructor === Object);

Line 8 sets Admin.prototype.constructor to Object, which is wrong on purpose. Lines 10 and 11 still print true, because instanceof looks at the hidden links, and line 7 made those. Line 12 prints true too: maya.constructor is now Object.

So constructor is only a property you can read. The hidden links are what really connect the objects.

You will learn classes in the next module, so you don't need to learn their syntax yet. For now, know two things:

• Methods written in a class are stored on the class's prototype.
• extends links the child's prototype to the parent's prototype.

1class User {2  constructor(name) {3    this.name = name;4  }5  greet() {6    return "Hi, " + this.name;7  }8}9 10class Admin extends User {11  constructor(name, level) {12    super(name);13    this.level = level;14  }15  greet() {16    return super.greet() + " (admin " + this.level + ")";17  }18}19 20const maya = new Admin("Maya", 2);21console.log(maya.greet());22console.log(Object.getPrototypeOf(Admin.prototype) === User.prototype);

Line 21 prints the same greeting as the constructor version: Hi, Maya (admin 2). Line 22 prints true, so Admin.prototype links to User.prototype, just like before.

• super(name) on line 12 does the job of User.call(this, name).
• super.greet() on line 16 does the job of User.prototype.greet.call(this).

1console.log((function User() {}).prototype !== undefined);2console.log((() => {}).prototype === undefined);3const tools = { build() {} };4console.log(tools.build.prototype === undefined);5class Panel {}6console.log(typeof Panel.prototype);

• Line 1 prints true. A function written with function has a prototype, because you can call it with new.
• Line 2 prints true. An arrow function can't be called with new, so its prototype is undefined.
• Line 4 prints true. A method written as build() {} inside an object can't be called with new either.
• Line 6 prints object. A class has a prototype object.

Where you'll use this

You will meet constructor prototypes when you:

• read older libraries that use constructor functions,
• look at objects in DevTools and see their prototype,
• find out why instanceof gives a surprising answer,
• make many objects that share the same methods.

Class code is easier to debug too, once you know the links it makes.

Common misconceptions

• “F.prototype is the prototype of F.” No. It is the object that instances made by new F() link to.
• “Prototype methods are copied into every object.” No. Every object finds the same one by following its link. ada.greet === lin.greet is true.
• “The constructor property creates the object.” No. It is a normal property, and instances usually find it on the prototype.
• “Replacing F.prototype changes old objects.” No. Old objects keep the object they already link to.
• “Calling the parent constructor gives the child its methods.” No. It only sets the fields. Object.create makes the link to the methods.
• “Classes use a different kind of inheritance.” No. Classes are a shorter way to write the same prototype links.

Key takeaways

• new F() links the new object to F.prototype.
• Data that is different for each object goes on the instance. Shared methods go on the prototype.
• Instances usually find constructor on the prototype. Add it back after you replace the prototype object.
• For one constructor to build on another, call the parent constructor and link the prototypes.
• Classes make the same prototype links with shorter code.

Final definition: F.prototype is the shared object that every new F() instance links to.

Up next: Built-in prototypes.