0

我是第一次挖掘 OOP，但我遇到了一个小问题：

var panel = {    
    img : imgs[24],
    prop : this.img.height / this.img.width,

    h : this.img.height - (scale),
    w : h/prop,

    x : center.x - (w / 2),
    y : center.y - (h / 2)    
}

panel.draw = function(){    
   g.ctx.drawImage(this.img,
      0, 0,
      this.img.width, this.img.height,
      this.x, this.y,
      this.w, this.h)
}

但它看起来像this.img.height在typeError. 有人可以解释为什么吗？

另外，如何在对象声明中声明方法？没什么特别的：我只是不想让我的代码看起来太乱。

4

5 回答 5

2

您的对象在名称面板上总是静态的吗？然后

var panel = {};
panel.img = imgs[24];
panel.prop = panel.img.height / panel.img.width;
...

它不是静态的，但您不想要它的实例吗？然后做一个初始化函数来得到正确的this

var panel = {   // assuming "scale" and "center" in scope
        init : function(){
            this.img = imgs[24];
            this.prop = this.img.height / this.img.width;
            this.h = this.img.height - (scale);
            this.w = this.h / this.prop;
            this.x = center.x - (this.w / 2);
            this.y = center.y - (this.h / 2);
        }
};
panel.init();
...

你想拥有对象的多个实例吗？然后做一个构造函数

function Panel (img) { // assuming "scale" and "center" in scope
    this.img = img;
    this.prop = img.height / img.width;
    this.h = img.height - (scale);
    this.w = this.h / this.prop;
    this.x = center.x - (this.w / 2);
    this.y = center.y - (this.h / 2);
}
Panel..draw = function(){
...

并与var panel = new Panel( imgs[24] );

于 2012-10-03T01:25:11.893 回答
1

即使您认为您没有这样做，您也指的是不同的对象。因此，在您的示例中，第三行this是指当前范围，而不是您正在创建的对象面板。这样做img和h

var panel = {    
    img : imgs[24],
    prop : this.img.height / this.img.width, // this != panel here

    h : this.img.height - (scale), // this.img != panel.img
    w : h/prop, // h != panel.h

    x : center.x - (w / 2), // w != panel.w
    y : center.y - (h / 2)  // h != panel.h  
}

panel.draw = function(){    
   g.ctx.drawImage(this.img,
      0, 0,
      this.img.width, this.img.height,
      this.x, this.y,
      this.w, this.h)
}

应该是这样的

var Panel = (function() {    
    function Panel(img, scale, center) {  
       this.img = img
       this.prop = img.height / img.width
       this.h = img.height - scale
       this.w = this.h/this.prop
       this.x = center.x - (this.w / 2),
       this.y = center.y - (this.h / 2)
    }
    Panel.prototype.draw = function(ctx) {
          ctx.drawImage(this.img, 0, 0,
          this.img.width, this.img.height,
          this.x, this.y,this.w, this.h)
    }          
})():

var panel = new Panel(imgs[24], scale, center);
panel.draw(g.ctx);
于 2012-10-03T01:09:26.027 回答
1

这是因为在使用对象字面量语法this时，将永远不会引用您正在创建的对象。

它是对外部变量范围的引用。要使用文字语法，您需要创建不需要自引用的部分，然后在初始化后创建 rest。

var panel = {    
    img : imgs[24],

    w : h/prop,

    x : center.x - (w / 2),
    y : center.y - (h / 2)    
};
panel.prop = panel.img.height / panel.img.width;
panel.h = panel.img.height - scale;

我不知道你的h和prop变量应该指的是什么。

如果您希望它们引用对象的成员，那么您也需要将它们取出。而这个center变量似乎无处不在。

似乎您只是在猜测 JavaScript 语法的工作原理。如果是这样，那是一个很难学习的方法。在您继续之前，我会推荐一个基本教程。

于 2012-10-03T01:14:01.727 回答
0

this指的panel是声明的上下文，而不是面板对象本身。一些解决方法：

缓存引用的对象： 

var img = imgs[24];
var panel = {
    img: img
  , height: img.height - scale
  , //...

创建一个空白面板对象，并一一添加属性：

var panel = {};
panel.img = imgs[24]
panel.height = panel.img - scale;

方法可以像任何其他属性一样声明。

var panel = {
    img: imgs[24]
  , draw: function(){ g.ctx.drawImage(this.img, 0, 0) }
}
于 2012-10-03T01:25:38.613 回答
0

Panel 对象没有 panel.img.height 属性。

var panel = {    
    img :
        { height: // stuff here
        }
    prop : this.img.height / this.img.width,

    h : this.img.height - (scale),
    w : h/prop,

    x : center.x - (w / 2),
    y : center.y - (h / 2)    
}
于 2012-10-03T01:13:53.547 回答