¿Cómo creo una clase en Javascript?

Esto es lo que obtuve hasta ahora, y no funciona en absoluto :(todas las variables son nulas en mi clase de jugador y la actualización nunca se llama.¿Cómo creo una clase en Javascript?

Me refiero a una clase de programación, no una clase CSS. IE no (.movingdiv {color: # ff0000;})

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Class Test</title> 
     <meta charset="utf-8" /> 
     <style> 
      body { text-align: center; background-color: #ffffff;} 
      #box { position: absolute; left: 610px; top: 80px; height: 50px; width: 50px; background-color: #ff0000; color: #000000;} 
     </style> 

     <script type="text/javascript"> 
      document.onkeydown=function(event){keyDown(event)}; 
      document.onkeyup=function(event){keyUp(event)}; 
      var box = 0; 

      function Player() { 
       var speed = 5; 
       var x = 50; 
       var y = 50; 
      } 

      function update() { 
       box.style.left = this.x + "px"; 
       box.style.top = this.y + "px"; 
       box.innerHTML = "<h6 style=\"margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;\">X: "+ this.x + "<br /> Y: " + this.y + "</h6>"; 
      } 

      var player = new Player(); 
      var keys = new Array(256); 
      var i = 0; 
      for (i = 0;i <= 256; i++){ 
       keys[i] = false; 
      } 

      function keyDown(event){ 
       keys[event.keyCode] = true; 
      } 

      function keyUp(event){ 
       keys[event.keyCode] = false; 
      } 

      function update(){ 
       if(keys[37]) player.x -= player.speed; 
       if(keys[39]) player.x += player.speed; 

       player.update(); 
      } 

      setInterval(update, 1000/60); 
     </script> 
    </head> 

    <body> 
     <div id="box" ></div> 
     <script type="text/javascript"> 
      box = document.getElementById('box'); 
      box.innerHTML = "<h6 style=\"margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;\">X: "+ player.x + "<br /> Y: " + player.y + "</h6>"; 
     </script> 

    </body> 
</html>

Editar: Muy bien, creo que metí la pata aquí la primera vez que trataba de hacer una clase me parece que han ensuciado Después de volver a intentar.. Parece que ahora puedo usar el "1 Usando una función" en la publicación de Meders.

el verdadero problema parece ser que Javascript no sabe qué hacer cuando se llega a esta línea en mi código real:

box.style.background-position = "" + -(this.frame * this.width) + "px " + -(this.state * this.height) + "px";

También parece asfixiar cualquier momento me puse

box.style.background-color

Entonces, la pregunta que necesito responder ahora es cómo puedo establecer un valor para las variables de estilo en JavaScript que tienen un "-" en el nombre. Voy a publicar una prueba en un segundo

Fuente

2010-06-13 William

¿Qué no funciona? ¿Qué se supone que haga? –

todas las variables son nulas en mi clase de jugador y nunca se llama a la actualización. – William

¿Qué 'actualización'? Veo dos funciones llamadas 'actualizar'. Y estás llamando 'player.update', que no existe. –

Según this artículo, hay tres maneras de definir una clase en JavaScript:

1 utilizando una función de

Ejemplo:

function Apple (type) { 
    this.type = type; 
    this.color = "red"; 
    this.getInfo = getAppleInfo; 
} 

function getAppleInfo() { 
    return this.color + ' ' + this.type + ' apple'; 
} 


var apple = new Apple('macintosh'); 
apple.color = "reddish"; 
alert(apple.getInfo());

2 Usando JSON

var apple = { 
    type: "macintosh", 
    color: "red", 
    getInfo: function() { 
     return this.color + ' ' + this.type + ' apple'; 
    } 
} 


apple.color = "reddish"; 
alert(apple.getInfo());

3 Singleton utilizando una función

var apple = new function() { 
    this.type = "macintosh"; 
    this.color = "red"; 
    this.getInfo = function() { 
     return this.color + ' ' + this.type + ' apple'; 
    }; 
} 


apple.color = "reddish"; 
alert(apple.getInfo());

Fuente

2010-06-13 23:23:23

Sí, he visto este artículo, pero cuando traté de usar el 3º estilo, no funcionó en absoluto. Ese es el que necesito usar porque el 2º es una clase variable. – William

¿De qué variables estás hablando? sé más específico. estás siendo demasiado vago. –

@William por favor aclarar: ¿quiere usar el tercero o el segundo? :) –

El var hace una variable privada, no prefijar con this vez en su constructor:

 function Player() { 
      this.speed = 5; 
      this.x = 50; 
      this.y = 50; 
      var pri = 'private'; 
      this.update = function() { 
        if(keys[37]) this.x -= this.speed; 
        if(keys[39]) this.x += this.speed; 
      } 
     } 

     var player = new Player; 
     alert(player.speed) // should alert 5 
     alert(player.pri) // should fail or say undefined

También puede hacer ...

 var player = { 
      speed: 5, 
      x:50, 
      y:50, 
      update: function() { 
       // code 
      } 
     }

Y luego deshacerse de new Player y el constructor Player.

Fuente

2010-06-13 23:31:11

"La var hace una variable privada" - ¿te refieres a local? –

Es tanto local como privado. –

Está utilizando Player como un constructor, pero no está configurado como uno.

En lugar de utilizar var dentro de la función constructora, como var speed = 5; es necesario utilizar

this.speed=5;

Entonces Wil devolver una instancia de jugador. Tal como está, solo estás configurando algunas variables y no devuelves nada en particular.

Ahora, en lo que respecta al aprendizaje de la creación y herencia de objetos JS, sugiero consultar los recursos de Douglas Crockford.Como sabrá, no está destinado a ser de clase, como Java, PHP, Python, etc. JavaScript tiene una herencia prototípica basada en la clonación de objetos que ya existen.

Crockford analiza hacer herencia basada en clases en JS en this older article. El problema es que no estás usando JS para tratar de hacer eso. This treatise puede ser interesante donde explica una forma de clonar objetos. Ese es el método Object.beget, que es bueno, pero también tiene límites. La mejor manera es el método "funcional". Lo siento por los enlaces de PowerPoint, pero debería leer esto: http://www.crockford.com/codecamp/The%20Good%20Parts%20ppt/4%20prototypal.ppt y esto: http://www.crockford.com/codecamp/The%20Good%20Parts%20ppt/5%20functional.ppt

http://video.yahoo.com/watch/630959/2974197 es una versión de un vídeo en el que Crockford analiza los pormenores de la JS. http://www.youtube.com/watch?v=hQVTIJBZook es otro de lo mismo.

Realmente recomiendo obtener el libro JavaScript: The Good Parts para una exploración detallada de JavaScript avanzado pragmático.

Fuente

2010-06-13 23:38:44 JAL

Para agregar a eso: [JavaScript. La Guía Definitiva] (http://www.amazon.com/JavaScript-Definitive-Guide-David-Flanagan/dp/0596101996/ref=dp_ob_title_bk) es quizás más adecuada para alguien que ya no conoce el OOP de JavaScript. –

Ese libro es bastante bueno y completo, también. La diferencia es que cubre el DOM y los navegadores a fondo, mientras que The Good Parts trata estrictamente del idioma en sí. – JAL

¿Cómo creo una clase en Javascript?

Respuesta

Cuestiones relacionadas