JavaScript OOP - путаница в обозначениях

Question

Я хотел бы знать, в чем разница между этими обозначениями:

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) }

И

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

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

Или даже

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

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

Я даже могу написать что-то вроде этого:

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 ?
   }
}

Это меня так смущает, что я не совсем понимаю, каков наилучший и более оптимизированный способ написания моих объектов, с точки зрения скорости и ясности, и инкапсулировать их методы и свойства.

В любом случае кажется, что я могу изменить свои свойства, просто указав что-то вроде:

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

Спасибо!

Answer 1

Сейчас 2018 год, и почти все браузеры теперь поддерживают классы ES6, кроме, конечно, IE 11.Но вы можете использовать babel для переноса кода, если вы хотите поддерживать старые браузеры.

При этом, как вы написали бы class ООП в 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
    }
}

Вы бы использовали этот класс как

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