我有一个名为displayer的javascript类，由id和1到8之间的无符号整数指定，并且包含一些方法（initialize（），getId（）和addObject）。
问题是当我在一个对象上创建一个新的显示器实例并且我调用一个方法时，控制台会抛出一个错误，上面写着＆＃34; TypeError: myDisplayer.initialize is not a function＆＃34; ...
结果是我搜索了太多时间，而且我还没有看到问题出在哪里。有人有想法吗？
我插入了一个片段，以便您自己判断。
感谢。
function displayer(a, b) {
if (typeof a == typeof undefined || typeof b == typeof undefined) {
err_msg = "The constructor provided for displayer which should be displayer(id, size) does not fit.";
throw {
name: "Contructor Error",
level: "Show Stopper",
message: err_msg,
htmlMessage: "<span style='color:red;'>" + err_msg + "</span>",
toString: function() {
return this.name + ": " + this.message;
}
};
} else {
if (typeof a == 'string') {
var id = a;
return true;
} else {
var id = $(a).prop('id');
return;
}
this.getId = function() {
return id;
};
this.initialize = function() {
$('#' + id).css('background', '#000000');
$('#' + id).css('color', '#FFFFFF');
$('#' + id).css('padding', '5px');
$('#' + id).css('border-width', '2px');
$('#' + id).css('border-style', 'solid');
$('#' + id).css('border-radius', '10px');
$('#' + id).css('border-color', '#555555');
switch (b) {
case 1:
if (screen.availHeight < 600 || screen.availWidth < 800) {
$('#' + id).hide();
err_msg = "The selected screen resolution (800x600) oversizes the actual resolution (" + screen.availWidth + "x" + screen.availHeight + ")";
throw {
name: "Fit Error",
level: "Show Stopper",
message: err_msg,
htmlMessage: "<span style='color:red'>" + err_msg + "</span>",
toString: function() {
return this.name + ": " + this.message;
}
};
return false;
} else {
$('#' + id).css('width', '800px');
$('#' + id).css('height', '600px');
return true;
}
break;
case 2:
if (screen.availHeight < 600 || screen.availWidth < 1024) {
$('#' + id).hide();
err_msg = "The selected screen resolution (1024x600) oversizes the actual resolution (" + screen.availWidth + "x" + screen.availHeight + ")";
throw {
name: "Fit Error",
level: "Show Stopper",
message: err_msg,
htmlMessage: "<span style='color:red'>" + err_msg + "</span>",
toString: function() {
return this.name + ": " + this.message;
}
};
return false;
} else {
$('#' + id).css('width', '1024px');
$('#' + id).css('height', '600px');
return true;
}
break;
case 3:
if (screen.availHeight < 768 || screen.availWidth < 1024) {
$('#' + id).hide();
err_msg = "The selected screen resolution (1024x768) oversizes the actual resolution (" + screen.availWidth + "x" + screen.availHeight + ")";
throw {
name: "Fit Error",
level: "Show Stopper",
message: err_msg,
htmlMessage: "<span style='color:red'>" + err_msg + "</span>",
toString: function() {
return this.name + ": " + this.message;
}
};
return false;
} else {
$('#' + id).css('width', '1024px');
$('#' + id).css('height', '768px');
return true;
}
break;
case 4:
if (screen.availHeight < 864 || screen.availWidth < 1152) {
$('#' + id).hide();
err_msg = "The selected screen resolution (1152x864) oversizes the actual resolution (" + screen.availWidth + "x" + screen.availHeight + ")";
throw {
name: "Fit Error",
level: "Show Stopper",
message: err_msg,
htmlMessage: "<span style='color:red'>" + err_msg + "</span>",
toString: function() {
return this.name + ": " + this.message;
}
};
return false;
} else {
$('#' + id).css('width', '1152px');
$('#' + id).css('height', '864px');
return true;
}
break;
case 5:
if (screen.availHeight < 720 || screen.availWidth < 1280) {
$('#' + id).hide();
err_msg = "The selected screen resolution (1280x720) oversizes the actual resolution (" + screen.availWidth + "x" + screen.availHeight + ")";
throw {
name: "Fit Error",
level: "Show Stopper",
message: err_msg,
htmlMessage: "<span style='color:red'>" + err_msg + "</span>",
toString: function() {
return this.name + ": " + this.message;
}
};
return false;
} else {
$('#' + id).css('width', '1280px');
$('#' + id).css('height', '720px');
return true;
}
break;
case 6:
if (screen.availHeight < 768 || screen.availWidth < 1280) {
$('#' + id).hide();
err_msg = "The selected screen resolution (1280x768) oversizes the actual resolution (" + screen.availWidth + "x" + screen.availHeight + ")";
throw {
name: "Fit Error",
level: "Show Stopper",
message: err_msg,
htmlMessage: "<span style='color:red'>" + err_msg + "</span>",
toString: function() {
return this.name + ": " + this.message;
}
};
return false;
} else {
$('#' + id).css('width', '1280px');
$('#' + id).css('height', '768px');
return true;
}
break;
case 7:
if (screen.availHeight < 800 || screen.availWidth < 1280) {
$('#' + id).hide();
err_msg = "The selected screen resolution (1280x800) oversizes the actual resolution (" + screen.availWidth + "x" + screen.availHeight + ")";
throw {
name: "Fit Error",
level: "Show Stopper",
message: err_msg,
htmlMessage: "<span style='color:red'>" + err_msg + "</span>",
toString: function() {
return this.name + ": " + this.message;
}
};
return false
} else {
$('#' + id).css('width', '1280px');
$('#' + id).css('height', '800px');
return true;
}
break;
case 8:
if (screen.availHeight < 1024 || screen.availWidth < 1280) {
$('#' + id).hide();
err_msg = "The selected screen resolution (1280x1024) oversizes the actual resolution (" + screen.availWidth + "x" + screen.availHeight + ")";
throw {
name: "Fit Error",
level: "Show Stopper",
message: err_msg,
htmlMessage: "<span style='color:red'>" + err_msg + "</span>",
toString: function() {
return this.name + ": " + this.message;
}
};
return false;
} else {
$('#' + id).css('width', '1280px');
$('#' + id).css('height', '1024px');
return true;
}
break;
default:
$('#' + id).hide();
err_msg = "The selected screen resolution (" + b + ") isn't recognized by our system. Resolutions go from 1 to 8.";
throw {
name: "Syntax Error",
level: "Show Stopper",
message: err_msg,
htmlMessage: "<span style='color:red>" + err_msg + "<span>",
toString: function() {
return this.name + ": " + this.message;
}
};
return false;
break;
}
};
//c = obj id, d = top pos, e = left pos
this.addObject = function(c, d, e) {
if (typeof d == typeof 42 && typeof e == typeof 42) {
$('#' + id).append($('#' + c));
posTop = $('#' + id).offset().top + d;
posLeft = $('#' + id).offset().left + e;
$('#' + c).offset({
top: posTop,
left: posLeft
});
return true;
} else {
err_msg = "The positions given for the addObject(id, posTop, posLeft) method are not numerical.";
throw {
name: "Syntax Error",
level: "Show Stopper",
message: err_msg,
htmlMessage: "<span style='color:red'>" + err_msg + "</span>",
toString: function() {
return this.name + ": " + this.message;
}
};
return false;
}
};
}
}
function createDisplayer(id, res) {
var myDisplayer = new displayer(id, res);
myDisplayer.initialize();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button onclick="createDisplayer('anId',1);">Create the displayer</button>
<br/>
<div id="anId"></div>
答案 0 :(得分：4)
在处理a的值时，您过早地返回。
if (typeof a == 'string') {
var id = a;
return true; // remove this
} else {
var id = $(a).prop('id');
return; // and this
}
了解我是如何发现这一点可能对您有用。通常的做法是，如果您认为某些事物应该被分配给定值，但不是在预期分配之前或之后放置记录语句。
我在console.log之前放置了一个this.initialize = function() { ...，然后注意到它从未被记录过。这表明该函数必须在该点之前返回。