Javascript对象申报问题

我挖的第一次OOP，但我有一个小问题：Javascript对象申报问题

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) 
}

但它看起来像在typeError宣布this.img.height结果。有人能解释为什么吗？

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

来源

2012-10-03 Saturnix

我可能错过了一些东西，但是这个例子中的“缩放”是指什么？ –

别担心：它是在代码中的其他地方声明的变量:)我可以删除它，但我仍然会得到相同的类型错误 – Saturnix

“imgs”数组中存储了哪些对象？ – Satyajit

对于名称面板，您的对象是否始终是静态的？然后

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-03 01:25:11

这不会工作'prop：panel.img.height/panel.img.width'。使用文字语法时，不能在实例化过程中引用对象。在创建时，'panel'将会是'undefined'。 –

你是对的，我会修复这个---修正了 –

现在一切都有了更多的意义。谢谢！ – Saturnix

即使您认为自己没有这样做，您也是指对象不同。因此，在您的示例中，在第三行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-03 01:09:26 vittore

这可能是一个评论，因为你实际上并没有解决OP的问题。 – Daedalus

你的评论正在出发篇斜体错误 –

@shhac不再适用了。 – Daedalus

面板对象没有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-03 01:13:53

这是因为this将永远是你使用对象字面语法时创建的对象的引用。

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

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变量应该做的参考。

如果您希望他们引用该对象的成员，那么您还需要将其取出。而这个变量似乎只是无处不在。

似乎也许你只是猜测JavaScript语法是如何工作的。如果是这样，那是一种难以学习的方式。在继续之前，我会推荐一个基本的教程。

来源

2012-10-03 01:14:01

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-03 01:25:38 Crogo

Javascript对象申报问题

回答

相关问题