构造函数中的JavaScript自定义参数

我使用JavaScript（ECMAScript 5）。我有一门课是这样的：

我的班级

function elementClass(htmlType, cssClass, text, value, id) {
    this.htmlType = htmlType;
    this.cssClass = cssClass;
    this.text = text;
    this.value = value;
    this.id = id;
}

有时我需要设置一些属性，我想使用如下代码：

var newElement = new elementClass(htmlType ="div",cssClass = "form-group",id = "div1");

我需要将

div1

作为

id

传递，但它作为第三个参数传递

我可以使用以下代码来执行此操作：

var newElement3 = new elementClass();
newElement3.htmlType = "div";
newElement3.cssClass = "form-group";
newElement3.id = "div1";  

但我想尽量减少代码，如：

var newElement = new elementClass(htmlType ="div",cssClass = "form-group",id = "div1");

我读了很多主题，但找不到任何解决方法

有什么办法吗

---

感谢您的帮助。

将对象作为参数传递：

function ElementClass ( settings ){
  for(var key in settings){
    this[key] = settings[key];
  }     
}

因此，您可以：

var instance = new ElementClass({
  some:"other"
});

---

如果需要默认参数/防止扩展，可以执行以下操作：

function ElementClass( options ){
  var defaults = {
    some:"value"
    stays:"the same"
  };

  for(var key in defaults){
    this[key] = options[key] || defaults[key];
  }
}

因此，如果您实例化它：

 new ElementClass({
   some:"stuff", //overridden
   whatever:"unknown" //omitted
 });

这会导致

{ some:"stuff", stays:"the same"}

---

一种简单的方法是传入一个自定义对象，而不是单独传递不同的参数

创建接口（可选） 您可以为intellisence在typings文件中添加接口声明

interface ElementSettings {
    htmlType: string;
    cssClass: string;
    value: string;
    text: string;
    id: string;
}

换课 使用默认对象 您可以使用默认设置对象代替

| |“默认值”

，并将其与设置参数合并

var ElementClass = (function() {
    var defaultSettings = {
        htmlType: "Default Type",
        cssClass: "Default Class",
        value: "Default Value",
        text: "Default Text",
        id: "Default Id"
    };

    /** @param {ElementSettings} settings */
    function ElementClass(settings) {
        // Throws an error if function is called without new
        if (!(this instanceof ElementClass)) {
            throw new TypeError("Cannot call a class as a function");
        }
        // Discards invalid input
        settings = settings instanceof Object ? settings : {};
        // In ES6 you could use Object.assign
        for (var property in defaultSettings) {
            this[property] = settings[property] || defaultSettings[property];
        }
    }

    return ElementClass;    
})();

例子

var ElementClass=（函数（）{
var defaultSettings={
htmlType:“div”，
cssClass：“默认类”，
值：“默认值”，
文本：“默认文本”，
id:“默认id”
};
功能元素类（设置）{
如果（！（ElementClass的此instanceof））抛出新的TypeError（“无法将类作为函数调用”）；
设置=对象的设置实例？设置：{}；
对于（默认设置中的var属性）此[属性]=设置[属性]| |默认设置[属性]；
this.getDom=函数getDom（）{
var dom=document.createElement（this.htmlType）；
dom.className=this.cssClass；
dom.textContent=this.text；
dom.value=this.cssClass；
dom.id=this.id；
返回dom；
};
}
返回元素类；
})();
var form=document.querySelector（“表单”）；
var container=document.querySelector（“#项容器”）；
表格.附录列表（“提交”，功能（evt）{
var formData=form.querySelectorAll（“输入：非（[type='submit']）”）；
变量设置={}；
forEach（函数（formItem）{
var值=formItem.value；
var name=formItem.getAttribute（“名称”）；
如果（值和名称）设置[名称]=值；
});
appendChild（新的ElementClass（settings）.getDom（））；
evt.preventDefault（）；
});
#项目容器>*{
背景色：rgba（1001001009.4）；
最小宽度：20px
最小高度：20px；
}
您的代码似乎已经使用了默认参数，您还可以使用速记属性名称并返回object和rest参数来获取任何未初始定义的属性

function elementClass({
  htmlType = "" // defaults to empty string
, cssClass = "" // defaults to empty string
, text = "" // defaults to empty string
, value = "" // defaults to empty string
, id = "" // defaults to empty string
, ...rest // handle any other properties passed as parameters
}) {
    return {htmlType, cssClass, text, value, id, ...rest}
}

$("#new1").click(function() {
    var newElement1 = new elementClass({
                        htmlType:"div"
                      , cssClass:"form-group"
                      , id:"div1"
                      , otherData:123
                      });
    showElement(newElement1);    
});

JSFIDLE
我会在函数外去掉
默认值
，构造函数真的不需要每次都创建相同的常量对象。@nina what，ES6在哪里？@Jonasw，
Object.assign
是ES6在链接的JSFIDLE上使用的三种方法中的任何一种都有什么问题？@guest271314我想使用新的元素类（htmlType=“div”，cssClass=“form group”，id=“div1”）

来最小化代码。JSFIDLE上的第一个代码示例已经使用了该模式。您是否希望通过传递或分配参数，在默认参数分配的范围内自动将属性分配给对象？@guest271314完全正确。答案请参见。但这样一来，方法2和3就不起作用了。@AliSoltani“但这样一来，方法2和3就不起作用了。”不知道你的意思是什么？应答处的代码为函数定义默认参数，如果未传递，则将其设置为默认值，否则属性值将被传递的值覆盖；并允许传递N个附加参数，这些参数也在返回的对象上设置。为什么需要四种不同的模式才能获得相同的结果？我在项目中使用了方法2和方法3，我倾向于更改

elementClass

以支持这种情况。@AliSoltani“我在项目中使用了方法2和方法3，我倾向于更改elementClass以支持这种情况。”？Answer中的代码定义了默认的预期参数，并允许将未显式声明的参数设置为返回对象的属性值。对于您决定任意更改函数的问题，不可能有结论性的答案，请参阅。不需要“更改”返回预期结果的函数模式；这会让问题的观众和你自己感到困惑。我问这个问题是为了了解其他人的意见。无论如何，我测试了你的代码，但没有在IE中工作，因为不在

ES5

中工作。我使用的是

ES5

。

function elementClass({
  htmlType = "" // defaults to empty string
, cssClass = "" // defaults to empty string
, text = "" // defaults to empty string
, value = "" // defaults to empty string
, id = "" // defaults to empty string
, ...rest // handle any other properties passed as parameters
}) {
    return {htmlType, cssClass, text, value, id, ...rest}
}

$("#new1").click(function() {
    var newElement1 = new elementClass({
                        htmlType:"div"
                      , cssClass:"form-group"
                      , id:"div1"
                      , otherData:123
                      });
    showElement(newElement1);    
});