如何在javascript中顯示一個object的所有屬性和方法？

Question

vscode 顯示不同的方法、屬性和事件。

嘿人們，

我可以看到在 vscode 中可以看到給定 object 的所有不同屬性、方法和事件。如何訪問所有這些並將它們存儲在數組中，而不必對其進行硬編碼？

Answer 1

Object.keys(obj)將為您提供 object 上的可枚舉屬性數組。

Object.getOwnPropertyDescriptors(obj)將為您提供 object 的“自己的”屬性描述符數組，並將包括不可枚舉的屬性。

Object.getOwnPropertyNames(obj)將為您提供 object 的“自己的”屬性名稱數組，並將包括不可枚舉的屬性。

如果你還想列出原型上可能有哪些方法，那么你必須在原型上使用上述方法之一，你可以通過Object.getPrototypeOf(obj)獲得。

而且，如果這個 object 是一個子類，並且您想在任何基類上包含方法，則必須遵循原型鏈並枚舉該鏈中的每個原型。 您通過調用Object.getPrototypeOf(obj)跟蹤鏈，然后在該原型上再次調用它，依此類推，直到獲得null 。 這就是您“走”原型鏈的方式。

您可以查看所有這些的MDN 文檔以獲取更多信息。

這是一個例子：

 class A { constructor() { this.propA = "A"; Object.defineProperty(this, "propA2", { enumerable: false }); } showMe() { console.log("I'm from class A"); } } class B extends A { constructor() { super(); this.propB = "B"; Object.defineProperty(this, "propB2", { enumerable: false }); } showMeToo() { console.log("I'm from class B"); } } let x = new B(); // [ 'propA', 'propB' ] console.log(Object.keys(x)); // [ 'propA', 'propA2', 'propB', 'propB2' ] console.log(Object.getOwnPropertyNames(x)); // [ 'constructor', 'showMeToo' ] let protoB = Object.getPrototypeOf(x); console.log(Object.getOwnPropertyNames(protoB)); // [ 'constructor', 'showMe' ] let protoA = Object.getPrototypeOf(protoB); console.log(Object.getOwnPropertyNames(protoA)); // shows properties on generic Object prototype let p1 = Object.getPrototypeOf(protoA); console.log(Object.getOwnPropertyNames(p1)); // shows null because it's the end of the prototype chain let p2 = Object.getPrototypeOf(p1); console.log(p2);

Answer 2

您可以使用Object.keys(yourObj)
這將返回給定 object 的所有屬性。