Pytanie w sprawie object, oop, javascript – Jaki jest właściwy sposób tworzenia klasy Javascript?

9

Próbuję dowiedzieć się, jak poprawnie skonstruować moje klasy Javascript (lub obiekty singleton).

var obj = new Object();
obj.foo = 'bar';
obj.method = function() { ...}

var obj = {
    foo : 'bar',
    method : function() { ...}
}

var obj = function(){}
obj.prototype = {
    foo : 'bar',
    method: function() { ... }
}

Chcę być w stanie ustawić kilka właściwości i przypisać dostępne metody. Chciałbym również móc korzystać z takich rzeczy jakmixiny na przedmiotach, abym mógł rozszerzać te obiekty na takie rzeczywydarzenia.

i nowa tablica oraz nowy numer i nowy ... Lepiej użyć literału elclanrs
Czy to nie ironia, że ​​przekazujesz ciąg literałunew String konstruktor? Niet the Dark Absol
Zasada # 1: Nigdy nie używajnew Object(). Ry-
@Xeoncross - Oni również zrobilinew Boolean() ;) Derek 朕會功夫

Twoja odpowiedź

4   odpowiedź
8

Próbuję dowiedzieć się, jak poprawnie skonstruować moje klasy Javascript (lub obiekty singleton).

Istnieje duża różnica między nimi (obiekty „klasowe” i pojedyncze). Twoje pierwsze przykłady to obiekty jednorazowe (singletony). Twój trzeci (ostatni) przykład tworzyfunkcja konstruktora to pozwoli ci tworzyć wiele obiektów współdzielących ten sam prototyp. Chciałbym polecićzwiększanie prototype właściwość funkcji konstruktora zamiast jej zastępowania podczas wykonywania, np .:

var Thingy = function() {   // Or use a function declaration rather than expression
    // Optional initialization code here
};
Thingy.prototype.foo = 'bar';
Thingy.prototype.method = function() {
    // Method code here
};

(Funkcje konstruktora, zgodnie z konwencją, zaczynają się od wielkiej litery).

Z czego korzystasz (funkcja singleton lub konstruktor) zależy od tego, czego potrzebujesz.

Począwszy od ES2015 (alias „ES6”), jest to prostsze, chociaż nie ma nowej składni do definiowania nieprocesowej właściwości prototypu (twojafoo); prawdopodobnie będzie raz w ES2017 lub ES2018ta propozycja posuwa się naprzód, ale do tego czasu:

class Thingy {
    constructor() {
        // Optional initialization code here
    }
    method() {
    // Method code here
    }
}
Thingy.prototype.foo = 'bar';

Jeśli chcesz dostać się do hierarchii dziedziczenia, w starej składni ES5 jest sporo instalacji hydraulicznej:

var Base = function() {
};
Base.prototype.method = function(arg1) {
    // ...
};

var Derived = function() {
    Base.call(this);
};
Derived.prototype = Object.create(Base.prototype);
Derived.prototype.constructor = Derived;
Derived.prototype.method = function(arg1) {
    // Using Base's `method`, if desired, is a bit ugly:
    Base.prototype.method.call(this, arg1);
};

... dlatego widziałeś biblioteki, które wkraczają, jak PrototypyClass rzeczy lub moje własneRodowód; te są jednak przestarzałe w składni ES2015, co sprawia, że ​​jest to łatwe:

class Base {
    method(arg1) {
        // ...
    }
}
class Derived extends Base {
    method(arg1) {
        // Use's the superclass's `method`, if desired, is easy:
        super.method(arg1);
    }
}

Retytuł twojego pytania:

Jaki jest właściwy sposób tworzenia klasy Javascript?

Istnieje kilka równie poprawnych sposobów tworzenia „klas” obiektów w JavaScript, ponieważ JavaScript jest językiem bardzo elastycznym. Istnieją standardowe funkcje konstruktora, funkcje „budowniczego”,Object.create (w środowiskach obsługujących ES5), które pozwalają na bardziej bezpośrednie dziedziczenie prototypowe i kilka innych. Jedną z największych zalet JavaScript jest możliwość wyboru stylu „klasy”.

1

Jeśli szukasz praktycznego rozwiązania, a nie teoretycznego, lepiej użyj ram.

Backbone.js ma wszystko, czego potrzebujesz, w tym miksy i system zdarzeń.

Jeśli potrzebujesz także widżetów, zastanów się

qooxdooExtJS

Oba zapewniają czystą architekturę i mogą być używane bez widżetów, ale wymagają nieco więcej nauki niż Backbone.

Struktura dziedziczenia, którą zapewniają te struktury, jest bardzo podobna do wspólnej struktury klasowej (myślę, że Java). To dlatego, że tworzą one specjalne obiekty wewnętrznie, które służą jedynie jakoprototypes dla innych, a tym samym przyjąć rolę klas.

Na przykład, kiedy dzwoniszExt.define('MyClass', {extend: 'ParentClass', mixins: foo, ... }), a następnie Ext tworzy afunction "MyClass„i anonimowy obiekt (MyClass.prototype), który zawiera metody, które podałeś.

0

Jeśli celujesz w przeglądarkę lub środowisko obsługujące ES5, możesz to zrobić:

var Person = {
  foo: ...,
  bar: ...
};

var Mike = Object.create(Person, { baz: ... });
1

możesz również użyć czegoś takiego:

function O(x,y) {
   this.x=x;
   this.y=y;
   this.method=function() {...}
   return this;
}

var o=new O(0,0);

Powiązane pytania