1

我开始在 JavaScript 中使用 OOP，我有一个简单的对象数组，我试图循环并在每个对象上调用一个方法，但是，当我在 Google Chrome 下运行它时，我得到以下JavaScript 调试器中的异常：

未捕获的类型错误：对象 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 可以很方便地迭代键值映射{foo: 'bar', spam: 'eggs'}，但要注意：它也会迭代继承的键。例如，如果某个 wiseguy 决定声明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 回答