Question

I’d love it if I could make my own class that extended an HTML element class, e.g. HTMLDivElement or HTMLImageElement.

Assuming the standard inheritance pattern:

// class A:

function ClassA(foo) {
    this.foo = foo;
}

ClassA.prototype.toString = function() {
    return "My foo is " + this.foo;
};

// class B:

function ClassB(foo, bar) {
    ClassA.call(this, foo);
    this.bar = bar;
}

ClassB.prototype = new ClassA();

ClassB.prototype.toString = function() {
    return "My foo/bar is " + this.foo + "/" + this.bar;
};

I’m not able to figure out what to call in the constructor:

function Image2() {
    // this doesn't work:
    Image2.prototype.constructor.call(this);
    // neither does this (only applies to <img>, no equivalent for <span> etc.):
    Image.call(this);
}

Image2.prototype = new Image(); // or document.createElement("img");

Image2.prototype.toString = function() {
    return "My src is " + this.src;
};

Is this just not possible? Or is there some way? Thanks. =)

Answer 1

No you can’t. (At least not reliably across today’s browsers down to IE6; I don’t know if the situation has recently changed in cutting-edge browsers.)