Como posso emular "classes" em JavaScript? (Com ou sem uma biblioteca de terceiros)

votos
19

Como posso emular classes (e namespaces) em JavaScript?

Eu preciso criar uma biblioteca de JavaScript e têm uma experiência limitada com a língua. Eu sempre pensei que tinha suporte nativo para as aulas, mas é menos relacionado ao Java do que eu tinha assumido. Parece que tudo em JavaScript é realmente uma função.

O que eu encontrei até agora faz muito sentido, por ser uma linguagem fracamente tipado dinâmico, mas isso torna um pouco de partida para pessoas que estão acostumadas a ter uma linguagem fortemente digitado e usando um compilador para detectar nossos erros: )

Eu trabalho principalmente em C # e Java, e estava esperando por algo syntacticaly semelhante de modo a biblioteca seria familiar para nossos outros desenvolvedores de C #, que terão de mantê-lo.

Eu tenho o seguinte tipo de código que funciona, mas eu queria saber o que outro desenvolvedor de leva seria sobre isso. Quais são as alternativas? Existe uma maneira que é melhor? Existe uma maneira que é mais legível?

Eu entendo que o que eu quero é algo semelhante ao C # ou Java quando eu deveria simplesmente aceitar o fato de que este é JavaScript , mas meu objetivo é tentar diminuir a curva de aprendizado para outros desenvolvedores, tornando-a mais familiar e intuitiva para eles.

//Perform the namespace setup (this will actually be done with checking 
//in real life so we don't overwrite definitions, but this is kept short 
//for the code sample).
var DoctaJonez = new function();
DoctaJonez.Namespace1 = new function();

/**
 * Class description.
 */
DoctaJonez.Namespace1.SomeClass = function()
{
    /**
     * Public functions listed at the top to act like a header.
     */
    this.publicFunction = privateFunction;

    /**
     * Private variables next.
     */
    var privateVariable;

    /**
     * Finally private functions.
     */
    function privateFunction()
    {

    }
}

//Create an instance of the class
var myClass = new DoctaJonez.SomeClass();

//Do some stuff with the instance
myClass.publicFunction();
Publicado 10/12/2008 em 13:06
fonte usuário
Em outras línguas...                            


7 respostas


votos
1

Por exemplo, em http://mckoss.com/jscript/object.htm .

Você vai encontrar um monte de exemplos quando googling para "JavaScript objeto-oriented". Ao tomar uma olhada estruturas JavaScript populares como Ext JS você vai ter um sentimento por esses conceitos e como eles são aplicados na prática.

Respondeu 10/12/2008 em 13:27
fonte usuário

votos
1

mepcotterell fornece boas ligações, mas eu gostaria de acrescentar que eu, pessoalmente, prefiro ver namespaces como objetos ou seja DoctaJonez.Namespace1 = {};.

Respondeu 10/12/2008 em 13:29
fonte usuário

votos
9

Para compreensão geral de OOP em JavaScript você não pode fazer melhor do que ler Douglas Crockford :

Para os fãs do Dojo (e para as técnicas gerais) Neil Roberts tem bons artigos:

Plain vanilla dojo.declare () é provavelmente a fundação OOP mais avançado em bibliotecas tradicionais ao redor. Eu sou preconceituoso, mas não tome minha palavra para ela. Aqui estão alguns exemplos de como usá-lo.

Um objeto plain vanilla:

// Let's define a super simple class (doesn't inherit anything).
dojo.declare("Person", null, {
  // Class-level property
  answer: 42,

  // Class-level object property
  name: {first: "Ford", last: "Prefect"},

  // The constructor, duh!
  constructor: function(age){
    this.age = age; // instance-level property
  },

  // A method
  saySomething: function(verb){
    console.log("I " + verb + " " +
      this.name.first + " " + this.name.last + "!" +
      " -- " + this.answer);
  },

  // Another method
  passportControl: function(){
    console.log("I am " + this.age);
  }
});

Exemplo de utilização:

// A fan of Ford Perfect
var fan = new Person(18);
fan.saySomething("love"); // I love Ford Perfect! -- 42
fan.passportControl();    // I am 18

Herança simples é fácil:

// Let's create a derived class inheriting Person
dojo.declare("SuperAgent", Person, {
  // Redefine class-level property
  answer: "shaken, not stirred",

  // Redefine class-level object property
  name: {first: "James", last: "Bond"},

  // The constructor
  constructor: function(age, drink){
    // We don't need to call the super class because
    // it would be done automatically for us passing
    // all arguments to it.

    // At this point "age" is already assigned.

    this.drink = drink; // Instance-level property
  },

  // Let's redefine the method
  saySomething: function(verb){
    // Let's call the super class first
    this.inherited(arguments);
    // Pay attention: no need for extra parameters, or any extra code,
    // we don't even name the class we call --- it is all automatic.
    // We can call it any time in the body of redefined method

    console.log("Yeah, baby!");
  },

  shoot: function(){ console.log("BAM!!!"); }
});

Exemplo de utilização:

// Let's create a James Bond-wannabe
var jb007 = new SuperAgent(45, "Martini");
jb007.saySomething("dig");  // I dig James Bond! -- shaken, not stirred
                            // Yeah, baby!
jb007.passportControl();    // I am 45
jb007.shoot();              // BAM!!!

// Constructors were called in this order: Person, SuperAgent
// saySomething() came from SuperAgent, which called Person
// passportControl() came from Person
// shoot() came from SuperAgent.

mixins:

// Let's define one more super simple class
dojo.define("SharpShooter", null, {
  // For simplicity no constructor

  // One method to clash with SuperAgent
  shoot: function(){
    console.log("It's jammed! Shoot!");
  }
});

Mixin à base de herança múltipla:

// Multiple inheritance
dojo.declare("FakeAgent", ["SuperAgent", "SharpShooter"], {
  // Let's do it with no constructor

  // Redefine the method
  saySomething: function(verb){
    // We don't call super here --- a complete redefinition

    console.log("What is " + verb "? I want my " + this.drink + "!");
  },
});

Exemplo de utilização:

// A fake agent coming up
var ap = new FakeAgent(40, "Kool-Aid");
ap.saySomething("hate"); // What is hate? I want my Kool-Aid!
ap.passportControl();    // I am 40
ap.shoot();              // It's jammed! Shoot!

// Constructors were called in this order: Person, SuperAgent
// saySomething() came from FakeAgent
// passportControl() came from Person
// shoot() came from SharpShooter.

Como você pode ver, dojo.declare()dá todas as necessidades com um simples usar a API: herança simples em linha reta, herança múltipla baseada mixin, encadeamento automática de construtores e métodos de super sem problemas.

Respondeu 10/12/2008 em 15:54
fonte usuário

Respondeu 10/12/2008 em 16:14
fonte usuário

votos
1

Usando MooTools . Veja o artigo Como escrever um Classe Mootools .

Respondeu 10/12/2008 em 17:10
fonte usuário

votos
1

Se você (e sua equipe) é usado para Java, mas precisa fazer algum JavaScript para um web site, talvez você deve considerar o Google Web Toolkit (GWT). Ele permite que você código JavaScript usando Java, que é convertido em JavaScript. Eu não tentei isso, porém.

JavaScript é realmente uma linguagem muito legal. Ele tem algumas falhas (incluindo o que lhe permite fazer coisas muito estúpido), mas com um pouco de auto dicipline você pode fazer grandes coisas. O JavaScript é realmente objeto -oriented, não tanto classe orientada, mas você pode fazer muito do mesmo material. Você não tem herança (AFAIK), mas não é rigoroso em tudo (um de seus poderosos, mas também características perigosas) com digitação para que você vai encontrá-lo não é limitante.

Respondeu 10/12/2008 em 19:28
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more