浏览器中的 JavaScript 有反射机制吗？答案

【问题标题】：Does JavaScript in the browser have a reflection mechanism?浏览器中的 JavaScript 有反射机制吗？
【发布时间】：2017-02-26 03:07:37
【问题描述】：

我想获得一个 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 可以做到这一点。

【问题讨论】：

标签： javascript html actionscript-3 flash

【解决方案1】：

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

您可以当然可以使用Object.getOwnPropertyDescriptors() 和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.

【讨论】：

【解决方案2】：

你必须定义每件事的含义。

var className = document.getQualifiedClassName(button);

这是什么意思？你可以使用classList。

var 定义 = 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 继承 = document.getInheritance(button);

这是什么意思？

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

var 属性 = button.attributes;

【讨论】：

【解决方案3】：

var button = document.createElement('button')

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

我认为你可以这样做。

【讨论】：

【解决方案4】：

在 JavaScript 中执行此操作的方式是通过 Object's constructor 和 Reflect 的静态方法。

一个例子是使用Object.keys(myObj) 返回一个对象属性名称的数组。

【讨论】：