Comment créer une classe en Javascript?

C'est ce que j'ai obtenu jusqu'ici, et ça ne marche pas du tout :(toutes les variables sont nulles dans ma classe de joueur et la mise à jour ne m'appelle jamaisComment créer une classe en Javascript?

Je veux dire une classe de programmation, pas une classe CSS. (.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>

Edit: d'accord, je pense que je foiré ici La première fois que j'ai essayé de faire une classe me semble avoir foiré Après une nouvelle tentative.. Il me semble être en mesure d'utiliser maintenant le "1 Using a function" dans le post de Meders

le vrai problème semble être que le javascript ne sait pas quoi faire quand il arrive à cette ligne dans mon code réel:

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

Il semble aussi étouffer chaque fois que je mets

box.style.background-color

Donc la question que j'ai besoin de répondre maintenant est comment puis-je définir une valeur aux variables de style en javascript qui ont un "-" dans le nom. Je vais poster un test dans un second

Source

2010-06-13 William

Qu'est-ce qui ne fonctionne pas? Qu'est-ce que c'est censé faire? –

toutes les variables sont null dans ma classe de joueur et la mise à jour n'est jamais appelée. – William

Quelle mise à jour? Je vois deux fonctions nommées 'update'. Et vous appelez 'player.update', qui n'existe pas. –

Selon this article, il y a trois façons de définir une classe JavaScript:

1 en utilisant une fonction

Exemple:

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 Utilisation de JSON

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


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

3 Singleton en utilisant une fonction

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

Source

2010-06-13 23:23:23

Oui, j'ai vu cet article, mais quand j'ai essayé d'utiliser le style 3, ça n'a pas marché du tout. C'est celui que j'ai besoin d'utiliser parce que le 2rd est une classe par variable. – William

de quelles variables parlez-vous? sois plus précis. vous êtes trop vague. –

@ William clarifier s'il vous plaît - vous voulez utiliser le 3ème ou le 2ème? :) –

Le var fait une variable privée, préfixe avec this ne place dans votre constructeur:

 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

Vous pouvez également faire ...

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

Et puis se débarrasser de new Player et le constructeur Player.

Source

2010-06-13 23:31:11

"La var fait une variable privée" - vous voulez dire local? –

C'est à la fois local et privé. –

Vous utilisez Player comme un constructeur, mais il n'est pas configuré comme tel.

Plutôt que d'utiliser var dans la fonction constructeur, comme var speed = 5; vous devez utiliser

this.speed=5;

Ensuite, il wil retourne une instance de joueur. En l'état, vous ne faites que définir des variables et ne rien retourner en particulier.

Maintenant, en ce qui concerne l'apprentissage de la création d'objets JS et de l'héritage, je suggère de consulter les ressources de Douglas Crockford.Comme vous le savez, il n'est pas destiné à être basé sur des classes comme Java, PHP, Python et ainsi de suite. JavaScript a un héritage prototypique basé sur des objets de clonage qui existent déjà. Crockford discute de l'héritage basé sur la classe dans JS dans this older article. Le problème est que vous n'utilisez pas JS pour essayer de le faire. This treatise peut être intéressant où il explique une façon de cloner des objets. C'est la méthode Object.beget, qui est bonne, mais qui a aussi des limites. La meilleure façon est la méthode "fonctionnelle". Désolé pour les liens PowerPoint, mais vous devriez lire ceci: http://www.crockford.com/codecamp/The%20Good%20Parts%20ppt/4%20prototypal.ppt et ceci: http://www.crockford.com/codecamp/The%20Good%20Parts%20ppt/5%20functional.ppt

http://video.yahoo.com/watch/630959/2974197 est une version d'une vidéo où Crockford expose les tenants et les aboutissants de JS. http://www.youtube.com/watch?v=hQVTIJBZook est une autre de la même chose.

Je recommande vraiment d'obtenir le livre JavaScript: The Good Parts pour une version complète de JavaScript avancé pragmatique.

Source

2010-06-13 23:38:44 JAL

Pour ajouter à cela: [JavaScript. Le Guide définitif] (http://www.amazon.com/JavaScript-Definitive-Guide-David-Flanagan/dp/0596101996/ref=dp_ob_title_bk) est peut-être mieux adapté pour quelqu'un qui ne connaît pas déjà la POO de JavaScript. –

Ce livre est assez bon et complet, aussi. La différence est qu'il couvre complètement le DOM et les navigateurs, tandis que The Good Parts est strictement sur le langage lui-même. – JAL

Comment créer une classe en Javascript?

Répondre

Questions connexes