2

I need to be able to add many functions to a Javascript class and I thought that you could do that with the className.prototype = function(){} but maybe I was not correct on this.

  Car.prototype.toAnotherString = function () {
    return this.model + " has done " + this.miles + " miles";
  };

Question: Ist he prototype declared correctly in this class and can the class Car be declared some how with out the function name>

function Car( model, year, miles ) {

  this.model = model;
  this.year = year;
  this.miles = miles;

  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };

  Car.prototype.toAnotherString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}

var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );

console.log( civic.toString() );
console.log( mondeo.toString() );
console.log( civic.toAnotherString() );
console.log( mondeo.toAnotherString() );

New Code:

So is this how the prototype should be added.

function Car( model, year, miles ) {

  this.model = model;
  this.year = year;
  this.miles = miles;

  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}

 Car.prototype.toAnotherString = function () {
    return this.model + " has done " + this.miles + " miles";
 };
Improve this question
4
  • 2
    Yes you can do that, but declaring them inside the constructor itself will make it so you overwrite it each time a new instance is made. Commented Apr 1, 2014 at 18:22
  • "can the class Car be declared some how with out the function name" what is that supposed to mean? Commented Apr 1, 2014 at 18:23
  • 1
    Just to clarify nomenclature, there are no classes in javascript. What you have here is a constructor function that will create new Car instances when used with the keyword 'new'. Commented Apr 1, 2014 at 18:24
  • What I mean can I create a object with out the word function in it more like the C++ or Java style code? Commented Apr 1, 2014 at 18:49

2 Answers 2

Reset to default
2

No, it's not: the line defining a method on Car.prototype should be placed separately:

function Car (model, year, miles) {
  this.model = model;
  this.year = year;
  this.miles = miles;

  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}

Car.prototype.toAnotherString = function () {
    return this.model + " has done " + this.miles + " miles";
};

See, the major advantage of prototypes is ability to create a method function just once. But in your code, this line will be executed each time the Car constructor is called, creating a new instance of the function again and again. And that defeats the purpose of prototype.

But how this function will know about the object it's called for, you may ask? That's done with so-called function context trickery. See, when you call civic.toAnotherString(), inside toAnotherString this object will be referring to the same object as civic. And when you call mondeo.toAnotherString(), this will refer to the same object as mondeo.

But wait, there's more! You can call this method off one object, yet pass another one as its context (i.e., this):

civic.toAnotherString.call(mondeo); // or .apply(mondeo)

And, lo and behold, even though the method seems to belong to civic object, it'll actually act as though it was attached to mondeo one.

This - ability to switch this inside a method - is one of the most powerful JS features. I'd suggest studying this (really, no pun intended) tutorial on MDN up-to-bottom, as well as corresponding articles on Function.call, Function.apply and Function.bind.

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

2 Comments

I just read quickly on the call and apply function but I did not really get the part where there is a this in the parameter list. Can you explain that a bit.
Check that example in my answer using call - because mondeo is passed there as a first param, it's mondeo object that will be considered this within toAnotherString - not civic (or anything else).
2

Prototyping should be done outside of the initializing function, like this:

function Car( model, year, miles ) {

  this.model = model;
  this.year = year;
  this.miles = miles;

  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}

Car.prototype.toAnotherString = function () {
    return this.model + " has done " + this.miles + " miles";
};
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.