javascript - var functionName = function() 不是函数

Question

我有一个名为 displayer 的 javascript 类，由一个 id 和一个 1 到 8 之间的无符号整数指定，并且包含一些方法(initialize()、getId() 和 addObject)。
问题是，当我在一个对象上创建一个新的显示实例并调用一个方法时，控制台抛出一个错误，显示“TypeError: myDisplayer.initialize is not a function”...

结果是我在上面搜索了太多时间，仍然没有看到问题出在哪里。有人有想法吗？

我插入了一个片段，以便您自己判断。

谢谢。

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>

Answer 1

处理 a 的值时，您会过早地返回。

if (typeof a == 'string') {
  var id = a;
  return true; // remove this
} else {
  var id = $(a).prop('id');
  return; // and this
}

了解我如何发现这一点可能对您有用。当您认为应该为某物分配给定值但实际并非如此时，一种常见的做法是将日志记录语句放在预期分配之前或之后。

我在 this.initialize = function() { ... 之前放置了一个 console.log 然后注意到它从未被记录。这表明该函数必须在该点之前返回。