F.prototype

JavaScript allows creating objects using a constructor function, like the new F().

Once F.prototype is an object, the new operator may use it for setting [[Prototype]] for the new object.

Please, take into consideration that here F.prototype means an ordinary property, known as "prototype" on F. It may sound similar to the term "prototype." Still, here it is intended an ordinary property with this name.

For instance:

let animal = {

  speaks: true

};

function Dog(name) {

  this.name = name;

}

Dog.prototype = animal;

let dog = new Dog("Cute dog"); //  dog.__proto__ == animal

console.log(dog.speaks); // true

And, here is the resulting picture:

You can use the F.prototype property only in case the new F is called. It can assign the [[Prototype]] of the new object. Then, no connection between the F.prototype and the new object can be found. We can describe it as a "one-time present."

In case, after creating, F.prototype property changes, (F.prototype = <another object>). Afterward, new objects that the new F has created may have another object, such as [[Prototype]]. But the objects that already exist keep the old one.

Default F.prototype, Constructor Property¶

In JavaScript, each function obtains the “prototype" property. In general, "prototype" is an object with a single property constructor pointing back to the function itself.

Here is an example:

function Dog() {}
/* default prototype
Dog.prototype = { constructor: Dog };
*/

You can check it:

function Dog() {}

// by default:

// Dog.prototype = { constructor: Dog }

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

As a rule, in case of not doing anything, the constructor property is available to all the dogs via [[Prototype]] .

For instance:

function Dog() {}

// by default:

// Dog.prototype = { constructor: Dog }

let dog = new Dog(); // inherits from {constructor: Dog}

console.log(dog.constructor == Dog); // true (from prototype)

It is possible to use the constructor property for creating a new object with the constructor like the existing one.

It is visualized in the following example:

function Dog(name) {
  this.name = name;
  console.log(name);
}
let dog1 = new Dog("Cute Dog");
let dog2 = new dog.constructor("Little Dog");

A notable thing about "constructor" is that JavaScript gives no guarantees for the right "constructor" value. Of course, it exists in the default "prototype" for the functions. That’s all. Anything happening with it later depends on the developer.

For example, in case you decide to replace the default prototype as a whole, there won’t be any "constructor" in it.

It is demonstrated here:

function Dog() {}

Dog.prototype = {

  run: true

};

let dog = new Dog();

console.log(dog.constructor === Dog); // false

Hence, for keeping the right "constructor", you can use the add or remove properties to the default "prototype" and not write it as a whole.

Here is an example:

function Dog() {}

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

There is an alternative option, as well. It is possible to recreate the constructor property manually, like this:

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

// now constructor is also correct because we added it

Summary¶

In this chapter, we represented the way to set a [[Prototype]] for the objects made with a constructor function.

Briefly, the F.prototype property is capable of setting [[Prototype]] of new objects when new F() is called.

The F.prototype value can be an object or null. The special effect is only active for the "prototype" property when it is set on a constructor function and called with new.

As a rule, all the functions have F.prototype = { constructor: F }. Hence it is possible to get the object constructor through accessing its "constructor" property.