Angular 5如何防止向类实例添加未定义属性

你遇到的问题本质是JavaScript对象的动态特性——即使类里没定义某个属性，直接通过this[key] = value也会给实例新增这个属性。你想到的if(key in myAlpha)思路方向是对的，但我们可以把逻辑做得更严谨，同时还有几种更可靠的优化方式：

1. 检查实例自身的属性（推荐） #

用hasOwnProperty判断key是否是Alpha实例自身拥有的属性（不会检查原型链），能精准过滤掉不属于类定义的键：

let myAlpha = new Alpha();
_.each(Object.keys(response), key => {
  // 先验证属性是否属于Alpha实例，再检查值的有效性
  if (myAlpha.hasOwnProperty(key) && validProp(response[key])) {
    myAlpha.setProp(key, response[key]);
  }
});

2. 提前定义有效属性列表 #

如果Alpha类的属性是固定的，可以提前维护一个有效属性数组，直接判断key是否在这个数组内：

// 可以把这个列表定义为Alpha类的静态属性，更规范
Alpha.validProps = ['propAlpha'];

let myAlpha = new Alpha();
_.each(Object.keys(response), key => {
  if (Alpha.validProps.includes(key) && validProp(response[key])) {
    myAlpha.setProp(key, response[key]);
  }
});

这种方式的好处是，当类的属性有变更时，只需要修改这个数组即可，逻辑更清晰易维护。

3. 在setProp方法内部做校验 #

把属性校验逻辑封装到类的setProp方法里，外部调用时不用重复判断，代码更简洁：

export class Alpha {
  propAlpha?: string;
  constructor() { }
  setProp(key: string, value: string) {
    // 内部先检查key是否是实例自身属性
    if (this.hasOwnProperty(key)) {
      this[key] = value;
    }
  }
}

之后你的循环代码就可以简化为：

let myAlpha = new Alpha();
_.each(Object.keys(response), key => {
  validProp(response[key]) && myAlpha.setProp(key, response[key]);
});

为什么原来的代码会失效？ #

因为你之前的setProp方法直接执行this[key] = value，JavaScript允许给对象动态添加任意属性，所以_someUnwanted会被直接附加到myAlpha实例上，不管类有没有定义这个属性。通过上述校验逻辑，我们就能确保只有类中定义的属性才会被设置。

内容的提问来源于stack exchange，提问作者Sampgun