JavaScript prototypal inheritance: succinct syntax?

Question

Is there a more succinct way to express this than three distinct, procedural operations? Something more object notation-like, or at least all within the body of the Name function?

Problem:

function Name(first, last) {
    this.first = first;
    this.last = last;
}

Name.prototype = new String;

Name.prototype.toString = function() {
   return this.last + ', ' + this.first;
};

Test:

console.log(new Name("jimmy", "dean").toString())
console.log(new Name() instanceof Name);
console.log(new Name() instanceof String);
console.log(new Name() instanceof Object);
console.log(Name.prototype.toString.call(new Name('jimmy', 'dean')));
console.log(Name.prototype.toString.call({
    first: 'jimmy',
    last: 'dean'
}));

Expected output:

< "dean, jimmy"
< true
< true
< true
< "dean, jimmy"
< "dean, jimmy"

@pimvdb—sometimes it's better to just edit the question for small typos. — RobG
– RobG, Commented Dec 22, 2011 at 0:28
I don't understand why you want the prototype to be an instance of String. As long as toString returns a string (which seems to be sensible), then you can call any method that would be inherited from String without the assignment of a string to the constructor's prototype. — RobG
– RobG, Commented Dec 22, 2011 at 0:33

jondavidjohn · Accepted Answer · 2011-12-21 22:19:43Z

1

Example

function Name(first, last) {
    this.partFirst = first;
    this.partLast = last;
    this.valueOf = this.toString = function() {
        return this.partLast + ', ' + this.partFirst;
    }
}
Name.prototype = new String();

edited Dec 21, 2011 at 22:19

answered Dec 21, 2011 at 21:09

jondavidjohn

62.5k21 gold badges120 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Rob W Over a year ago

Your method does not inherit its prototype from the String constructor any more. Side note: A valueOf method has to be defined, to prevent the following error: String.prototype.valueOf called on incompatible Object (FF 8.0, using ""+(new Name()) as a test case).

jondavidjohn Over a year ago

noted, but explicitly calling .toString() as the OP intends to works fine. And wouldn't a parameter-less constructor call for Name be a programmer error? Updated link above to show (new Name("first", "last") + "")

Rob W Over a year ago

new Name, new Name() and new Name(void 0, void 0) are equivalent and valid (void 0 === undefined, by the way). As for the error, it occurs when using the OP's inheritance concept: jsfiddle.net/wKvqQ/4

jondavidjohn Over a year ago

@RobW found that the String.toString() uses the valueOf so all you have to do is define the valueOf. check link above again.

Rob W Over a year ago

Just define both methods, if you like the current way: this.valueOf = this.toString = .., to also account for an explicit .toString() call. However, setting a prototype instead of using this.____ = is more efficient and readable.

|

Fabian · Accepted Answer · 2011-12-22 10:01:47Z

Here's how I do it:

function subclass(constructor, superConstructor) {
    function surrogateConstructor() { }

    surrogateConstructor.prototype = superConstructor.prototype;

    var prototypeObject = new surrogateConstructor();
    prototypeObject.constructor = constructor;

    constructor.prototype = prototypeObject;
}



/* Base object */
function BaseItem() {
    this.type = 'baseitem';
    this.obj = null;
}
BaseItem.prototype.render = function() {
    return "foo";
}



/* Sub class */
function InteractionArea() {
    BaseItem.call(this);
    this.type = 'interactionarea'
    this.obj = document.createElement('div')
}
subclass(InteractionArea, BaseItem);

//here come the overrides
InteractionArea.prototype.render = function() {
    return "foobar";
}
InteractionArea.prototype.render2 = function() {
    return "foobar";
}



/* Sub-sub class */
function InteractionArea2() {
    InteractionArea.call(this);
    this.type = 'interactionarea2';
    this.obj = false;
}
subclass(InteractionArea2, InteractionArea);

InteractionArea2.prototype.render = function() {
    return "bar";
}

Raynos · Accepted Answer · 2011-12-22 12:19:01Z

0

Sure. Use Object.create.

var Name = Object.create(String.prototype, {
  toString: { value: function _toString() {
    return this.partLast + ', ' + this.partFirst;
  } },
  constructor: { value: function _constructor(first, last) {
    this.partFirst = first;
    this.partLast = last;
    return this;
  } }
});

var name = Object.create(Name).constructor("foo", "bar");

Now ES5 is a bit ugly, so you can use some mechanism for ES5 OO sugar, let's take pd as an example:

var Name = pd.make(String.prototype, {
  toString: function _toString() {
    return this.partLast + ', ' + this.partFirst;
  },
  constructor: function (first, last) {
    this.partFirst = first;
    this.partLast = last;
  },
  beget: pd.Base.beget 
});

console.log(Name.beget("jimmy", "dean").toString())
console.log(Name.isPrototypeOf(Name.beget()));
console.log(String.prototype.isPrototypeOf(Name.beget()));
console.log(Object.prototype.isPrototypeOf(Name.beget()));
console.log(Name.toString.call(Name.beget('jimmy', 'dean')));
console.log(Name.toString.call({
    partFirst: 'jimmy',
    partLast: 'dean'
}));

Of course output is as expected Live Example

edited Dec 22, 2011 at 12:19

answered Dec 21, 2011 at 21:45

Raynos

170k57 gold badges359 silver badges399 bronze badges

4 Comments

jondavidjohn Over a year ago

This is far uglier and verbose then the OP's own solution, not to mention the added need for a polyfill to account for any IE < 9 ...developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…

Raynos Over a year ago

@jondavidjohn it can be polyfilled to work in IE6+ and all other major browsers

RobG Over a year ago

+1 for posting the obvious alternative. But I agree that the original is more elegant (provided the assignment of a String to Name.prototype is removed). I never understood the need for Object.create, it's a Crockfordism.

Raynos Over a year ago

@RobG I prefer to not think in terms of constructors. Constructors are ugly, all you need is a prototype object. The only thing that's ugly with the Object.create solution is that instantiation and initialization is a two step thing

Collectives™ on Stack Overflow

JavaScript prototypal inheritance: succinct syntax?

3 Answers 3

11 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related