1

JavaScriptでOOPを少し試し始めており、ループしてそれぞれのメソッドを呼び出そうとしている単純なオブジェクトの配列がありますが、これをGoogle Chromeで実行すると、次のようになります。 JavaScriptデバッガーの例外：

Uncaught TypeError：オブジェクト0にはメソッド'drawHisto'がありません

以下の簡略化されたコードスニペット：

var histograms = [];
var h1 = null;
var h2 = null;
var h3 = null;

function Init() {
    h1 = new Histogram(canvas1, "red");
    h2 = new Histogram(canvas2, "blue");
    h3 = new Histogram(canvas3, "green");

    histograms = [ h1, h2, h3];
}

function Histogram(canvas, color) {
    // this is my constructor
}

Histogram.prototype.drawHisto = function() {
    // I will add code here to draw the histogram
}

function DrawHistograms() {
    for (var h in histograms) {
        h.drawHisto(); // Throws exception!
    }

    // h1.drawHisto() <--- this works
}

私が間違っているかもしれない何か考えはありますか？ここではコードを少し簡略化したので、問題が他の場所にあるはずだとわかった場合は、コンテキストを追加できます。

ありがとうございました。

4

2 に答える 2

4

JavaScriptのfor inループは、配列の値ではなく、オブジェクトのキーを繰り返し処理します。forいつものようにループを使用するだけです。

function DrawHistograms() {
    for (var i = 0; i < histograms.length; i++) {
        histograms[i].drawHisto();
    }
}

または、Internet Explorer 8以前との互換性に問題がない場合は、次を使用できる可能性がありますArray.forEach。

function DrawHistograms() {
    histograms.forEach(function(h) {
        h.drawHisto();
    });
}
于 2012-07-10T04:13:51.590 に答える
3 
for (var h in histograms) {
    histograms[h].drawHisto();
}

Javascriptのfor-in-loopは、最初は驚くべきものです。配列の値ではなく、キーをループします。ストレートアップ配列の場合、私はより冗長であるがより明確な標準のforループを好む傾向があります。

for (var i = 0; i < histograms.length; i++) {
    histograms[i].drawHisto();
}

楽しいファクトタイム！for-in-loopは、のようなKey-Valueマッピングを反復処理するのに便利です{foo: 'bar', spam: 'eggs'}が、注意してください。継承されたキーも反復処理します。たとえば、ある賢者が宣言することを決定した場合Object.prototype.myMethod、キーfoo、、、が表示さspamれmyMethodます。ただし、このhasOwnPropertyメソッドはループを安全にすることができます。

for (var key in obj) {
    if(obj.hasOwnProperty(key)) {
         // proceed with confidence
    }
}
于 2012-07-10T04:14:13.240 に答える