5

私はフロントエンドよりもバックエンド派ですが、JavaScript に興味をそそられます。私は、オブジェクトをモデリングする複数の異なる方法のように思われるものに頭を悩ませようとしています。

過去数年間、私は主に次のようなコードを書いてきました (jQuery が読み込まれていると仮定します)。

var TicketForm = {

    elements: ['input', 'textarea', 'select', 'checkbox'],

    enable: function(form) {
        this.elements.forEach( function(el) {
            form.find(el).prop('disabled', false);
        });
    },

    disable: function(form) {
        this.element.forEach( function(el) {
            form.find(el).prop('disabled', true);
        });
    }
};

このようにTicketForm.enable($('#whatever'));して、PHP の静的メソッド呼び出しと非常によく似た、特定のフォームを有効にするために呼び出すことができます。

私は最近、PHP でクロージャーをいじっていますが、それらが JavaScript にも存在する (そして私はそれらを使用している) ことを認識しています。私はその概念をより徹底的に理解しようとしています。http://codepen.io/stuffit/pen/KrAwxという素晴らしいスクリプトに出くわした後、私はその作者のコーディング スタイルを模倣する努力をしたいと思いました。彼のスタイルをコピーしようとして、コードを次のように書き直しました。

var TicketForm = function() {
    this.elements = ['input', 'textarea', 'select', 'checkbox'];
};

TicketForm.prototype.enable = function(form) {
    this.elements.forEach( function(el) {
        form.find(el).prop('disabled', false);
    });
};

TicketForm.prototype.disable = function(form) {
    this.elements.forEach( function(el) {
        form.find(el).prop('disabled', true);
    });
};

ただし、この場合に呼び出すとTicketForm.enable($('#whatever'));、エラーが発生します

Uncaught TypeError: Object function () {
    this.elements = ['input', 'textarea', 'select', 'checkbox'];
} has no method 'enable'

だから私はSOを少し掘り下げて、JavaScript .prototypeの仕組みを見つけましたか? . 特に 2 番目の回答は非常に啓発的です。私はプロトタイプ コンセプトのバックグラウンドではなく、クラス コンセプトのバックグラウンドを持っているからです。http://ejohn.org/apps/learn/#65のスライドも参考になりました。私がしなければならなかったのは、TicketForm のインスタンスを作成することだけだったことがわかりました。その時点で、そのメソッドが利用できるようになりました。

var myForm = new TicketForm();
myForm.enable(form); // works as expected

3 つの質問があります。

  1. 個人的なコーディング スタイルは別として、なぜ上記の方法のいずれかを選択するのでしょうか。
  2. 最初のメソッドでは宣言しないのに、2 番目のメソッドではオブジェクトのインスタンスを宣言する必要があるのはなぜですか?
  3. これらのコーディング スタイルのいずれかに適切な名前はありますか?
4

3 に答える 3

3

最初のメソッドはオブジェクト リテラルを定義し、基本的に「シングルトン」を作成します。同じ「クラス」の複数のインスタンスが必要な場合は、コンストラクター関数 (またはObject.create) が必要です。

于 2013-06-19T20:45:45.637 に答える