Javascript:使用原型函数时出现问题

Javascript: Issue using prototype functions

本文关键字：问题 函数 原型 Javascript      更新时间：2023-09-26
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());
 }
}

我已经把头撞在墙上大约一个小时了，但无济于事。

我在另一个文件中做了这个确切的事情，它不仅有效并且仍在工作，而且实际上由这个文件在 mutations（） 定义中调用。

我Uncaught "TypeError: undefined is not a function"是我的this.addOptions()行上的错误。 在我将其重构为新文件并开始尝试将原型应用于下一步之前，所有代码都在工作，这将是根据"选择"框中的列表进行显示更新。 同样，大量的工作正在进行中，但这正在相当有效地阻止进展。

编辑：此代码工作正常

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("");
 }
};

如果你调用"test（）"而不是"new test（）"，你会得到你所描述的错误。 如果你忘记了"new"，那么"this"将不会扩展test.prototype，然后this.addOptions（）将不存在。 使用"new"调用会创建一个"this"，它扩展了原型并引用了addOptions。

似乎你在实际定义之前调用 test（） 构造函数，并且它的定义被"提升"，即移动到代码的顶部。所以构造函数（test（））工作正常，但原型方法仍未定义。但是，分配给原型的第二部分仍未在该点定义。请检查您的代码顺序。

另一个有错误的例子：

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

这个有效：

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