如何在Javascript中創建一個類？

這是我到目前爲止，它根本不工作:(所有的變量在我的播放器類和null更新永遠不會被調用的變量爲空如何在Javascript中創建一個類？

我的意思是一個編程類，而不是一個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>

編輯：好吧，我想我搞砸了這裏，我第一次嘗試做一類我似乎已經搞砸後重試。我似乎現在可以在Meders post中使用「1 Using a function」了。

真正的問題似乎是，JavaScript不知道該怎麼辦當它到達這條線在我真正的代碼：

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

這也似乎隨時嗆我把

box.style.background-color

所以，我現在需要回答的問題是如何設置一個值，以在JavaScript中名稱中帶有「 - 」的樣式變量。我會後在第二

來源

2010-06-13 William

什麼不行？它應該做什麼？ – 2010-06-13 23:21:34

我的播放器類中的所有變量均爲null，並且更新永遠不會被調用。 – William 2010-06-13 23:26:10

哪個'update'？我看到兩個名爲'update'的函數。而你正在調用'player.update'，它不存在。 – 2010-06-13 23:34:26

測試根據this文章，有三種方法在JavaScript中定義一個類：

1使用功能

例子：

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使用JSON

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


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

3辛格爾頓使用功能

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

來源

2010-06-13 23:23:23

是的，我看過這篇文章，但是當我嘗試使用第3種風格時，它根本不起作用。這是我需要使用的原因，因爲第二個是每個變量類。 – William 2010-06-13 23:29:06

你在說什麼變數？更加詳細一些。你太模糊了。 – 2010-06-13 23:30:07

@William請澄清 - 你想使用第三還是第二？ :) – 2010-06-13 23:31:55

的var，使私有變量，而不是在你的構造與this做前綴：

 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

你也可以做...

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

然後擺脫new Player和Player構造函數。

來源

2010-06-13 23:31:11

「該變量產生一個私有變量」 - 你的意思是本地的？ – 2010-06-14 00:06:07

這是本地和私人。 – 2010-06-14 00:07:44

您正在使用播放器的構造函數，但它不像一個。

而不是使用var構造函數裏面，像var speed = 5; 你需要使用

this.speed=5;

然後，它西港島線返回播放器的一個實例。事實上，你只是設置了一些變量並且沒有特別返回。

現在，就學習JS對象的創建和繼承而言，我建議查看Douglas Crockford的資源。正如您可能知道的那樣，它並不打算像Java，PHP，Python等那樣基於類。 JavaScript具有基於克隆已存在對象的原型繼承。

Crockford討論了在基於類的繼承在this older article中的JS。問題是，你並沒有使用JS來最好地嘗試這樣做。 This treatise可能很有趣，他解釋了克隆對象的一種方式。這是Object.beget方法，雖然很好，但也有限制。最好的方法是「功能性」方法。對不起PowerPoint鏈接，但你應該閱讀：http://www.crockford.com/codecamp/The%20Good%20Parts%20ppt/4%20prototypal.ppt和這個：http://www.crockford.com/codecamp/The%20Good%20Parts%20ppt/5%20functional.ppt

http://video.yahoo.com/watch/630959/2974197是一個視頻的版本，其中Crockford討論JS的來龍去脈。 http://www.youtube.com/watch?v=hQVTIJBZook是另一個相同的。

我真的推薦讓本書JavaScript: The Good Parts深入瞭解實用先進的JavaScript。

來源

2010-06-13 23:38:44 JAL

要添加到：[JavaScript。權威指南]（http://www.amazon.com/JavaScript-Definitive-Guide-David-Flanagan/dp/0596101996/ref=dp_ob_title_bk）可能更適合那些不瞭解JavaScript的OOP的人。 – 2010-06-13 23:53:07

這本書也相當不錯，徹底。不同之處在於它完全覆蓋了DOM和瀏覽器，而「良好部件」則嚴格遵守語言本身。 – JAL 2010-06-14 16:59:19

如何在Javascript中創建一個類？

回答

相關問題