Question

I am taking my first OOP class (learning Java) in the fall so I’ve been reading up about it and going through little introductions to the language to get myself acquainted before school. I’m very excited to learn Java but feel I’m more ‘at home’ with JavaScript. I’ve done a few projects with it and am working on taking my code to the next, more professional level (if you want to say that) by using OOP in JS.

Currently I am working on dragging script and have it pretty much pinned down with procedural programming. Since this project is fresh in my memory, I am starting with this project to begin my move to objects. What is tripping me up here is the idea of having a ‘Drag’ object . . .

function Drag() {
    /* Drag code goes here */
} // constructor

I’m taking fairly well to the idea of OOP, but this stumps me. In all the examples I’ve gone through, the objects were always, well, objects. They were animals or cars, or a bike, etc. I have yet to come across the object of a behavior. I’m just not sure how it would work . . . If any of you have any advice on this, I’d appreciate it.

Now for inheritance! I haven’t had to use inheritance quite yet, but the subject interests me with JavaScript because so many people have put their 2 cents in about it. I think the most popular ways, though, that I’ve seen are John Resig’s and Douglas Crockford’s ways of inheritance.

I think they are very neat workarounds but for some reason I don’t really like that they both require assignment. I guess I just feel like they shouldn’t have to work that way. So, after looking through some more examples and at Crockford’s method, I came up with this (very sorry if someone else already has, I just haven’t seen it):

Object.prototype.extend = function (Obj) {
    'use strict'; // for jslint

    this.prototype = new Obj();
    this.prototype.constructor = this;
    return this;
}

Here is an example of it in use, I stole the example from here then modified it a bit:

Object.prototype.inObj = 1;

function A() {
    'use strict';
    this.inA = 2;
}

A.prototype.inAProto = 3;

function B() {
    'use strict';
    this.inB = 4;
}

/*** HERE IT IS ***/
B.extend(A);

B.prototype.inBProto = 5;

var w = new A();
var x = new B();

document.body.innerHTML = x.inObj + ', ' + x.inA + ', ' + x.inAProto + ', ' + x.inB + ', ' + x.inBProto; // 1, 2, 3, 4, 5
document.body.innerHTML += '<br />';
document.body.innerHTML += w instanceof A && w instanceof Object && x instanceof B && x instanceof A && x instanceof Object; // true

To me it looks and feels syntactically nice, I wonder how seasoned JS developers would feel about it. I tested it, and I know that you can place B.extend(A) before the definition for B but you cannot place it after B.prototype.inBProto or the list will become 1, 2, 3, 4, undefined because in the extend method, B‘s prototype is being reset. I’m working on a way around this but feel that B.extend(A) should come directly after the Constructor’s definition anyway.

What do you all think of this way? Thanks in advance!

EDIT: I developed a [clumsy] workaround which basically takes all the properties of the inheriting object’s prototype and then adds them back on after it is wiped clean by the new object:

Object.prototype.extend = function (Obj) {
    'use strict';
    var proto, p;

    proto = {};
    for (p in this.prototype) {
        if (this.prototype.hasOwnProperty(p)) {
            proto[p] = this.prototype[p];
        }
    }

    this.prototype = new Obj();
    this.prototype.constructor = this;

    for (p in proto) {
        if (proto.hasOwnProperty(p)) {
            this.prototype[p] = proto[p];
        }
    }

    return this;
};

Who knows, perhaps you won’t think this is quite as clumsy as I do, but it works and I think it’s pretty cool! :D

Answer 1

I agree with Daniel, you should never extend the basic JS core.

The reason I can break is that someone else may have done the same. But it’s more about not changing the default behavior for core code.

I would use a different approach. Instead for extending the Object make it a function and the use apply.

Made a simple mockup: http://jsfiddle.net/djEw8/

Read about apply here: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/function/apply