如何在 Javascript 中创建一个类？答案

【问题标题】：How do I create a class in Javascript?如何在 Javascript 中创建一个类？
【发布时间】：2011-03-03 08:00:05
【问题描述】：

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

我的意思是编程类，而不是 css 类。 IE。不是 (.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 Using a function”了。

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

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

我每次放它似乎都会窒息

box.style.background-color

所以我现在需要回答的问题是如何为名称中带有“-”的 javascript 中的样式变量设置值。我会在一秒钟内发布一个测试

【问题讨论】：

什么不起作用？它应该做什么？
我的播放器类中的所有变量都为空，并且永远不会调用更新。
哪个update？我看到两个名为update 的函数。而你打电话给player.update，它并不存在。
如果您有一个全新的问题，请提出一个新问题并保持原样。
关于 CSS 属性 background-color：你应该使用驼峰命名法，比如 box.style.backgroundColor。

标签： javascript html oop class

【解决方案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());

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

【讨论】：

是的，我看过这篇文章，但是当我尝试使用第三种样式时，它根本不起作用。那是我需要使用的，因为第二个是每个变量类。
你在说什么变量？更加详细一些。你说得太模糊了。
@William 请澄清一下-您要使用第三个还是第二个？ :)
您的第二个示例不是 JSON。 JSON 中没有函数之类的东西。

【解决方案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 构造函数。

【讨论】：

“var 是一个私有变量”——你的意思是本地的？

【解决方案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. The Definitive Guide 可能更适合还不了解 JavaScript 的 OOP 的人。
那本书也很好，很透彻。不同之处在于它彻底涵盖了 DOM 和浏览器，而 The Good Parts 则严格地关注语言本身。