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 !

This reading really helped me out. developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… — Ernesto
– Ernesto, Commented Sep 4, 2015 at 17:25

Daniel Imms · Accepted Answer · 2015-09-04 17:22:22Z

3

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';

answered Sep 4, 2015 at 17:22

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

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

Comments

user663031 · Accepted Answer · 2015-09-04 17:32:08Z

2

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();

answered Sep 4, 2015 at 17:32

user663031

Comments

Quentin Roy · Accepted Answer · 2015-09-04 18:04:45Z

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 4, 2015 at 18:04

answered Sep 4, 2015 at 17:39

Quentin Roy

7,9272 gold badges34 silver badges52 bronze badges

2 Comments

Vidul Over a year ago

class in ES6 is just a syntax sugar. +1 though.

Quentin Roy Over a year ago

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 :).

Vidul · Accepted Answer · 2015-09-04 18:12:28Z

0

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.

answered Sep 4, 2015 at 18:12

Vidul

10.6k2 gold badges20 silver badges20 bronze badges

Collectives™ on Stack Overflow

Javascript - transform object in class

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related