Javascript：使用原型函数发布

Question

function test() {
 this.list = {};
 document.getElementById("test").innerHTML = "";
 this.list['test1']= new mutation("test1", 2, {"damage":{"freq":2, "size":"d6"}});
 this.list['test2']= new mutation("test2", 1, {"range":"long"});
 this.list['test1'].level=5;
 alert("test running");
 this.addOptions();
}
test.prototype.addOptions = function(){
 alert("addOptions Running");
 var node = document.getElementById("select");
 var strName;
 for(strName in this.list) {
  var optionNode = document.createElement('option');
  var textnode = document.createTextNode(this.list[strName].name);
  optionNode.appendChild(textnode);
  node.appendChild(optionNode);
  document.getElementById("test").appendChild(this.list[strName].display());
 }
}

I have been hitting my head against the wall for about an hour now, to no avail.

I did this exact thing in another file and it not only worked and is still working, but is actually called by this file in the mutations() definition.

I am getting Uncaught "TypeError: undefined is not a function" as the error on my this.addOptions() line. All of the code was working before I refactored it into a new file and started trying to apply the prototyping for my next step, which will be to make the display update based on a list in the "select" box. again, huge work in progress, but this is halting progress rather effectively.

edit: This code works just fine

function mutation(nam, freq, opts) {
 this.opts=opts;
 this.name=nam;
 this.nameText = document.createTextNode(nam+": ");
 this.frequency=freq;
 this.level=0;
 this.upd();
}

mutation.prototype.display = function(){
 this.upd();
 var node=document.createElement('span');
 var ret = document.createElement('br');
 node.appendChild(this.nameText);
 node.appendChild(this.damage);
 node.appendChild(this.range);
 node.appendChild(ret);
 return node;
};

mutation.prototype.upd = function(){
 if(this.opts['damage'] || this.opts['Damage']) {
  var dmg = calcDamage(this.level, this.opts['damage']['freq'], this.opts['damage']['size']);
  this.damage = document.createTextNode(dmg+" ");
 } else {
  this.damage = document.createTextNode("");
 }
 if(this.opts['range'] || this.opts['Range']) {
  var rng=rangeFunction(this.level,this.opts['range']);
  this.range = document.createTextNode(rng+"ft. ");
 } else {
  this.range = document.createTextNode("");
 }
};

Answer 1

Seems like you're calling test() constructor before it's actual definition, and its definition gets "hoisted", ie moved to the top of the code. So the constructor (test()) works fine, BUT the prototype method is still not defined. However, second part with assigning to the prototype is still not defined at that pointed. Please check your code order.

Another example with error:

a = new A(); // created OK
a.foo(); // error: foo is not a function
A = function() {};
A.prototype.foo = function() { return 'bar'; }

And this one works:

A = function() {};
A.prototype.foo = function() { return 'bar'; }
a = new A(); // created OK
a.foo(); // returns 'bar'

Answer 2

You would get the error that you describe if you called "test()" instead of "new test()". If you forgot the "new" then 'this' would not extend test.prototype and then this.addOptions() wouldn't exist. Calling with 'new' creates a 'this' which extends the prototype and has a reference to addOptions.