未捕获类型错误：未定义不是函数JavaScript模块

Question

我试图将一个jQuery对象的引用传递给一个模块，并且一直收到一条错误消息： Uncaught TypeError：undefined不是函数

我工作的一个fiddle ，试图理解这个模式，我看到，以及了解原型和新的关键字。

我不确定是什么导致了这个错误。 这是我的HTML和JavaScript以及fiddle 。

小提琴。

HTML ：

<div class="js-container" data-options="true"></div>
<div class="js-container" data-options="false"></div>

JavaScript ：

$('.js-container').each(function (i, element) {
    new MyClass($(element));
    console.log($(element));
});
var MyClass = (function ($element) {
    this.$element;
    console.log(this.$element);    
    this.init();    
    MyClass.prototype.init = function () {
        this.addText();        
        return this;
    };    
    MyClass.prototype.addText = function () {
        var optText = this.$element.attr('data-options');
        this.$element.text(optText);        
        return this;
    };    
}());

我正在努力学习用JavaScript编写更多模块。 所以，如果我有其他不正确之处，请告诉我。 谢谢！

Answer 1

在运行使用MyClass的代码后，您正在定义MyClass。 此外，将您的类填充到变量而不是将其称为“传统”方式会导致一些问题。 试试这个：

function MyClass ($element) {

  this.$element;
  console.log(this.$element);

  // more code...
}

$('.js-container').each(function (i, element) {
  new MyClass($(element));
  console.log($(element));
});

另外，移动MyClass.prototype. 实际MyClass中的定义。 把它们放在后面。

Answer 2

对于它的价值，很多时候当我看到这个问题时，我发现我在html中引用它之前无意中调用了一个函数。 例如，我在加载jquery文件之前在js文件中调用了jquery方法。 将jquery引用进一步放在页面上解决了它。

Answer 3

上述答案都不适合我。 但当然，我的问题很特别。 我正在回收一个旧项目来创建一个新项目，并且有一个方法使我忘记了这个类（并且传入了一个字符串而不是一个函数），并且它没有更新的事实给了我这个错误，即使我在其他地方的语法都正确。

道德：如果您尝试上述解决方案并且仍然无效，请检查并确保调用周围方法的每个位置都传递正确的参数。