Jakie są odpowiednie zastosowania tych różnych metod tworzenia obiektów w JavaScript

Question

Jestem bardziej facetem z back-endu niż facet z przodu, ale JavaScript intryguje mnie. Próbuję objąć moją głowę czymś, co wydaje mi się być różnymi metodami modelowania obiektów.

W ciągu ostatnich kilku lat byłem głównie został kod, który wygląda podobnie do tego na piśmie (zakładamy jQuery jest załadowany):

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

ten sposób można po prostu zadzwonić TicketForm.enable($('#whatever')); włączyć żadnej szczególnej formy, bardzo podobne do wywołania metody statycznej w PHP.

Ostatnio grałem z zamknięciami w PHP i jestem świadomy, że one istnieją (i używam ich) również w JavaScript. Staram się głębiej zrozumieć tę koncepcję. Po obejrzeniu tego niesamowitego skryptu: http://codepen.io/stuffit/pen/KrAwx, zdecydowałem, że chcę się starać naśladować styl kodowania tego autora. Tylko próbuje kopiować jego styl, przepisałem mój kod tak:

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

Jednak, kiedy zadzwonić TicketForm.enable($('#whatever')); w tym przypadku pojawia się błąd

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

więc zrobiłem trochę kopanie na SO i znaleziono How does JavaScript .prototype work?. Druga odpowiedź jest szczególnie pouczająca, ponieważ pochodzę z tła koncepcji klasowej, a nie z koncepcji prototypowej. Przeanalizowałem także kilka z tych slajdów: http://ejohn.org/apps/learn/#65, co również było pomocne. Okazuje się, że wszystko, co musiałem zrobić, to utworzyć instancję TicketForm, w których razem jest to metody stały się dostępne do mnie:

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

Mam trzy pytania:

1. Dlaczego, oprócz osobistego kodowania styl, czy wybrać jedną z powyższych metod zamiast drugiej?
2. Dlaczego muszę zadeklarować instancję obiektu drugą metodą, a nie pierwszą?
3. Czy są odpowiednie nazwy obu tych stylów kodowania?

Answer 1

W obiektach JavaScript domyślnie są one zmienne. Oznacza to, że jeśli nie używasz nowoczesnego silnika JavaScript i ktoś celowo uniemożliwiał modyfikowanie obiektu, zawsze możesz dodawać, usuwać i modyfikować właściwości w obiekcie.

W pierwszym przypadku używasz specjalnej składni, która upraszcza tworzenie obiektów. Składnia {} tworzy prosty obiekt, który jest nie więcej niż instancją Object. To, w połączeniu z zmienności obiektów w JS oznaczają następujące fragmenty są równoważne:

var TicketForm = { 
    elements: ['input', 'textarea', 'select', 'checkbox'] 
}; 

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

var TicketForm = new Object(); 
TicketForm.elements = ['input', 'textarea', 'select', 'checkbox']; 

Zasadniczo pomocą {} jest podobna do tworzenia wystąpienie obiektu w klasycznym języku OOP podczas tworzenia konstruktor jest podobne do używania klasy.W funkcji konstruktora i jego prototypie definiujesz plan, który przyjmie wszystkie instancje tej funkcji konstruktora (wszystkie obiekty, które dzielą ten prototyp).

Nie chodzi więc o styl, ale o to, co trzeba stworzyć. Jeśli potrzebujesz wielu kopii tej samej rzeczy, użyjesz funkcji konstruktora. Jeśli potrzebujesz tylko jednego, po prostu utwórz zwykły obiekt, nie musisz przestrzegać etykiety, zrób singleton i podpisuj wszystko potrójnie;)

Answer 2

Twoja pierwsza metoda definiuje obiekt dosłownie, tworząc po prostu "singleton". Jeśli potrzebujesz wielu wystąpień tej samej "klasy", potrzebujesz funkcji konstruktora (lub Object.create).

Answer 3

Pierwsza metoda to "obiekt miotowy", zupełnie jak klasa statyczna, " ten "odnosi się do obiektu nadrzędnego" TicketForm ", możesz go zrozumieć jak" self ". W drugiej metodzie „to” odnosi się do okna, to nie oo, chyba że zrobić:

var myForm = new TicketForm(); 

tutaj „to” odnosi się do instancji MyForm. Ta metoda jest metodą "konstruktora" (TicketForm jest konstruktorem)