返回NaN的数字？

Question

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

基本上，我有一个具有许多属性的对象，尽管当我检查存储在属性中的数据类型时，它会返回“ Number”，但是当我调用该属性时，我得到的是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”时，width，height和border属性将返回“ Number”。 调用这些属性时，我会得到它们存储的编号！

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

宽度，高度和边框，尽管可以动态计算出来，但始终都是整数，我尝试用数字[即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>