javascript - 正确调用 JQuery 方法

Question

我在 jQuery 对象中有一个方法，如下所示:

formatPhone: function(phone){
    return  phone.substring(0,3) +  "." + phone.substring(3,6) + "." + phone.substring(6,10);
}

在同一个对象内，我这样调用它:

"<h4>" + this.formatPhone(item.MainPhone) + "</h4>"

我收到“TypeError: 'undefined' is not a function (evaluating 'this.formatPhone(item.MainPhone)')

我控制台记录了项目对象，MainPhone 肯定有一个值。

是不是我调用错误了？？？

感谢任何帮助。

--更新--这是完整的 app.js 文件

var home = {
    init: function(){
        // Just some styling
        $('.ms-core-sideNavBox-removeLeftMargin').css('display', 'none');
        $('#contentBox').css('margin-left', '0' );

        // Get List Items via AJAX
        this.getAllNews();
        this.getAllEvents();
        this.getAllLinks();

        // Event Handlers
        $('#btnGoHome').on('click', this.showHome);
        $('#btnFindCorp').on('click', this.showProperty);
        $('#btnFindProp').on('click', this.showOther);
        $('#prop_search').on('focus', this.getAllProps);

        $('#property_addressbook').on('click', '.tblPropListed', this.getSingleProperty);

    },

    //methods
    showProperty: function(){
        $('#main_content').hide();
        $('#pageTitle').append(" -- Property Addressbook");
        $('#property_content').show();
    },

    showHome: function(){
        $('#other_content').hide();
        $('#main_content').show();
    },

    getAllNews: function(){
        $.ajax({
            url: "/_api/web/lists/GetByTitle('Latest News')/items?$orderby=ID desc",
            type: "GET",
            headers: { "accept" : "application/json;odata=verbose" },
            dataType: 'json',
            success: function(data){
                $.each(data.d.results, function(index, item){
                    var addinfo = "";
                    if( item.Additional_x0020_Info ){
                        addinfo = "<a class='lnkAnnounce' target='_blank' href='" + item.Additional_x0020_Info.Url  + "'>See More ...</a>";
                    } // end if

                    $('#news_listing').append(
                        "<div id='listitem-" + item.ID + "' class='announce_container'>" + 
                        "<table style='width:100%;'><tr><td style='width:20%;' valign='top' align='center'>" + 
                        "<img src='/SiteAssets/" + item.TaxonomyId + ".png' />" + 
                        "</td><td style='width:80%;'>" + 
                        "<h1 class='announce_title'>" + item.Title + "</h1><hr>" + 
                        "<span class='announce_body'>" + item.Body +"</span>" + 
                        addinfo + "</td></tr></table></div>"
                    );
                });
            },
            error: function(request, errorType, errorMessage){
                console.log('Error: ' + errorType + ' with message: ' + errorMessage);
            }
        });
    },

    getAllEvents: function(){
        $.ajax({
            url: "/_api/web/lists/GetByTitle('Corporate Calendar')/items?select=ID,Title,Taxonomy/Title,Event_x0020_Date&$orderby=Event_x0020_Date asc",
            type: "GET",
            headers: { "accept" : "application/json;odata=verbose" },
            dataType: 'json',
            success: function(data){
                $.each(data.d.results, function(index, item){
                    var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

                    var calDate = item.Event_x0020_Date;
                    var dt = new Date(calDate);
                    var today = new Date();

                    var day = dt.getDate();
                    var month = monthname[dt.getMonth()];
                    var year = dt.getFullYear();

                    if( today < dt ){
                        $('#event_listing').append( 
                            "<div id='listitem-" + item.ID + "' class='cal_container'>" + 
                            "<table style='width:100%;'><tr><td style='width:20%;' valign='top' align='center'>" + 
                            "<img src='/SiteAssets/" + item.TaxonomyId + ".png' />" +
                            "</td><td style='width:80%;'>" + 
                            "<span class='cal_date'>" + month + ' ' + day + ', ' + year + "</span>" + 
                            "<hr><span class='cal_title'>" + item.Title + "</span>" + 
                            "<br><br></td></tr></table></div>"
                        );
                    } // end if
                });
            },
            error: function(request, errorType, errorMessage){
                console.log('Error: ' + errorType + ' with message: ' + errorMessage);
            }
        });
    },

    getAllLinks: function(){
        $.ajax({
            url: "/_api/web/lists/GetByTitle('Important Links')/items",
            type: "GET",
            headers: { "accept" : "application/json;odata=verbose" },
            dataType: 'json',
            success: function(data){
                $.each(data.d.results, function(index, item){
                    $('#link_listing').append( "<li><a target='_blank' href='" + item.URL.Url  + "'>" + item.URL.Description + "</a></li>" );
                    //remove target='_blank' from Paid Holidays
                    $('#edr_links').find('a:contains("Paid Holidays")').attr("target", "");
                });
            },
            error: function(request, errorType, errorMessage){
                console.log('Error: ' + errorType + ' with message: ' + errorMessage);
            }
        });
    },

    getAllProps: function(){
        $.ajax({
            url: "/msd/_api/web/lists/GetByTitle('Communities')/items?$orderby=PropNumber asc",
            type: "GET",
            headers: { "accept" : "application/json;odata=verbose" },
            dataType: 'json',
            success: function(data){
                $.each(data.d.results, function(index, item){
                    if( !item.MainPhone ){ item.MainPhone = "9012592500"; }
                    $("#prop_show").append(
                        "<tr class='tblPropListed' style='width:100%' data-prp='" + item.PropNumber +  "' data-prop='" + item.Title + "'>" + 
                        "<td style='width:5%;' valign='middle' class='prplspropnum'>" + item.PropNumber + "</td>" + 
                        "<td valign='top' style='width:95%;border:2px solid #CCC;'><span class='prplstitle'>" + item.Title + "</span><br>" + 
                        "<span class='prplslocation'>" + item.City + ", " + item.State + "</span>" + 
                        "<span class='prplsphone'>" 
                        + item.MainPhone.substring(0,3) +  "." + item.MainPhone.substring(3,6) + "." + item.MainPhone.substring(6,10) +
                        "</span></td>" + 
                        "</tr>"
                    );
                });
                $('#prop_search').keyup(function(){
                    var fldval = $(this).val();
                    fldval = fldval.toLowerCase();
                    if( fldval == ''){
                        $(".tblPropListed").each(function(index){ $(this).show(); });
                    } // end if

                    $(".tblPropListed").each(function(index){
                        var prp = $(this).data('prp') + $(this).data('prop');
                        prp = prp.toLowerCase();
                        if(prp.indexOf(fldval) === -1){
                            $(this).hide();
                        } else {
                            $(this).show();
                        } // end if
                    });
                });
            },
            error: function(request, errorType, errorMessage){
                console.log('Error: ' + errorType + ' with message: ' + errorMessage);
            }
        });
    },

    hideAllProps: function(){
        $("#prop_show").html("");
    },

    getSingleProperty: function(){
        var prp = $(this).data('prp');
        var prpPix = prp;
        var ulh = ["210", "217", "222", "258"];
        if(ulh.indexOf(prp) !== -1){
            prpPix = "400";
        } // end if
        $("#prop_show").html(""); 
        $("#prop_search").val("");
        $('#main_content').hide();
        $('#pageTitle').append("&nbsp;--&nbsp;Property Addressbook");
        $('#property_content').show();

        $.ajax({
            url: "/msd/_api/web/lists/GetByTitle('Communities')/items?$filter=PropNumber eq " + prpPix,
            type: "GET",
            headers: { "accept" : "application/json;odata=verbose" },
            dataType: 'json',
            success: function(data){
                $.each(data.d.results, function(index, item){
                    console.log(item);
                    $('#property_left').append(
                        "<p style='text-align:center;'>" + 
                        "<img src='http://www.edrpo.com/edrAssets/propsP/" + item.PropNumber + "/homeRotator/01.jpg' width='650px' height='auto' />" + 
                        "</p>" + 
                         "<h1>" + item.Title + "</h1>"   + 
                         "<h3>" + item.Address + "<br>" + item.City + ", " + item.State + " " + item.Zip + "</h3>" + 
                         "<h4>901.259.2500</h4>" + 
                         //"<h4>" + this.formatPhone(item.MainPhone) + "</h4>" + 
                         "<p><a href='" + item.WebSite + "'>website</a>" + 
                         "<br><br><hr>" + 
                         "<table style='width:100%;'><tr><td style='width:30%;'>Community Manager</td><td style='width:35%;'><b>" + 
                         item._x0061_c55 + 
                         "</b></td><td style='width:20%;'>" + 
                         item.rens + 
                         "</td><td style='width:15%;'>" + 
                         item.j0nk + 
                         "</td><tr><tr><td style='width:30%;'>ACM</td><td style='width:35%;'><b>" + 
                         item.khml + 
                         "</b></td><td style='width:20%;'>" + 
                         item.ifur + 
                         "</td><td style='width:15%;'>" + 
                         item.q9up + 
                         "</td><tr><tr><td style='width:30%;'>ACM2</td><td style='width:35%;'><b>" + 
                         item._x0041_CM2 + 
                         "</b></td><td style='width:20%;'>" + 
                         item.ACM2_x0020_Direct + 
                         "</td><td style='width:15%;'>" + 
                         item.ACM2_x0020_VOIP + 
                         "</td><tr><tr><td style='width:30%;'>LMM</td><td style='width:35%;'><b>" + 
                         item._x006b_vj7 + 
                         "</b></td><td style='width:20%;'>" + 
                         item._x006f_si0 + 
                         "</td><td style='width:15%;'>" + 
                         item.rnhw + 
                         "</td><tr><tr><td style='width:30%;'>LP</td><td style='width:35%;'><b>" + 
                         item.LP + 
                         "</b></td><td style='width:20%;'>" + 
                         item.LP_x0020_Direct + 
                         "</td><td style='width:15%;'>" + 
                         item.LP_x0020_VOIP + 
                         "</td><tr><tr><td style='width:30%;'>RLM</td><td style='width:35%;'><b>" + 
                         item.RLM + 
                         "</b></td><td style='width:20%;'>" + 
                         item.RLM_x0020_Direct + 
                         "</td><td style='width:15%;'>" + 
                         item.RLM_x0020_VOIP + 
                          "</td><tr><tr><td style='width:30%;'>RLC</td><td style='width:35%;'><b>" + 
                         item.RLC + 
                         "</b></td><td style='width:20%;'>" + 
                         item.RLC_x0020_Direct + 
                         "</td><td style='width:15%;'>" + 
                         item.RLC_x0020_VOIP + 
                          "</td><tr><tr><td style='width:30%;'>RLC2</td><td style='width:35%;'><b>" + 
                         item._x0052_LC2 + 
                         "</b></td><td style='width:20%;'>" + 
                         item.RLC2_x0020_Direct + 
                         "</td><td style='width:15%;'>" + 
                         item.RLC2_x0020_VOIP + 
                          "</td><tr><tr><td style='width:30%;'>RSM</td><td style='width:35%;'><b>" + 
                         item.RSM + 
                         "</b></td><td style='width:20%;'>" + 
                         item.RSM_x0020_Direct + 
                         "</td><td style='width:15%;'>" + 
                         item.RSM_x0020_VOIP + 
                          "</td><tr><tr><td style='width:30%;'>Maintenance Manager</td><td style='width:35%;'><b>" + 
                          item.MM + 
                         "</b></td><td style='width:20%;'>" + 
                           item.MM_x0020_Direct + 
                         "</td><td style='width:15%;'>" + 
                         item.MM_x0020_VOIP + 
                         "</td><tr><table>"     
                    );
                });
            },
            error: function(request, errorType, errorMessage){
                console.log('Error: ' + errorType + ' with message: ' + errorMessage);
            }   
        });
    },

    formatPhone: function(phone){
        return  phone.substring(0,3) +  "." + phone.substring(3,6) + "." + phone.substring(6,10);
    }
};

$(document).ready( function(){
    home.init();
});

Answer 1

您应该这样调用它:yourObjectname.formatPhone()，而不是使用this
作为示例，请参阅以下代码:

var yourObjectname = {
    formatPhone: function(phone){
      return phone;
    },
    anotherFunction: function(){
      alert(this.formatPhone('555'));
    }
}
yourObjectname.anotherFunction();
// or
alert(yourObjectname.formatPhone('555'));

正如您所看到的this，您只能在特定对象内部使用，但在外部您应该调用yourObjectname