Pregunta sobre javascript, object, oop – ¿Cuál es la forma correcta de crear una clase de Javascript?

9

Estoy tratando de averiguar cómo construir mis clases de Javascript (u objetos singleton) correctamente.

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() { ... }
}

Quiero poder establecer un par de propiedades y asignar los métodos disponibles. También me gustaría poder usar cosas comomixins en los objetos para que pueda extender estos objetos con cosas comoeventos.

@Xeoncross: No que yo sepa. :-) T.J. Crowder
@Xeoncross hicieronnew Window también, pero no puedes usarlo;) Niet the Dark Absol
@Xeoncross - Ellos también hicieronnew Boolean() ;) Derek 朕會功夫
y nueva matriz, y nuevo número, y nuevo ... Mejor usar el literal elclanrs

Tu respuesta

4   la respuesta
0

puede hacer esto:

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

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

objetos singleton) correctamente.

Hay una gran diferencia entre esos ("clases" y objetos singleton). Sus primeros ejemplos son objetos únicos (singletons). Su tercer (último) ejemplo crea unfunción constructora Eso te permitirá crear múltiples objetos compartiendo el mismo prototipo. yo recomendariaaumentando laprototype propiedad en la función de constructor en lugar de reemplazarla como lo está haciendo, por ejemplo:

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

(Las funciones del constructor, por convención, comienzan con una letra mayúscula).

Lo que use (función de singleton o constructor) depende de lo que necesite.

A partir de ES2015 (también conocido como "ES6"), es más sencillo, aunque no hay una sintaxis nueva para definir una propiedad de prototipo que no sea un método (sufoo); probablemente habrá en ES2017 o ES2018, una vezesta propuesta Avanza, pero hasta entonces:

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

Si necesita ingresar a las jerarquías de herencia, en la antigua sintaxis de ES5 hay un poco de plomería involucrada:

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

... por lo que solías ver las bibliotecas entrando, como Prototype'sClass cosas, o las miasLinaje; Sin embargo, esos están desactualizados por la sintaxis de ES2015, lo que lo hace bastante fácil:

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

Re eltítulo de tu pregunta:

¿Cuál es la forma correcta de crear una clase de Javascript?

Hay varias formas igualmente correctas de crear "clases" de objetos en JavaScript, porque JavaScript es un lenguaje muy flexible. Hay funciones estándar de constructor, funciones "constructor",Object.create (en entornos habilitados para ES5) que le permite realizar una herencia prototípica más directa, y varios otros. Una de las mejores cosas de JavaScript es que puedes elegir tu estilo de "clase".

1

También puedes usar algo como:

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

var o=new O(0,0);
1

es mejor que use un marco.

Backbone.js tiene todo lo que necesita, incluyendo mixins y un sistema de eventos.

Si necesita algunos widgets también, considere

qooxdooExtJS

Ambos proporcionan una arquitectura limpia y pueden usarse sin widgets, pero requieren un poco más de aprendizaje que Backbone.

La estructura de herencia que proporcionan estos marcos se parece mucho a la basada en clases comunes (piense en Java). Eso es porque crean objetos especiales internamente que simplemente sirven comoprototypes para los demás, y así asumir el papel de las clases.

Por ejemplo, cuando llamasExt.define('MyClass', {extend: 'ParentClass', mixins: foo, ... }), entonces Ext crea unfunction "MyClass", y un objeto anónimo (MyClass.prototype) que contiene los métodos que ha proporcionado.

Preguntas relacionadas