javascript根据类名称动态创建类实例

Question

我有很多看起来像这样的代码块：

    .....
    var headerEl = document.createElement("div");
    headerEl.id = "headerDiv";
    document.body.appendChild(headerEl);
    var headerBlock = new Header(headerEl);

    var footerEl = document.createElement("div");
    footerEl.id = "footerDiv";
    document.body.appendChild(footerEl);
    var footerBlock = new Footer(footerEl);
    .....

现在，我想创建一个函数“ createBlock”来执行上面的代码，所以我只需要传递这样的参数

    .....
    var headerBlock = createBlock("headerDiv", Header);
    var footerBlock = createBlock("footerDiv", Footer);
    .....

我已经尝试过了，但是没有用

function createBlock (divName, className){
    var myDiv = document.createElement("div")
    myDiv.id = divName;
    document.body.appendChild(myDiv);
    var block = new className(myDiv);
    return block;
}

Answer 1

使用apply调用模式或Function.prototype.call ：

function createBlock (divName, className){
    var myDiv = document.createElement("div")
    myDiv.id = divName;
    document.body.appendChild(myDiv);
    var block = className.call(null, myDiv);
    return block;
}

这将要求构造函数Header和Footer通过检查this范围是否安全

function Header(arg) {
  if(this instanceof Header) {
    //initialise
    return this;
  }
  else {
    return new Header(arg);
  }
}

Answer 2

function createBlock (divName, className){
    var myDiv = document.createElement("div")
    myDiv.id = divName;
    document.body.appendChild(myDiv);
    var block = new window[className](myDiv);
    return block;
}

var headerBlock = createBlock("headerDiv", "Header");
var footerBlock = createBlock("footerDiv", "Footer");

请注意"Header"和"Footer"周围的引号

Answer 3

请参阅动态加载打字稿类（打字稿的反映）

您需要使用：

var newInstance = Object.create(window[className].prototype);
newInstance.constructor.apply(newinstance, params);