JavaScript對象聲明問題

Question

我是第一次研究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 。 有人可以解釋為什么嗎？

另外，我怎么能申報對象申報里面的方法？ 沒什么特別的：我只是不想讓我的代碼看起來太凌亂。

Answer 1

您的對象在名稱面板中是否始終是靜態的？ 然后

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

Answer 2

即使您認為自己沒有這樣做，您仍在引用其他對象。 因此，在你的榜樣，在第三行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);

Answer 3

這是因為在使用對象字面量語法時， 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變量應該引用什么。

如果希望他們引用該對象的成員，則也需要將其刪除。 而且center變量似乎無處不在。

似乎您只是在猜測JavaScript語法是如何工作的。 如果是這樣，那是一種很難學習的方法。 在繼續之前，我建議您先學習一下基礎教程。

Answer 4

面板對象沒有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)    
}

Answer 5

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