JavaScript OOP - notation confusion

Question

I would like to know what's the difference between these notations :

function Forms (formSelector) {
  this.id;
  this.formSelector = formSelector;
}

Forms.prototype.getAll = function () { return $(this.formSelector) } // get all forms in a JQuery object

Forms.prototype.get = function () { return $(this.getAll()).get(this.id) }

And

function Forms (formSelector) {
  this.id;
  this.formSelector = formSelector;

  this.getAll = function () { return $(this.formSelector) }
  this.get = function () { return $(this.getAll()).get(this.id) }
}

Or even

function Forms (formSelector) {
  this.id;
  this.formSelector = formSelector;

  this.getAll = $(this.formSelector);
  this.get = $(this.getAll()).get(this.id);
}

I can even write something like this:

var Forms = {
  constructor: function (formSelector) {
    this.formSelector = formSelector;

    return this.formSelector;
  },

  setId: function (id) { if (!isNaN(id) this.id = id; }

  getAll: function () {
    return $(Forms.constructor.formSelector); // this should work I think ?
   }
}

This is so confusing to me, I don't quite get to figure out what's the best and more optimized way to write my objects, in terms of speed and clarity, and to encapsulate their methods and properties.

In any case, it seems that I can modify my properties by just stating something like:

var test = new Forms('.forms');

test.id = 10;
test.getAll = 'something';

// What I want is something like :

test.setId(10) // and test.id = X shouldn't work

Thanks!

@Rajesh The accepted answer responds to this exact thing. At least the first two examples. — Phiter, Nov 13 '18 at 13:39
*At least the first two examples* means there is something that it does not answer — Rajesh, Nov 13 '18 at 13:40
The third example is different because you're returning an object, not a function. So this object can be changed as wherein the function you can't modify the function's object directly if it's created in the function itself. — Phiter, Nov 13 '18 at 13:40
@Rajesh should mark more than one question as duplicate then — Phiter, Nov 13 '18 at 13:41
Related [Prototypical inheritance - writing up](https://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711) — str, Nov 13 '18 at 13:42
@Snyte: this conversation has shown that there are a number of related answers on SO. I personally would not have closed this one based on the answers I've seen here. There is plenty of information on the web: https://duckduckgo.com/?q=prototypal+vs+classical+inheritance+javascript. Be careful in reading those; there is a variety of biases shown in such articles. Be sure to read several. — Scott Sauyet, Nov 13 '18 at 13:51
"More optimized" how? For CPU usage? Memory use? Memory fragmentation? "Best" is in the eye of the beholder. I would use `class` instead of any of those notations, but that's my opinion. Without an objective measure, there's no way to say which one is "best". Or are you just looking for the behavioral differences? Please [edit] your question to make it clear what you're looking for from answers. — Heretic Monkey, Nov 13 '18 at 13:57
@HereticMonkey In terms of speed, of memory use, and clarity for myself and in the long term, for others developpers. I am also trying to figure out why one should use one notation instead of another. I edited my post — Snyte, Nov 13 '18 at 14:07
Thank you for the other answers, I'll check out the links you gave me, though it's really hard to actually make an opinion and get a clear answer with the numerous informations on the internet — Snyte, Nov 13 '18 at 14:08

score 0 · Answer 1 · answered Nov 13 '18 at 14:21

It's 2018 and almost all browsers support ES6 classes now, except IE 11 of course. But you can use babel to transpile your code if you want to support older browsers.

That being said, this is how you'd write a class OOP way in JavaScript.

class Form {
    constructor(formSelector) {
      this.id = 'default value';
      this.formSelector = formSelector;
      // probably also check if $ is defined
    }

    // you can use getter method
    get id() {
      return this.id;
    }

    // you can use setter method
    set id(idVal) {
      this.id = idVal;
    }

    get formSelector() {
      return this.id;
    }

    set formSelector(val) {
      this.formSelector = val;
    }

    getAll() {
      return $(this.formSelector);
      // whatever getAll is supposed to return
    }
}

You would use this class as

const myForm = new Form('form-selector-value');

// no brackets for getter and setter
const formId = form.id; // get id value
form.id = 'some-val'; // set id value

form.getAll(); // invoke the get all method

// you can change the formSelector anytime for `form` variable
form.formSelector = 'some-value';

Thank you, this is good to know and it looks more like what I know. Unfortunatly I can't use this notation until IE supports it. I try to keep my code as simple as possible so that most browsers will support it, this means that I try not to use any library other than JQuery. — Snyte, Nov 13 '18 at 14:41

JavaScript OOP - notation confusion

1 Answers1