JavaScript - this.update 不是函数答案

【问题标题】：JavaScript - this.update is not a functionJavaScript - this.update 不是函数
【发布时间】：2016-11-21 16:33:05
【问题描述】：

最近我尝试在 jQuery 中使用 JavaScript OOP，我写了这段代码：

var beer = function(){};

$.extend(ntf.prototype, {
    types:{
        '.test':'test',
    },

    init:function() {
        $.each(this.types, function(key, value) {
            this.update(key, value);
        });
    },
    update:function(className, actionName) {
        $(className + ' .event').click(function() {
            $(this).parent().find('.pevent').load('navigate.php?do=create&action=' + actionName);
            alert("TEST");
        }).click();
    },
    pics:{
        add:function(element) {
            $.post("navigate.php?do=nav&action=pics", {
                name:$(element).data('name'),
            });
        }
    }
});
beer.prototype.init();

但是，在控制台中它返回此错误：Uncaught TypeError: this.update is not a function。

如何以更好的方式将 JavaScript OOP 与 jQuery 结合使用，我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery oop

【解决方案1】：

这是范围问题。请注意，“this”在“each”函数调用之前和调用内部是不同的。

在这种情况下，您可以通过将其分配给局部变量来使用范围，即“我”。

 init:function() {
    var me = this;
        $.each(this.types, function(key, value) {
            me.update(key, value);
        });
    },

如果您想查看范围之间的区别，只需记录两者并在控制台中检查。

这里第一个“this”是全局作用域，而第二个（在匿名方法内）是局部作用域。

 init:function() {
        console.log(this);
        $.each(this.types, function(key, value) {
            console.log(this);
        });
    },

您可以参考这里以获得更多关于此范围的说明：http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/

【讨论】：

谢谢！而且，还有更好的方法在 JavaScript OOP 中使用 jQuery 吗？
我无法预见您使用此类比的方式会出现任何问题。继续，您将在使用它时了解更多信息。
如果它适合您，请将其标记为答案，以便其他人可以找到它。

【解决方案2】：

除了@Ash说的，我也是bind的粉丝

 init:function() {
   $.each(this.types, function(key, value) {
     this.update(key, value);
   }.bind(this);
 },

【讨论】：