ES7中如何获取类构造器参数数量以动态生成HTML输入？

我正在开发一个项目，需要让用户生成可本地保存的数据，这类数据结构相似但字符串内容唯一。目前我用JS的prompt/confirm实现输入逻辑：

function createCustomJob() {
    let dateFrom = prompt("Enter date from:");
    let dateTo = prompt("Enter date to:");
    let description = prompt("Enter job description:");
    let isCurrentPosition = confirm("Is it a current position?");
    let publicOrPrivate = prompt("Enter public or private:");
    let position = prompt("Enter job position:");
    let name = prompt("Enter job name:");

    let obj = new Obj(dateFrom, dateTo, description, isCurrentPosition, publicOrPrivate, position, name);
}

现在打算改用HTML构建输入界面，想知道能不能在创建第一个Obj实例前，获取其构造器的参数数量（类似Obj.length的可行方案），从而动态生成对应数量的HTML输入控件，还是只能硬编码？

可行方案：利用构造器的length属性 #

你提到的Obj.length其实就是正确方向——JavaScript中函数（包括构造函数）的length属性会返回该函数形参的数量（不包含剩余参数、带默认值的参数等特殊情况）。只要你的Obj构造函数是标准定义的（没有使用默认参数或剩余参数），直接通过Obj.length就能拿到它的参数个数。

基础示例 #

假设你的Obj构造函数是这样的：

function Obj(dateFrom, dateTo, description, isCurrentPosition, publicOrPrivate, position, name) {
    this.dateFrom = dateFrom;
    this.dateTo = dateTo;
    // ... 其他属性赋值逻辑
}

那么Obj.length会返回7，正好对应你需要的输入项数量。

但单纯的参数数量只能解决“生成多少个输入框”的问题，没法区分输入类型（比如isCurrentPosition应该用复选框而非文本框），也没法设置对应的提示文本。

优化方案：给构造器添加元数据 #

如果想要更智能的动态生成，建议给Obj构造器添加一个静态属性，用来描述每个参数的详细信息：

function Obj(dateFrom, dateTo, description, isCurrentPosition, publicOrPrivate, position, name) {
    this.dateFrom = dateFrom;
    this.dateTo = dateTo;
    this.description = description;
    this.isCurrentPosition = isCurrentPosition;
    this.publicOrPrivate = publicOrPrivate;
    this.position = position;
    this.name = name;
}

// 静态元数据：描述每个参数的类型、提示文本、可选选项等
Obj.paramMetadata = [
    { type: 'date', label: 'Date from:' },
    { type: 'date', label: 'Date to:' },
    { type: 'textarea', label: 'Job description:' },
    { type: 'checkbox', label: 'Is it a current position?' },
    { type: 'select', label: 'Public or private?', options: ['public', 'private'] },
    { type: 'text', label: 'Job position:' },
    { type: 'text', label: 'Job name:' }
];

这样你不仅能通过Obj.paramMetadata.length拿到参数数量，还能根据元数据动态生成匹配的HTML控件，示例实现：

function buildInputForm() {
    const form = document.createElement('form');
    form.style.display = 'flex';
    form.style.flexDirection = 'column';
    form.style.gap = '12px';

    // 遍历元数据生成输入控件
    Obj.paramMetadata.forEach(meta => {
        const fieldContainer = document.createElement('div');
        fieldContainer.style.display = 'flex';
        fieldContainer.style.flexDirection = 'column';
        fieldContainer.style.gap = '4px';

        const label = document.createElement('label');
        label.textContent = meta.label;
        fieldContainer.appendChild(label);

        let input;
        switch(meta.type) {
            case 'date':
                input = document.createElement('input');
                input.type = 'date';
                break;
            case 'textarea':
                input = document.createElement('textarea');
                input.rows = 3;
                break;
            case 'checkbox':
                input = document.createElement('input');
                input.type = 'checkbox';
                // 复选框把input嵌入label内
                label.insertBefore(input, label.firstChild);
                break;
            case 'select':
                input = document.createElement('select');
                meta.options.forEach(opt => {
                    const option = document.createElement('option');
                    option.value = opt;
                    option.textContent = opt;
                    input.appendChild(option);
                });
                break;
            default:
                input = document.createElement('input');
                input.type = 'text';
        }

        fieldContainer.appendChild(input);
        form.appendChild(fieldContainer);
    });

    // 添加提交按钮
    const submitBtn = document.createElement('button');
    submitBtn.type = 'submit';
    submitBtn.textContent = 'Create Job';
    form.appendChild(submitBtn);

    // 处理表单提交
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        // 获取所有输入值
        const inputs = form.querySelectorAll('input, textarea, select');
        const values = Array.from(inputs).map(input => {
            return input.type === 'checkbox' ? input.checked : input.value;
        });
        // 用扩展运算符传入构造器创建实例
        const newObj = new Obj(...values);
        // 后续本地保存逻辑
        console.log('Created job:', newObj);
    });

    document.body.appendChild(form);
}

// 调用生成表单
buildInputForm();

硬编码的适用场景 #

如果你的Obj构造函数逻辑简单，且短期内不会修改参数数量或类型，硬编码HTML输入控件确实更直接，不需要额外维护元数据。但如果构造函数可能迭代修改，动态生成的方式会更易维护。

内容的提问来源于stack exchange，提问作者iminsert