的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);