I am reading through Javascript: The Good Parts, and struggled to get my head around the section on prototypes.

After a little google, I came to the conclusion that it is to add properties to objects after the objects declaration.

Using this script gleamed from w3schools, I noticed that removing the line adding the prototype property had no effect. So what is the point?


function employee(name,jobtitle,born)

var fred=new employee("Fred Flintstone","Caveman",1970);
employee.prototype.salary=null; //  <---  try removing this line



That's not how the prototype works. The prototype is used in the prototype chain.

Whenever you try to get a property on an object it will check the object for that property name. If it does not exist it will look in the prototype.


var o = {
  "foo": "bar",
  "method": function() { ... }

var o2 = Object.create(o);
var o3 = Object.create(o);

console.log(o2.hasOwnProperty("foo")); // false
console.log(o2.foo); // "bar"
console.log(o2.__proto__ === o); // true
o.baz = "foobar";
console.log(o2.baz); // "foobar"

So the point of the prototype is simply code re-use and inheritance.

| improve this answer | |
  • Okay, so I get this now. But I tried to add a property dynamically, and it is telling me prototype is undefined --- o.prototype.newProp = "mutts nuts"; – Mild Fuzz Sep 6 '11 at 13:35
  • 3
    @MildFuzz o is an object. The .prototype property is used on functions, ignore it. Just do o.newProp = "mutts nuts" – Raynos Sep 6 '11 at 13:36

When you did fred.salary=20000 you have added the salary attribute only to fred. When using prototype, all employees you will create from then on will have the salary attribute.

Say you have 100 instances of employees, and you wanted to add a salary attribute to all of them. You could to it manually, iterate over each employee and add it. Or you could use prototype and set if for all of them.

Prototype is useful when you want to functionality to something that already exists. Say you want to add a custom method to arrays. You would do something like:

Array.prototype.my_custom_method = function() {...}

From there on, all the arrays you will create, will have that method available.

| improve this answer | |
  • 3
    I'm surprised that no-one has mentioned that this is designed to keep memory use down. If you need to implement a complex object that has a lot of code, you don't want the code to be repeated in every instance of the object. Obviously, data properties are more likely to be different in each instance, but you usually only want one copy of the code, so you put it in the prototype. – Dominic Cronin Sep 7 '12 at 14:10
  • 1
    IMO this is the best answer by far. – The Muffin Man Sep 10 '12 at 4:50

You may want to take a look at this article.

A prototype-based language has the notion of a prototypical object, an object used as a template from which to get the initial properties for a new object. Any object can specify its own properties, either when you create it or at run time. In addition, any object can be associated as the prototype for another object, allowing the second object to share the first object's properties.

If you add a property to an object that is used as the prototype for a set of objects, the objects for which it is the prototype also get the new property.

That's one of the main advantages of a prototype-based language over class-based ones.

Also, it's easy to get a classical OO inheritance with JS if you need to, but it's often difficult to get a prototype-model for a language which doesn't implement it by default.

| improve this answer | |
  • 3
    +1 for class-based vs. prototype-based languages article – adivasile Sep 6 '11 at 13:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.