JavaScript inheritance and the constructor property

by

Okay, let’s play a little mind game:

From the above image we can see:

  1. When we create a function like function Foo() {}, JavaScript creates a Function instance.
  2. Every Function instance (the constructor function) has a property prototype which is a pointer.
  3. The prototype property of the constructor function points to its prototype object.
  4. The prototype object has a property constructor which is also a pointer.
  5. The constructor property of the prototype object points back to its constructor function.
  6. When we create a new instance of Foo like new Foo(), JavaScript creates a new object.
  7. The internal [[proto]] property of the instance points to the prototype of the constructor.

Now, the question arises that why doesn’t JavaScript attach the constructor property to the instance object instead of the prototype. Consider:

function defclass(prototype) {
    var constructor = prototype.constructor;
    constructor.prototype = prototype;
    return constructor;
}

var Square = defclass({
    constructor: function (side) {
        this.side = side;
    },
    area: function () {
        return this.side * this.side;
    }
});

var square = new Square(10);

alert(square.area()); // 100

As you can see the constructor property is just another method of the prototype, like area in the example above. What makes the constructor property special is that it’s used to initialize an instance of the prototype. Otherwise it’s exactly the same as any other method of the prototype.

Defining the constructor property on the prototype is advantageous for the following reasons:

  1. It’s logically correct. For example consider Object.prototype. The constructor property of Object.prototype points to Object. If the constructor property was defined on the instance then Object.prototype.constructor would be undefined because Object.prototype is an instance of null.
  2. It’s treated no differently from other prototype methods. This makes the job of new easier since it doesn’t need to define the constructor property on every instance.
  3. Every instance shares the same constructor property. Hence it’s efficient.

Now when we talk about inheritance, we have the following scenario:

From the above image we can see:

  1. The derived constructor’s prototype property is set to the instance of the base constructor.
  2. Hence the internal [[proto]] property of the instance of the derived constructor points to it too.
  3. Thus the constructor property of the derived constructor instance now points to the base constructor.

As for the instanceof operator, contrary to popular belief it doesn’t depend on the constructor property of the instance. As we can see from above, that would lead to erroneous results.

The instanceof operator is a binary operator (it has two operands). It operates on an instance object and a constructor function. As explain on Mozilla Developer Network, it simply does the following:

function instanceOf(object, constructor) {
    while (object != null) {
        if (object == constructor.prototype) { //object is instanceof constructor
            return true;
        } else if (typeof object == 'xml') { //workaround for XML objects
            return constructor.prototype == XML.prototype;
        }
        object = object.__proto__; //traverse the prototype chain
    }
    return false; //object is not instanceof constructor
}

To put it simply if Foo inherits from Bar, then the prototype chain for the instance of Foo would be:

  1. foo.__proto__ === Foo.prototype
  2. foo.__proto__.__proto__ === Bar.prototype
  3. foo.__proto__.__proto__.__proto__ === Object.prototype
  4. foo.__proto__.__proto__.__proto__.__proto__ === null

As you can see, every object inherits from the Object constructor. The prototype chain ends when an internal [[proto]] property points to null.

The instanceof function simply traverses the prototype chain of the instance object (the first operand) and compares the internal [[proto]] property of each object to the prototype property of the constructor function (the second operand). If they match, it returns true; and else if the prototype chain ends, it returns false.

More Related Contents:

  1. Use of .apply() with ‘new’ operator. Is this possible?
  2. Understanding prototypal inheritance in JavaScript
  3. Can I construct a JavaScript object without using the new keyword?
  4. Advantages of setting the “constructor” Property in the “prototype”
  5. What is the reason to use the ‘new’ keyword at Derived.prototype = new Base
  6. Is it bad practice to have a constructor function return a Promise?
  7. What is the significance of the Javascript constructor property?
  8. What values can a constructor return to avoid returning this?
  9. Why does instanceof return false for some literals?
  10. ES6: call class constructor without new keyword
  11. How to extend Function with ES6 classes?
  12. What is the instanceof operator in JavaScript?
  13. What does it mean that Javascript is a prototype based language?
  14. How to detect if a function is called as constructor?
  15. classical inheritance vs prototypal inheritance in javascript
  16. JavaScript inheritance: Object.create vs new
  17. How to implement inheritance in JS Revealing prototype pattern?
  18. What is the `constructor` property really used for? [duplicate]
  19. Can I use arrow function in constructor of a react component?
  20. What’s the point of new String(“x”) in JavaScript?
  21. Subclassing Javascript Arrays. TypeError: Array.prototype.toString is not generic
  22. Extend Javascript promise and resolve or reject it inside constructor
  23. Why are my JavaScript object properties being overwritten by other instances?
  24. does javascript’s this object refer to newly created object in the way i think
  25. Objects don’t inherit prototyped functions
  26. Asynchronous constructor
  27. Why does ‘instanceof’ in TypeScript give me the error “‘Foo’ only refers to a type, but is being used as a value here.”?
  28. How to check if a Javascript Class inherits another (without creating an obj)?
  29. JSLint Error: Unexpected ‘this’
  30. JavaScript: using constructor without operator ‘new’

Leave a Comment