Javscript： aboba.js：50 uncatch TypeError： 无法读取 undefined 的属性(读取 'r')

Question

我的代码有什么问题？

未捕获类型错误：无法读取未定义(读取"r"(的属性

class Color{
constructor(a1, a2, a3){
this.r = a1;
this.g = a2;
this.b = a3;
}
delta(c1){
var ret = new Color(this.r - c1.r, this.g - c1.g, this.b - c1.b);
return ret;
}
}
function createPalette(){
var mainColors = [new Color(255, 0, 0), new Color(0, 255, 0)];
var colors = [], steps = 16;
var colorLength = mainColors.length;
var colorDelta = 1 / (colorLength - 1);
for(var i = 0; i < steps; i++){
var globalRel = i / (steps - 1);
var index0 = globalRel / colorDelta;
var index1 = Math.min(colorLength - 1, index0 + 1);
var localRel = (globalRel - index0 * colorDelta) / colorDelta;
var c0 = mainColors[index0];
var c1 = mainColors[index1];
var dc = c1.delta(c0);
var col = new Color(c0.r + localRel * dc.r,
c0.g + localRel * dc.g,
c0.b + localRel * dc.b);
colors.push(col);
}
return colors;
}
palette = createPalette();

我想。它说c1.r是未定义的，但实际上不是。它到底有什么问题？

Answer 1

在for循环的第二次迭代中，index0计算为0.0666...:

• colorLength=2
• colorDelta=1/(2-1(=1
• globalRel=1/(16-1(=0.0666
• index0=0.0666…/1=0.066

当index0被传递到c1初始化时，它将返回undefined:

var c1 = mainColors[0.06666] //undefined

当c1作为参数传递到下一行的.delta()方法中时，该方法会尝试检索undefined的.r属性，从而导致错误。

相信你的控制台错误，它们通常不会说谎。