奇怪的 .hasOwnProperty 行为

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"}

如你所见，这里显然发生了一些意想不到的事情。第一个键被识别，新的 User 实例用 JSON 中的值初始化，但第二个键不会发生这种情况。

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

Answer 1

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

但是为什么你按了 name 键？ User 对象是 class 的 构造函数函数 。函数确实有 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 行为

Weird .hasOwnProperty behaviour

json

typescript

hasownproperty