Question

我正在尝试将对jQuery对象的引用传递给模块，并且收到错误消息：未捕获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

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

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

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

3 个答案: