자바 스크립트 : 프로토 타입 기능을 사용하는 문제

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

저는 벽에 머리를 약 1 시간 동안 댔지 만 아무 소용이 없습니다.

다른 파일에서이 정확한 작업을 수행했지만 작동하지 않고 계속 작동하지만 mutations() 정의에서 실제로이 파일에서 호출됩니다.

내 this.addOptions() 라인의 오류로 Uncaught "TypeError: undefined is not a function"이 표시됩니다. 모든 파일을 새 파일로 리팩터링하기 전에 모든 코드가 작동했으며 "선택"상자의 목록을 기반으로 디스플레이를 업데이트하는 다음 단계의 프로토 타입을 적용하기 시작했습니다. 다시 말하면 진행중인 엄청난 작업이지만, 이것은 진전을 오히려 효과적으로 중단하고 있습니다.

편집 :이 코드는 실제 정의입니다 전에 테스트() 생성자를 호출하는 것처럼

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

당신은 "테스트()"대신 "새로운 테스트 (라고하는 경우가 설명하는 오류를 얻을 것) ". "새"를 잊어 버린 경우 'this'는 test.prototype을 확장하지 않으므로 this.addOptions()가 존재하지 않습니다. 'new'를 호출하면 프로토 타입을 확장하고 addOptions에 대한 참조가있는 'this'를 만듭니다.

Answer 2

이 보인다 잘 작동, 그 정의는 즉, "빠진"코드의 상단으로 이동됩니다. 따라서 생성자 (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'