我开始在JavaScript中使用OOP玩一下我有一系列简单的对象,我试图循环并在每个上调用一个方法,但是,当我在Google Chrome下运行时,我在JavaScript调试器中获取以下异常:
Uncaught TypeError: Object 0 has no method '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
}
知道我可能做错了什么吗?我在这里简化了一些代码,所以如果你发现问题必须在其他地方,我可以添加额外的上下文。
谢谢。
答案 0 :(得分: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();
});
}
答案 1 :(得分: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'}
,但要注意:它也会迭代继承的键。例如,如果某些明智的人决定宣布Object.prototype.myMethod
,您会看到键foo
,spam
和myMethod
出现。但hasOwnProperty
方法可以使循环安全:
for (var key in obj) {
if(obj.hasOwnProperty(key)) {
// proceed with confidence
}
}