Question

为了正确地将通过HTTP接收的数据中的Typescript对象实例化为JSON，我正在探索使用for..in循环与.hasOwnProperty()结合的可能性，如下所示：

class User {
    private name: string;
    private age: number;

    constructor(data: JSON) {
        console.log('on constructor\ndata', data);

        for (var key in data) {
            console.log('key:', key);
            if (User.hasOwnProperty(key)) {
                console.log('User has key:', key);
                this[key] = data[key];
            }
        }
    }

    displayInfo(): string{
        return JSON.stringify(this);
    }
}

let button = document.createElement('button');
button.textContent = "Test";
button.onclick = () => {
    try{
        let json = JSON.parse('{"name": "Zorro","age": "24"}');
        let usr = new User(json);
        console.log(usr.displayInfo());
    }catch (error){
        alert(error);
    }

}

document.body.appendChild(button);

在我的项目中使用类似的代码完全失败。这是预期的，因为编译的JS代码不知道私有TS变量，因此hasOwnProperty总是false。

但是，我正在使用Typescript Playground，并且运行该代码会在控制台中生成以下输出：

on constructor
data Object {name: "Zorro", age: "24"}
key: name
User has key: name
key: age
{"name":"Zorro"}

正如您所看到的，这里显然发生了一些意想不到的事情。识别第一个密钥，并使用JSON中的值初始化新的User实例，但第二个密钥不会发生这种情况。

有人可以解释为什么会这样吗？

Answer 1

正如评论中指出的那样，您应该使用this.hasOwnProperty代替User.hasOwnProperty。正如你所注意到的，这个代码无论如何都被破坏了，因为类中的属性声明实际上并没有在对象上创建自己的属性（它们需要初始化才能实现）。

但为什么你会在name键上受到影响？ User对象是您班级的构造函数函数 。函数具有name属性：

function fn() { }
console.log(fn.name); // prints 'fn'

当然，他们没有age属性。

Answer 2

如果要从纯JavaScript对象构造User实例，那么构造函数当然必须如此：

constructor(data: any) {
    this.name = data.name;
    this.age = data.age;
}

奇怪的.hasOwnProperty行为

2 个答案: