javascript - 返回 NaN 的数字？

Question

我正在处理具有大量属性的对象，并使用这些属性绘制到 Canvas 上。我正在使用其他属性来计算一些属性。但是，我遇到了一个问题!

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

所以基本上，我有这个:

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”时，宽度、高度和边框属性返回“Number”。当调用这些属性时，我得到它们存储的号码!

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

宽度、高度和边框虽然是动态计算的，但始终是一个整数，我尝试用 Number [即: 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>