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を使用するときに、作成しているオブジェクトへの参照になることは決してないためです。

これは、外部変数スコープへの参照です。リテラル構文を使用するには、自己参照を必要としないパーツを作成し、初期化後に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 に答える
1

あなたはそれをしていないと思っていても、別のオブジェクトを参照しています。したがって、あなたの例では、3行目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 に答える
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 に答える
0

thispanelパネルオブジェクト自体ではなく、宣言されているコンテキストを指します。いくつかの回避策：

参照されたオブジェクトをキャッシュします： 

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

空白のパネルオブジェクトを作成し、プロパティを1つずつ追加します。

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 に答える