Question

这是我到目前为止所得到的，它根本不起作用:(我的播放器类中的所有变量都为null，并且永远不会调用更新。

我的意思是编程类，而不是css类。 I.E.不是（.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帖子中使用“1使用功能”。

真正的问题似乎是javascript在我的实际代码中到达这一行时不知道该怎么做：

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

任何时候我似乎都会窒息

box.style.background-color

所以我现在需要回答的问题是如何在javascript中设置一个样式变量，名称中包含“ - ”。我会在第二次发布测试

Answer 1

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

使用函数的单身人士

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

Answer 2

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构造函数。

Answer 3

你正在使用Player作为构造函数，但它没有设置为像。

而不是在构造函数中使用var，例如var speed = 5; 你需要使用

this.speed=5;

然后它会返回一个Player的实例。实际上，你只是设置了一些变量并且没有特别返回任何内容。

现在，就学习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。

如何在Javascript中创建一个类？

3 个答案: