Javascript constructor functions vs Typescript classes

Question

I've recently started learning Javascript and trying to wrap my head around few important concepts. As per my understanding till now, Javascript does not have classes, it uses constructor functions instead of classes to create blueprint for the objects. Example:

// javascript code
var Car = function() {
  // this is a private variable
  var speed = 10;

  // these are public methods
  this.accelerate = function(change) {
    speed += change;
  };

  this.decelerate = function() {
    speed -= 5;
  };

  this.getSpeed = function() {
    return speed;
  };
};

// typescript code
class Car {

  public speed: number = 10;

  public acceleration(accelerationNumber: number): void {
    this.speed += accelerationNumber;
  }

  public decelerate(decelerateNumber: number): void {
    this.speed += decelerateNumber;
  }

  public getSpeed(): number {
    return this.speed;
  }
}

The above Typescript code makes much more sense because we have a class that creates a blueprint for that class objects. But, in Javascript this blueprint is being created with a function. So does that mean constructor function in Javascript does the same thing that classes does in Typescript/Java/etc.?

Those two aren't exactly equivalent. The Javascript version should be using the prototype to define the methods and put speed on this.speed. — deceze
– deceze ♦, Commented May 3, 2017 at 12:17
Yes. Your "class" will be transformed int function(){} which will be called with keyword new. This is smth like syntax sugar. But in ES6 classes will be come as standard (bu as a sugar also). googlechrome.github.io/samples/classes-es6 — Drag13
– Drag13, Commented May 3, 2017 at 12:17
"Javascript does not have classes" - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Are you referring to literally or that the implementation of javascript classes is architecturally different to other languages? — Zze
– Zze, Commented May 3, 2017 at 12:22

deceze · Accepted Answer · 2017-05-03 12:22:47Z

1

The correct equivalent to that Typescript class would be:

var Car = function () {
  this.speed = 10;
};

Car.prototype.accelerate = function (change) {
  this.speed += change;
};

Car.prototype.decelerate = function () {
  this.speed -= 5;
};

Car.prototype.getSpeed = function () {
  return this.speed;
};

The Car function, the constructor function, is basically what constructor() is in a class; it is what is executed to initialise a new instance. All functions on prototype are the other methods defined inside the class shared by all instances.

answered May 3, 2017 at 12:22

deceze♦

525k89 gold badges806 silver badges954 bronze badges

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

3 Comments

Aiguo Over a year ago

Thanks @deceze! But if we have a constructor function 'Car', where is the class defined then? Because as per my knowledge, the constructor functions are used to create new objects of a class. Where is the class defined in this case?

deceze Over a year ago

It isn't. The magic is in the new keyword. It constructs a new object, initialises it with the constructor function, and ensures that it inherits things from prototype. This really isn't much different from what happens in most other OO languages, it's just not expressed with a syntax that uses the keyword class. You're actually seeing a bit more in detail how the sausage gets made in Javascript.

Allan Over a year ago

The prototype object acts as the template. developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/…

Collectives™ on Stack Overflow

Javascript constructor functions vs Typescript classes

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related