为一组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) 
);