Javascript - transform object in class

Question

I'm new in JS and i'm used to traditional OOP languages, so i'm having a hard time making some things work properly.

Here is my example :

var myObject = {
prop:'something'; 
callme:function () {
  console.log('you called me');
  }
}

firstObj = myObject;
firstObj.prop1 = 'new thing';

secondObj = myObject;
secondObj.prop1 = 'second thing';

Obviously the 'secondObj' overrides what 'fristObj' did before. How can i convert the 'myObject' object so it can work like a class , so i can create individual new instances of it ?

Thanks !

possible duplicate of [Constructors in JavaScript objects](http://stackoverflow.com/questions/1114024/constructors-in-javascript-objects) — William Barbosa, Sep 04 '15 at 17:20
This reading really helped me out. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects — Ernesto, Sep 04 '15 at 17:25

score 3 · Accepted Answer · answered Sep 04 '15 at 17:22

To create a 'class' in javascript you create a function which by convention has its first character capitalized.

function MyClass() { }

var obj = new MyClass();

To attach methods to this you add it to MyClass's prototype.

MyClass.prototype.callme = function () {
  console.log('you called me');
}

To add properties use this to refer to this instance of the class.

function MyClass() { 
  this.prop = 'something';
}

So all together:

function MyClass() { 
  this.prop = 'something';
}

MyClass.prototype.callme = function () {
  console.log('you called me');
}

// Remember to use var to declare variables (or they are global)
var firstObj = new MyClass();
firstObj.prop = 'new thing';

var secondObj = new MyClass();
secondObj.prop = 'second thing';

score 2 · Answer 2 · answered Sep 04 '15 at 17:32

There is a style of JS programming where you just make objects and functions which return objects. In your case, make myObject into a function which returns the hash. It will return a new one each time it's called.

var myObject = function() {
  return {
    prop: 'something'; 
    callme: function () {
      console.log('you called me and prop is', this.prop);
    }
  };
}

firstObj = myObject();
firstObj.prop1 = 'new thing';
firstObj.callme();

secondObj = myObject();
secondObj.prop1 = 'second thing';
secondObj.callme();

Quentin Roy · Answer 3 · 2015-09-04T18:04:45.797

2

In addition to the two good answers you already have, I wanted to point out that if you are ready to use edge stuff, ES6, the next JavaScript spec, includes classes.

Using transpilers like babel, you can already write ES6 code then compile it so that it can run on all browsers. It works increadibly well, especially when combined with tools like webpack that automates the process, and raises more and more adepts. It is the future, and clearly worse a try (classes are just the tip of the iceberg).

You can read more on ES6 classes here. Here is one of the example they give:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width;
  }
}

edited Sep 04 '15 at 18:04

answered Sep 04 '15 at 17:39

Quentin Roy

7,677
2
32
50

`class` in ES6 is just a syntax sugar. +1 though. – Vidul Sep 04 '15 at 18:21
Yes (except for the `super` keyword). But syntax, sometimes is everything. Especially when you are talking about hand-made classes in JS, a subject that raises so much discussion and for which no elegant solution exists. Look at Daniel's answer, come on! Let's talk about readability :). – Quentin Roy Sep 04 '15 at 18:39

score 0 · Answer 4 · answered Sep 04 '15 at 18:12

A theoretical answer to a practical question. JavaScript is more traditional (take for example SmallTalk - one of the JavaScript grandparents) in terms of OOP than most of the current OOP languages. It is prototype-based, meaning that objects inherit from other objects. The constructor function is an unpleasant legacy (also called "classical inheritance") for the sake of typical OOP class imitation (in the way class is just a fabric for objects in most popular OOP, the typical JavaScript object is a fabric for other object). Analogous example could be the Io language (given for simplicity). IMO there is no need for separate objects' fabrics like class.

Javascript - transform object in class

4 Answers4