o-o o-o - 4 years ago 88
Javascript Question

Defining properties on object or on object.prototype?

I've recently seen JavaScript-code in which getter- and setter-methods where defined on the prototype-object on a constructor method.

For example:

Person.prototype.getFirstName = function() {
return this.firstName;
}


Is this correct?

I mean:
'this' points to the describer of the the object upon which the method was called.

What happens when I call ...

console.log(Person.getFirstName());


... without making an object prior?

Moreover:

Is there a general rule when to attach properties to the constructor-method and when to attach to the prototype-object?

From my view is attaching to the prototype correct if you don't necessarily have to create an object. Because the method doesn't use values of an object which have to set object-individually.

Answer Source

What happens when I call ...

console.log(Person.getFirstName());

... without making an object prior?

You get an error, Person has no getFirstName property.

Is there a general rule when to attach properties to the constructor-method and when to attach to the prototype-object?

Yes:

If you want the method to be available on objects created via the constructor function (e.g., on obj in var obj = new Person()), put the method on the constructor function's prototype object (shared) or assign the method to the object within the constructor by assigning to a property on this (not shared).

If you want the method to be available on the constructor function itself, the way some of the built-in JavaScript methods are (like Date.parse or Object.create), assign it to a property on the constructor:

Person.doSomething = function() {
    // ...
};

Those methods are not specific to objects created by the constructor (this within them is a reference to the constructor function itself, unless you do something to make it different).

If you're coming from a class-based language, a very loose analogy is that properties (including methods) you assign to the prototype object on the constructor or to this within the constructor are instance properties, and ones you assign to the constructor itself are static properties. It's a very loose analogy, but sometimes helpful.

Here's a full example in the old ES5 and earlier syntax:

function Person(name) {
    this.getName = function() {
        return name;
    };
}
Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.getName());
};
Person.copy = function(other) {
    return new Person(other.getName());
};

// Usage example
var joe = new Person("Joe");
joe.sayHello();
console.log("joe's name is " + joe.getName());
var joeagain = Person.copy(joe);
joeagain.sayHello();

In the above:

  • getName is available on instances created by new Person. It's created separately for each object and is not shared with other instances. It lets us get the person's name, which in this example is read-only.

  • sayHello is available on instances created by new Person because they inherit it from their prototype, which is assigned to them by new Person from the Person.prototype property. It's shared between instances.

  • copy is not available on instances (joe.copy() would be an error), it's a property on Person itself. In this case we use it to copy instances, but it could be for anything.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download