Pergunta sobre object, oop, javascript – Qual é a maneira correta de criar uma classe Javascript?

9

Eu estou tentando descobrir como construir minhas classes de JavaScript (ou objetos singleton) corretamente.

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

Eu quero ser capaz de definir um par de propriedades e atribuir os métodos disponíveis. Eu também gostaria de poder usar coisas comomixins nos objetos para que eu possa estender esses objetos com coisas comoeventos.

@Xeoncross: Não que eu saiba. :-) T.J. Crowder
@Xeoncross - Eles também fizeramnew Boolean() ;) Derek 朕會功夫
e novo Array, e novo Número, e novo ... Melhor usar o literal elclanrs
@minitech, tem certeza? Eles devem ter feito isso por algum motivo. Xeoncross

Sua resposta

4   a resposta
1

é melhor usar um framework.

Backbone.js tem tudo que você precisa, incluindo mixins e um sistema de eventos.

Se você precisar de alguns widgets também, considere

qooxdooExtJS

Ambos fornecem uma arquitetura limpa e podem ser usados ​​sem widgets, mas requerem um pouco mais de aprendizado do que o Backbone.

A estrutura de herança que essas estruturas fornecem se parece muito com a baseada em classe comum (pense em Java). Isso porque eles criam objetos especiais internamente que servem apenas comoprototypes para os outros e, assim, assumir o papel de classes.

Por exemplo, quando você ligaExt.define('MyClass', {extend: 'ParentClass', mixins: foo, ... }), em seguida, Ext cria umfunction "MyClass"e um objeto anônimo (MyClass.prototype) que contém os métodos que você forneceu.

1

você também pode usar algo como:

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

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

você pode fazer isso:

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

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

t (ou objetos singleton) corretamente.

Há uma grande diferença entre esses ("classes" e objetos singleton). Seus primeiros exemplos são objetos únicos (singletons). Seu terceiro (último) exemplo cria umfunção de construtor Isso permitirá que você crie vários objetos compartilhando o mesmo protótipo. eu recomendariaaumentando aprototype propriedade na função de construtor, em vez de substituí-lo como você está fazendo, por exemplo:

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

(Funções construtoras, por convenção, começam com uma letra maiúscula.)

O que você usa (função singleton ou constructor) depende do que você precisa.

A partir do ES2015 (vulgo "ES6"), é mais simples, embora não exista uma nova sintaxe para definir uma propriedade de protótipo que não seja de método (seufoo); provavelmente haverá no ES2017 ou ES2018, uma vezesta proposta avança, mas até então:

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

Se você precisa entrar em hierarquias de herança, na antiga sintaxe do ES5 há um pouco de encanamento envolvido:

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

... e é por isso que você costumava ver bibliotecas entrando, como a PrototypeClass coisas, ou o meu próprioLinhagem; Porém, esses estão desatualizados pela sintaxe do ES2015, o que torna tudo mais 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 otítulo da sua pergunta:

Qual é a maneira correta de criar uma classe Javascript?

Existem várias formas igualmente corretas de criar "classes" de objetos em JavaScript, porque o JavaScript é uma linguagem muito flexível. Existem funções construtoras padrão, funções "construtoras",Object.create (em ambientes habilitados para ES5) que permite fazer uma herança prototípica mais direta e vários outros. Uma das melhores coisas do JavaScript é que você escolhe o seu estilo de "classe".

Perguntas relacionadas