Javascript Custom Object is Generic

Question

I am trying to maximize the reuse of some code. On my custom javascript object (I'll use PhoneNumber as an example for the sake of simplicity), I am setting a prototype function like this:

var Map = {
    write: function() {
        alert('My object is ' +this);
    }
};

function PhoneNumber(number) {
    this.number = number;
}

PhoneNumber.prototype = Map;

//I can call the write function like so
var phoneObject = new PhoneNumber('1234567894');
phoneObject.write(); //ALERT My Object is Object{number:'1234567894'}

Everything works fine except for the fact that for some reason it turns my Phone Number object into a generic Object instead of keeping its PhoneNumber constructor. If I actually place the write function inside the objects prototype like this, it works perfectly.

function PhoneNumber(number) {
    this.number = number;
}

PhoneNumber.prototype.write = function() {
    alert('My object is ' +this);
}

var phoneObject = new PhoneNumber('1234567894');
phoneObject.write(); //ALERT My object is PhoneNumber{number:'1234567894'}

But I'd really rather not have to do it this way because multiple objects use the write function and they all perform the exact same way. How can I avoid my objects converting themselves into generic constructors? Apparently I'm setting the Map object on the prototype the wrong way, but its quite important that I not have to copy the code directly from Map into the object prototype function. Any ideas?

This proves why the whole new/.constructor/.prototype thing is a big mess and a really leaky syntax sugar for the elegant prototype inheritance mechanism underneath, and Object.create is the true way to go. QED :) — Kos
– Kos, Commented Jan 11, 2012 at 15:08

Raynos · Accepted Answer · 2012-01-11 15:02:17Z

2

You forgot to set PhoneNumber.prototype.constructor

When you do PhoneNumber.prototype = Map you destroy the constructor property

PhoneNumber.prototype = Map;
PhoneNumber.prototype.constructor = PhoneNumber;

Of course that won't work because your just doing Map.constructor = PhoneNumber which breaks if you use Map as multiple prototypes. So you should just have PhoneNumber inherit from map

PhoneNumber.prototype = Object.create(Map, {
  constructor: { value: PhoneNumber }
});

answered Jan 11, 2012 at 15:02

Raynos

170k57 gold badges359 silver badges399 bronze badges

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

5 Comments

ryandlf Over a year ago

Is Object.create() a cross browser solution? I'm having a little trouble understanding how it works?

Raynos Over a year ago

@ryandlf Object.create cross browser -> yes, legacy browser -> no.

ryandlf Over a year ago

Why is it a better option to use your Object.create method as opposed to the way Umesh is doing it in another answer? I'm just curious and trying to fully understand the whole Object.create thing. It seems to me that Object.create is more or less used to replace the "new" keyword when creating new objects, not adding functions to an existing prototype. With your method, I will still be able to call phoneObj.write()?

Raynos Over a year ago

@ryandlf Object.create does not invoke the constructor. phoneObj.write() still works

ryandlf Over a year ago

Just got a chance to test. And this method is the only one that works. Thanks.

Community · Accepted Answer · 2017-05-23 10:24:22Z

0

I get My object is [object Object] with both versions in Firefox.

You might want to take a look at this older post:

How do I get the name of an object's type in JavaScript?

Specficially, the part about the constructor and checking for object type using instanceof. Remember that there is no such thing as a class in JavaScript, so once you instantiate an object it really has no sense of 'type,' and things like instanceof are sort of hacks to get around this.

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Jan 11, 2012 at 14:45

Jonathan Rich

1,73810 silver badges11 bronze badges

1 Comment

ryandlf Over a year ago

Getting My Object is Object is what I do not want. It should be PhoneNumber (or whatever constructor I am using). I know how to get the constructor name, that is the problem is I can't get the actual constructor because for some reason it converts it to a generic object.

Umesh Patil · Accepted Answer · 2012-01-11 14:58:02Z

0

function PhoneNumber(number) {
    this.number = number;
}
var Map={
    write:function(){        
        console.log('My object is ' +this.number);
    }
}
PhoneNumber.prototype.write = Map.write;

var phoneObject = new PhoneNumber(1234567894);
phoneObject.write();

It works here. but here, By any way you need to tell the Map object that Object has number as its variable.

answered Jan 11, 2012 at 14:58

Umesh Patil

10.7k16 gold badges56 silver badges81 bronze badges

Comments

Shlomi Schwartz · Accepted Answer · 2012-01-11 14:55:36Z

-1

It seems that the Object returned is PhoneNumber just without a toString method. Try this:

var Map = {
    write: function() {
        alert('My object is ' +this);
    }
};

function PhoneNumber(number) {
    this.number = number;
    this.toString = function(){return "PhoneNumber"}
}

PhoneNumber.prototype = Map;

//I can call the write function like so
var phoneObject = new PhoneNumber('1234567894');
phoneObject.write(); //ALERT My Object is Object{number:'1234567894'}

answered Jan 11, 2012 at 14:55

Shlomi Schwartz

8,95330 gold badges121 silver badges201 bronze badges

Collectives™ on Stack Overflow

Javascript Custom Object is Generic

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related