Question

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

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

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

宽度，高度和边框尽管是动态计算的，但总是整数，我尝试用“数字”包装“line”属性值[即数字（Math.round（（this.width - this.border * 2）/ 60））]。

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

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

感谢任何帮助。

Answer 1

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

＆＃13;

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();

＆＃13;

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

＆＃13;

号码返回NaN？

1 个答案: