Question

我已经实例化了JavaScript 对象“用户”。它包含用户管理所需的所有内容。在这里管理甚至加载和可能的AJAX错误。下面是这个对象的快照。

var User = function(uid, ajaxURL) {
        this.uid = uid;
        this.ajaxURL = ajaxURL;
     };
     User.prototype = {
        loadingShow: function (tag) {
            this.tag = (tag) ? tag : '.tab-pane';
            $(this.tag + ' .loading').html('<img src="img/template/loading.gif" alt="Loading..." title="Loading...">').fadeIn('fast'); 
            },
            //...
    };
    User.prototype.loadAction = function (rel) {
        var utls = new User();
            var relAttr = rel;
        $.ajax({
            type: 'POST',
            url: this.ajaxURL + '&id=' + parseInt(this.uid),
            cache: true,
            dataType: 'json',
            data: {
                toDo: relAttr
            },
            beforeSend:function(){
                utls.loadingShow('#' + relAttr + '-tab');
            },
            //...

它工作正常，但我只是一个问题，也许是愚蠢但我面临的第一次是JavaScript OOP和基于原型的编程。

为什么我必须创建var utls = new User();才能调用此utls.loadingShow(而不是简单地通过this.loadingShow(调用它？使用this属性我得到错误“TypeError：this.loadingShow不是函数”。

Answer 1

“为什么我必须创建var utls = new User（）;用于调用此utls.loadingShow（而不是简单地通过this.loadingShow调用它（？”

因为回调中的this设置为jqXHR对象。

要覆盖它，您可以将context:请求的$.ajax属性设置为您想要的this值。

$.ajax({
        type: 'POST',
        url: this.ajaxURL + '&id=' + parseInt(this.uid),
        cache: true,
        dataType: 'json',
        context: this, // <-- set the `this` value of the callbacks
        data: {
            toDo: relAttr
        },
        beforeSend:function(){
        //   v--- now it's correct
            this.loadingShow('#' + relAttr + '-tab');
        },
        success: function(data) {
            var art_tmp_str = '';

 // Why are you using this? ---v
 //           $(document).ajaxComplete(function(event, request, settings) {

             //   v--- now it's correct
                this.loadingHide('#' + relAttr + '-tab');
                $('#' + relAttr + '-tab').html(''); 
                if(data.success === true) {
                               //   v--- now it's correct
                    art_tmp_str = this.writeAction(relAttr, data);
                    $('#' + relAttr + '-tab').append(art_tmp_str);
                } else
                    $('#' + relAttr + '-tab').append('<p>' + data.error + '</p>');
//            });

此外，当您已经在.ajaxComplete()回调中时，不应该为success提供处理程序。如果您确实希望将单个行为应用于所有已完成的请求，则应在执行任何ajax请求之前完成此操作。

JavaScript - 基于原型的编程 - this.myFunction不是函数错误

1 个答案: