返回 NaN 的数字？

Question

我正在处理具有许多属性的对象，并使用这些属性绘制到画布上。我正在使用其他属性计算一些属性。但是，我遇到了一个问题！

基本上，我有一个具有许多属性的对象，虽然当我检查存储在属性中的数据类型时，它返回“数字”，但当我调用该属性时，我得到的是 NaN……因此我不能在以下情况下使用它绘制到画布元素。

所以基本上，我有这个：

var MasterObject = {
    Object1: {
        width: Number(document.getElementById("width").value),
        height: Number(document.getElementById("height").value),
        border: 65,
        lines: Math.round((this.width - this.border* 2) / 60),
        lineSpace: (this.width - this.border* 2) / this.lines,
        lineSpace1: this.lineSpace
    }
};

在 console.log() 或 alert() 中使用“typeof”时，宽度、高度和边框属性返回“数字”。调用这些属性时，我会得到它们存储的数字！

虽然属性“lines”也返回“Number”，但当我实际尝试调用该属性时，它返回“NaN”。

宽度、高度和边框虽然是动态计算的，但始终是一个整数，我尝试用 Number [i.e. Number(Math.round((this.width - this.border* 2) / 60)) ].

我也读过尝试 parseInt() 等，但这也不起作用。

我确信这很简单，但我无法理解正在发生的事情。为什么数据的类型返回的是 Number 而实际的数据返回的是 NaN...我很困惑！！

感谢任何帮助。

Answer 1

this 的上下文不是您在其中引用它的对象。您可以做的一件事是将代码移动到函数中，使其成为您想要的上下文，然后调用函数而不是属性。

var MasterObject = {
    Object1: {
        width: Number(document.getElementById("width").value),
        height: Number(document.getElementById("height").value),
        border: 65,
        lines: function() {
          return Math.round((this.width - this.border* 2) / 60);
        },    
        lineSpace: function() {
          return (this.width - this.border* 2) / this.lines;
        },
        lineSpace1: function() { return this.lineSpace; }
    }
};

document.getElementById('print').innerHTML = MasterObject.Object1.lines();

<input id="width" value="10">
<input id="height" value="15">
<div id="print"></div>