为什么我的javascript类实例中的方法看不到属性

时间:2019-05-15 22:06:30

标签: javascript class ecmascript-6

在类的构造函数中设置的属性不适用于该类实例中的其他函数

类构造函数将对象作为数据作为其参数。然后将其保存为实例的属性-一切正常。

const form = new Form({
  "name": "John",
  "description": "a good bloke",
  "box_id": 1
});

我可以看到form.orginalData是运行时传递的对象

form.toString()

我得到一个空对象(在名为data的函数中设置)

这里是完整的示例

class Form {
  constructor(data) {
    this.orginalData = data
    for (let field in this.orginalData) {
      this[field] = data[field];
    }

  }
  data() {
    let d = {};
    for (let p in this.originalData) {
      d[p] = this[p];
    }

    return d;
  }

  toString() {
    return JSON.stringify(this.data());
  }

}
const form = new Form({
  "name": "John",
  "description": "a good bloke",
  "box_id": 1
});
let message = document.getElementById('message');

form.name = 'Ian';
form.description = 'is a wicked man';

message.innerHTML = form.name + '<br/>';
message.innerHTML += form.description + '<br/>';
message.innerHTML += "orginalData:" + JSON.stringify(form.orginalData) + '<br/>'
message.innerHTML += "<p>BUT if I run form.data() I get </p>"
message.innerHTML += form.toString();
#message {
  border: 1px solid blue;
  padding: 10px;
}

body {
  font-family: Sans-Serif;
}
<h1>
  Class property persistance
</h1>
<p>
  output:
</p>
<div id="message">
  Something went wrong
</div>

我显然缺少了一些基本的东西

1 个答案:

答案 0 :(得分:1)

由于originalData vs orginalData,您得到的结果为空