如何在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中创建一个类？

回答

相关问题