无法将新属性添加到子类

时间:2018-03-09 17:37:16

标签: javascript ecmascript-6 es6-class

我正在尝试基本上为一个小项目编写一个自定义ORM,我正在使用一个类来设置我的记录,默认情况下所有记录都会通过一种类型检查器,它会根据我的内容转换任何值说他们应该

export default class Record {
  constructor(...props) {
    const [model, data] = props;
    forOwn(data, (value, key) => {
      if (model.hasOwnProperty(key)) {
        this[key] = attr(model[key], value);
      } else {
        this[key] = value;
      }
    });
  }
}

这可以通过循环数据数组并从中创建新实例来正常工作

data.forEach((item) => {
  serializedData.push(new Item(model, item));
});

Item只是一个简单的扩展类

class Item extends Record {
  constructor(...props) { super(...props); }
}

这是我遇到问题的地方,我想在itemImage子类中添加一个新的Item属性,它将获取一些现有值并从中创建一个URL。

我已经尝试过这两个我在网上搜索时找到的这两个都没有效果

Reflect.defineProperty(Item.prototype, 'itemImage', {
  get() {
    return `//res.cloudinary.com/***/image/upload/${this.image.image_crop}/${this.image.image_version}/${this.auction_code}/${this.image.original_image_name}`;
  }
});

class Item extends Record {
  ...

  get itemImage() {
    return this.getItemImage();
  }
  getItemImage() {
    return `//res.cloudinary.com/***/image/upload/${this.image.image_crop}/${this.image.image_version}/${this.auction_code}/${this.image.original_image_name}`;
  }
}

我将如何做到这一点?

修改

以下是attr的作用

const attr = (type, data) => {
  switch (type) {
    case 'number':
      return parseFloat(data);
    case 'string':
      return data.toString();
    case 'object':
      if (typeof data === 'string' && data.indexOf('{') > -1) {
        return JSON.parse(data);
      } else {
        return data;
      }
  }
};

这是一个完整的Sandbox,有反应证明

https://codesandbox.io/s/7m388jwk1q

1 个答案:

答案 0 :(得分:0)

您的问题与子类getter无关。问题在于您的数据格式。

查看image属性:

"image": "[{\"original_image_name\":\"iqsnzsutgbpgqsztani5.png\",\"image_crop\":\"c_crop,h_450,w_1125\"}]"

attr函数解析它时,它变成一个数组,不是一个对象。因此,您无法访问以下字段:${this.image.image_crop}

但如果删除方括号,一切正常。或者,如果您无法更改数据格式,只需访问如下图像:${this.image[0].image_crop}