Question

I’m having some trouble understanding the IF clause at the end of this function from Pro JavaScript Design Patterns:

function extend(subClass, superClass) {
    var F = function() {};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;

    subClass.superclass = superClass.prototype;
    if(superClass.prototype.constructor == Object.prototype.constructor) {
        superClass.prototype.constructor = superClass;
    }
}

The book explains that these lines ensure that the superclass’s constructor attribute is correctly set, even if the superclass is the Object class itself. Yet, if I omit those three lines and do the following:

function SubClass() {};
extend(SubClass, Object);

alert(Object.prototype.constructor == Object);

The alert says ‘true’, which means the superclass’s constructor is set correctly even without those last three lines. Under what conditions, then, does this IF statement do something useful?

Thanks.

Answer 1

The problem that those two lines try to avoid, is generally produced when you replace the prototype property of a Constructor Function, for example:

function Foo () {};
Foo.prototype = {
  bar: 'baz'
};

var foo = new Foo();
foo.constructor === Object; // true, but `constructor` should refer to Foo

When functions objects are created, the prototype property is initialized with a new object, which contains a constructor property that refers to the function itself, e.g.:

function Bar () {};
var bar = new Bar();
bar.constructor === Bar; // true

When you replace the prototype property with another object, this object has it’s own constructor property, generally inherited from other constructor, or from Object.prototype.

var newObj = {};
newObj.constructor === Object;

Recommended articles:

• Constructors considered mildly confusing
• JavaScript Prototypal Inheritance