爲一組Web音頻API節點創建一個簡單的構造函數

Question

我有一批Web Audio API節點，看起來像下面的代碼。我想把這個抽象成一個簡單的構造函數，但是我遇到了麻煩。我不確定我做錯了什麼。最終的結果應該是這個樣子

function filterTemplate(name,freqVal){ 
    this.name = context.createBiquadFilter(); 
    this.name.type = 5;  
    this.name.gain.value = null;  
    this.name.Q.value = 1;     
    this.name.frequency.value = this.freqVal;  // freqVal is here 

} 

當我調用該函數：

var filter = new filterTemplate("theName",200); //Uncaught TypeError: Cannot call method 'createBiquadFilter' of undefined 

我改變了方法，看起來像這樣和錯誤被刪除

this.name = function(){return context.createBiquadFilter()}; 

後來我獲得各種屬性值的另一個錯誤

//Uncaught TypeError: Cannot set property 'value' of undefined 

我真的只是混淆了正確的方式來創建一個使用內置的瀏覽器方法和屬性的香草構造函數。

我想抽象的代碼下面到看起來像上面的代碼

filter1 = context.createBiquadFilter(); 
filter1.type = 5;  
filter1.gain.value = null;  
filter1.Q.value = 1;     
filter1.frequency.value = 80;    // Changes 

filter2 = context.createBiquadFilter(); 
filter2.type = 5;  
filter2.gain.value = 0;  
filter2.Q.value = 1;     
filter2.frequency.value = 240;   // Changes 

filter3 = context.createBiquadFilter(); 
filter3.type = 5;  
filter3.gain.value = 0;  
filter3.Q.value = 1;     
filter3.frequency.value = 750;   // Changes 

filter4 = context.createBiquadFilter(); 
filter4.type = 5;  
filter4.gain.value = 0;  
filter4.Q.value = 1;     
filter4.frequency.value = 2200;   // Changes 

filter5 = context.createBiquadFilter(); 
filter5.type = 5;  
filter5.gain.value = 0;  
filter5.Q.value = 1;     
filter5.frequency.value = 6000;   // Changes 

Answer 1

你的問題是與您的上下文變量的作用域。

var filter = new filterTemplate("theName",200); //Uncaught TypeError: Cannot call method 'createBiquadFilter' of undefined 

...表示上下文變量不能從您試圖訪問的位置（位於filterTemplate構造函數內）中提供。當你這樣做......

this.name = function(){return context.createBiquadFilter()}; 

...你分配的功能，而不是到this.name，直到功能時，它會不會嘗試訪問上下文，因此，錯誤被刪除。結果會發生的是，您在this.name中沒有過濾器，而是一個函數，並且函數沒有增益屬性，因此當您嘗試設置this.name.gain.value時會出現錯誤。

您應該查找的是您定義上下文的位置，並確保可以從filterTemplate中訪問該變量。

Answer 2

建築模式對這種情況非常好。特別是當你可以設置很多屬性。

http://jsfiddle.net/yw8Fm/

您可以創建一個簡單FilterTemplate類這樣的。

function FilterTemplate(builder) { 
    this.context = builder._context; 
    this.context.type = builder._type;  
    this.context.gain.value = builder._gainValue;  
    this.context.Q.value = builder._qValue;     
    this.context.frequency.value = builder._frequencyValue; 
} 

它將構建器對象作爲構造器參數。這裏是Builder。

FilterTemplate.Builder = function() { 
    this._context = context.createBiquadFilter(); 
    this._type = 5;  
    this._gainValue = null;  
    this._qValue = 1;     
    this._frequencyValue = 80; 

    this.context = function (val) { 
     this._context = val; return this; 
    }; 

    this.type = function (val) { 
     this._type = val; return this; 
    }; 

    this.gainValue = function (val) { 
     this._gainValue = val; return this; 
    }; 

    this.qValue = function (val) { 
     this._qValue = val; return this; 
    }; 

    this.frequencyValue = function (val) { 
     this._frequencyValue = val; return this; 
    }; 
}; 

你可以進一步擴展這個例子，只要你喜歡。 現在您可以輕鬆創建FilterTemplates。

var filter1 = new FilterTemplate(
    (new FilterTemplate.Builder()).frequencyValue(80) 
); 

var filter2 = new FilterTemplate(
    (new FilterTemplate.Builder()).frequencyValue(80).qValue(2) 
);