F.prototype

In modern JavaScript we can set a prototype using __proto__. But it wasn’t like that all the time.

JavaScript has had prototypal inheritance from the beginning. It was one of the core features of the language.

But in the old times, there was another (and the only) way to set it: to use a "prototype" property of the constructor function. And there are still many scripts that use it.

The “prototype” property

As we know already, new F() creates a new object. But what we didn’t use yet F.prototype property.

That property is used by the JavaScript itself to set [[Prototype]] for new objects.

When a new object is created with new F(), the [[Prototype]] of it is set to F.prototype.

Please note that F.prototype here means a regular property named "prototype" on F. It sounds something similar to the term “prototype”, but here we really mean a regular property with this name.

Here’s the example:

let animal = {
  eats: true
};

function Rabbit(name) {
  this.name = name;
}

Rabbit.prototype = animal;

let rabbit = new Rabbit("White Rabbit"); //  rabbit.__proto__ == animal

alert( rabbit.eats ); // true

Setting Rabbit.prototype = animal literally states the following: "When a new Rabbit is created, assign its [[Prototype]] to animal".

That’s the resulting picture:

On the picture, "prototype" is a horizontal arrow, it’s a regular property, and [[Prototype]] is vertical, meaning the inheritance of rabbit from animal.

Default F.prototype, constructor property

Every function has the "prototype" property even if we don’t supply it.

The default "prototype" is an object with the only property constructor that points back to the function itself.

Like this:

function Rabbit() {}

/* default prototype
Rabbit.prototype = { constructor: Rabbit };
*/

We can check it:

function Rabbit() {}
// by default:
// Rabbit.prototype = { constructor: Rabbit }

alert( Rabbit.prototype.constructor == Rabbit ); // true

Naturally, it we do nothing, the constructor property is available to all rabbits through [[Prototype]]:

function Rabbit() {}
// by default:
// Rabbit.prototype = { constructor: Rabbit }

let rabbit = new Rabbit(); // inherits from {constructor: Rabbit}

alert(rabbit.constructor == Rabbit); // true (from prototype)

We can use constructor to create a new object using the same constructor as the existing one.

Like here:

function Rabbit(name) {
  this.name = name;
  alert(name);
}

let rabbit = new Rabbit("White Rabbit");

let rabbit2 = new rabbit.constructor("Black Rabbit");

That’s handy when we have an object, don’t know which constructor was used for it (e.g. it comes from a 3rd party library), and we need to create the same.

…But probably the most important thing about "constructor" is that…

JavaScript itself does not ensure the right "constructor" at all.

Yes, it exists in the default "prototype" for functions, but that’s all. It is created automatically, but what happens with it later – is totally on us.

In particular, if we replace the default prototype by assigning our own Rabbit.prototype = { jumps: true }, then there will be no "constructor" in it.

But we may want to keep "constructor" for convenience by adding properties to the default "prototype" instead of overwriting it as a whole:

function Rabbit() {}

// Not overwrite Rabbit.prototype totally
// just add to it
Rabbit.prototype.jumps = true
// the default Rabbit.prototype.constructor is preserved

Or, alternatively, recreate it manually:

Rabbit.prototype = {
  jumps: true,
  constructor: Rabbit
};

Summary

In this chapter we briefly described the way of setting a [[Prototype]] for objects created via a constructor function. Later we’ll see more advanced programming patterns that rely on it.

Everything is quite simple, just few notes to make things clear:

  • The F.prototype property is not the same as [[Prototype]].
  • The only thing F.prototype does: it sets [[Prototype]] of new objects when new F() is called.
  • The value of F.prototype should be either an object or null: other values won’t work.
  • The "prototype" property only has such a special effect when is set to a constructor function, and it is invoked with new.

On regular objects this property does nothing. That’s an ordinary property:

let user = {
  name: "John",
  prototype: "Bla-bla" // no magic at all
};

By default all functions have F.prototype = { constructor: F }. So by default we can get the constructor of an object by accessing its "constructor" property.

Tasks

importance: 5

In the code below we create new Rabbit, and then try to modify its prototype.

In the start, we have this code:

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

alert( rabbit.eats ); // true
  1. We added one more string (emphasized), what alert shows now?

    function Rabbit() {}
    Rabbit.prototype = {
      eats: true
    };
    
    let rabbit = new Rabbit();
    
    Rabbit.prototype = {};
    
    alert( rabbit.eats ); // ?
  2. …And if the code is like this (replaced one line)?

    function Rabbit() {}
    Rabbit.prototype = {
      eats: true
    };
    
    let rabbit = new Rabbit();
    
    Rabbit.prototype.eats = false;
    
    alert( rabbit.eats ); // ?
  3. Like this (replaced one line)?

    function Rabbit() {}
    Rabbit.prototype = {
      eats: true
    };
    
    let rabbit = new Rabbit();
    
    delete rabbit.eats;
    
    alert( rabbit.eats ); // ?
  4. The last variant:

    function Rabbit() {}
    Rabbit.prototype = {
      eats: true
    };
    
    let rabbit = new Rabbit();
    
    delete Rabbit.prototype.eats;
    
    alert( rabbit.eats ); // ?

Answers:

  1. true.

    The assignment to Rabbit.prototype sets up [[Prototype]] for new objects, but it does not affect the existing ones.

  2. false.

    Objects are assigned by reference. The object from Rabbit.prototype is not duplicated, it’s still a single object is referenced both by Rabbit.prototype and by the [[Prototype]] of rabbit.

    So when we change its content through one reference, it is visible through the other one.

  3. true.

    All delete operations are applied directly to the object. Here delete rabbit.eats tries to remove eats property from rabbit, but it doesn’t have it. So the operation won’t have any effect.

  4. undefined.

    The property eats is deleted from the prototype, it doesn’t exist any more.

importance: 5

Imagine, we have an arbitrary object obj, created by a constructor function – we don’t know which one, but we’d like to create a new object using it.

Can we do it like that?

let obj2 = new obj.constructor();

Give an example of a constructor function for obj which lets such code work right. And an example that makes it work wrong.

We can use such approach if we are sure that "constructor" property has the correct value.

For instance, if we don’t touch the default "prototype", then this code works for sure:

function User(name) {
  this.name = name;
}

let user = new User('John');
let user2 = new user.constructor('Pete');

alert( user2.name ); // Pete (worked!)

It worked, because User.prototype.constructor == User.

…But if someone, so to say, overwrites User.prototype and forgets to recreate "constructor", then it would fail.

For instance:

function User(name) {
  this.name = name;
}
User.prototype = {}; // (*)

let user = new User('John');
let user2 = new user.constructor('Pete');

alert( user2.name ); // undefined

Why user2.name is undefined?

Here’s how new user.constructor('Pete') works:

  1. First, it looks for constructor in user. Nothing.
  2. Then it follows the prototype chain. The prototype of user is User.prototype, and it also has nothing.
  3. The value of User.prototype is a plain object {}, its prototype is Object.prototype. And there is Object.prototype.constructor == Object. So it is used.

At the end, we have let user2 = new Object('Pete'). The built-in Object constructor ignores arguments, it always creates an empty object – that’s what we have in user2 after all.

Tutorial map

Comments

read this before commenting…
  • You're welcome to post additions, questions to the articles and answers to them.
  • To insert a few words of code, use the <code> tag, for several lines – use <pre>, for more than 10 lines – use a sandbox (plnkr, JSBin, codepen…)
  • If you can't understand something in the article – please elaborate.