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 来转译你的代码。

话虽如此，这就是您在 JavaScript 中编写 class OOP 方式的方式。

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