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

【问题标题】：Uncaught Type Error: Undefined is not a function JavaScript Module未捕获类型错误：未定义不是函数 JavaScript 模块
【发布时间】：2016-11-15 21:30:25
【问题描述】：

我正在尝试将对 jQuery 对象的引用传递给模块，并且收到一条错误消息：Uncaught TypeError: undefined is not a function

我正在编写fiddle 来尝试理解我看到的这种模式，以及理解原型和新关键字。

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

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 编写更多模块。因此，如果我还有其他不正确的地方，请告诉我。谢谢！

【问题讨论】：

以$element 为参数的函数会立即执行，但您没有传递任何参数。并且this.$element 不存在，因此undefined。你把事情搞混了……
看这里stackoverflow.com/questions/8228281/…，这里看stackoverflow.com/questions/3127429/javascript-this-keyword
提示：MyClass 的值是多少？（该值是调用匿名函数的结果 - 请注意接近末尾的()。）
感谢 elclanrs 和 user2864740。我在想这是因为我没有在结尾处传递对 () 的任何引用。但我也认为调用 new MyClass($(element)) 会将 jQuery 选择器传递给 MyClass。您将如何将元素传递给 MyClass？ new 关键字是我试图理解的新内容。
我编辑了我的问题以更好地解释我想要学习的内容。我看到了一个与我发布的类似的模式，并试图理解一些我读过但没有太多实践的概念。比如新的关键字和原型。

标签： javascript jquery

【解决方案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。把它们放在后面。

【讨论】：

谢谢！我编辑了我的问题，以更好地解释我想要做什么。我已经阅读了有关原型和新关键字的信息，但以前没有使用过它们。所以我试图将一个元素传递给模块，看看我能不能从那里做什么。 :)
@Mdd 已编辑以解决该问题，但在提出问题后更改这么多并不被认为是好的。
@rvighne 谢谢你，我很抱歉编辑这个问题。谢谢你的例子。你将如何扩展 MyClass 以添加另一个带有原型的方法？
@Mdd 再次......另一个问题......但很好。在 MyClass 被声明之后键入类似 MyClass.prototype.method = function () {} 的内容。
谢谢！这就是我试图弄清楚的。我一直在阅读有关原型和模块的文章，但我想看看我是否可以制作一个。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

道德：如果您尝试了上述解决方案，但仍然不起作用，请进行桌面检查并确保调用周围方法的每个地方都传递了正确的参数。

【讨论】：