浏览器中的JavaScript有没有反射机制？

Question

我想获取 HTML 元素的所有属性、样式、事件和方法的列表。浏览器中是否有反射API？

我正在寻找这样的东西：

var button = new HTMLButtonElement();
var className = document.getQualifiedClassName(button); // "HTMLButtonElement"
var definition = document.getDefinition(className); // HTMLButtonElement reference
var instance = document.getInstance(definition); // instance of HTMLButtonElement
var properties = document.getProperties(button); // properties of HTMLButtonElement
var methods = document.getMethods(button); // methods of HTMLButtonElement
var styles = document.getStyles(button); // styles applicable to HTMLButtonElement
var events = document.getEvents(button); // events on HTMLButtonElement
var inheritance = document.getInheritance(button); // HTMLButtonElement > HTMLElement

编辑：
这是 ActionScript3 中的调用，它获得了我正在寻找的内容：

var objectInformation = document.describeType(button) // metadata

这可能会使我在 JavaScript 中尝试做的事情更加清楚。

背景
假设我正在尝试将完整的代码添加到 HTML 代码编辑器。当用户将光标放在 div 元素旁边并启动代码完成时，我想向他们显示代码完成弹出窗口中的所有事件、属性和样式。当他们输入 JavaScript 时，我想自动完成所有可用的方法。当他们开始输入样式对象时，我想提供一个样式列表。

如果我得到一个对象或标签名称，我需要能够显示代码完成的所有元数据。在许多语言中，有 API 可以做到这一点。

Answer 1

var button = document.createElement('button')

for(key in button){
 //do anything here
}

我想你可以做到。

Answer 2

你必须定义每个事物的含义。

var className = document.getQualifiedClassName(button);

这是什么意思？您可以使用 classList.

var definition = document.getDefinition(className);

这是什么意思？你是说 CSS 规则吗？您必须遍历 CSS 对象模型才能找到它。

var instance = document.getInstance(definition);

这是什么意思？您也许可以使用 querySelectorAll.

var properties = document.getProperties(button);

如果你真的是指属性，你可以简单地将按钮的属性作为对象遍历。

var methods = document.getMethods(button);

大多数有趣的方法都会在 HTMLElement 等原型上，您必须在那里寻找它们。许多或大多数将不可枚举，并且可能难以追踪。

var styles = document.getStyles(button);

你是什么意思？ button.style?

var events = document.getEvents(button);

没有办法得到这些。

var inheritance = document.getInheritance(button);

这是什么意思？

您还可以获取不同于属性的属性：

var attributes = button.attributes;

Answer 3

JavaScript 中的方法是通过 Object's constructor and Reflect 的静态方法。

一个示例是使用 Object.keys(myObj) 到 return 对象数组属性名称。

Answer 4

JS 中没有 AS3's describeType。你一次要求很多东西，有些你可以在 JS 中得到，有些你不能（有些甚至在 JS 中可能没有意义，因为它是如此动态。）

您可以当然可以使用Object.getOwnPropertyDescriptors() and Object.getPrototypeOf()获取对象及其层次结构的属性和方法。

function describeType(object) {
    const prototype = Object.getPrototypeOf(object);
    console.log("Hello, I am a", prototype.constructor.name);
    console.log("My properties are", Object.getOwnPropertyDescriptors(object));
    console.log("My prototype proterties are", Object.getOwnPropertyDescriptors(prototype));
    const superPrototype = Object.getPrototypeOf(prototype);
    if (superPrototype) {
        console.log("My super class is", superPrototype.constructor.name);
        // etc
    }
}

Example on jsfiddle.

浏览器中的JavaScript有没有反射机制？

Does JavaScript in the browser have a reflection mechanism?

html

javascript

flash

actionscript-3