的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”，将做上面的代码，所以我只是必须在PARAMS通过这样

..... 
    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

使用应用调用模式或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

请参阅Dynamically loading a typescript class (reflection for typescript)

您需要使用：

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