如何在javascript中显示对象的所有属性和方法？

Question

vscode 显示不同的方法、属性和事件。

大家好，

我可以看到，在 vscode 中可以查看给定对象的所有不同属性、方法和事件。 我如何访问所有这些并将它们存储在数组中，而不必对其进行硬编码？

Answer 1

Object.keys(obj)

将为您提供对象上可枚举属性的数组。

Object.getOwnPropertyDescriptors(obj)

将为您提供对象的“自己”属性 descriptors 数组，并将包含不可枚举的属性。

Object.getOwnPropertyNames(obj)

将为您提供对象的“自己”属性 names 的数组，并将包含不可枚举的属性。

如果您还想列出原型上可能有哪些方法，那么您必须在原型上使用上述方法之一，您可以通过

Object.getPrototypeOf(obj)

获得。

而且，如果这个对象是一个子类，并且您想要在任何基类上包含方法，则必须遵循原型链并枚举该链中的每个原型。 您可以通过调用

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)

这将返回给定对象的所有属性。