Uncaught : Inventory.updateInventory不是函数

Question

当我进入站点时，控制台会对错误发誓：

Uncaught TypeError: Inventory.updateInventory is not a function
    at HTMLDocument.<anonymous> (inventory.js:353)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

inventory.js:353: if (USER_ID !== 'null') Inventory.updateInventory();

我完整的JS代码：

class Inventory {

    constructor() {
        this.selectedItem = 0;
        this.sumItems = 0;
    }

    noty(msg, status) {
        // noty({
        //     text: msg,
        //     type: status,
        //     layout: 'topRight',
        //     timeout: 4000,
        //     animation: {
        //         open: 'animated bounceInRight',
        //         close: 'animated bounceOutRight'
        //     }
        // }).show();
    }

    updateInventory() {
        $.ajax({
            url: '/api/inventory/update',
            type: 'POST'
        })
            .done( (data) => {
                if (data.success) {
                    const items = data.items;
                    const balance = data.balance;
                    let itemsCount = 0;

                    $('.userBalance').html(balance);
                    $('.invent-main').html('');
                    items.forEach( (item) => {
                        itemsCount++;
                        $('.invent-main').append('<div id="item" title="'+item.market_hash_name+'" data-id="'+item.assetid+'" data-price="'+item.price+'" onclick="Inventory.selectItemInventory('+item.assetid+')" class="rarity-'+item.type+'">\n' +
                            '                            <img src="https://steamcommunity-a.akamaihd.net/economy/image/'+item.classid+'//60fx60f" class="invent-item">\n' +
                            '                            <div class="item-bottom">\n' +
                            '                                <div class="item-bottom-l">\n' +
                            '                                    '+item.price+'\n' +
                            '                                </div>\n' +
                            '                                <div class="item-bottom-r">\n' +
                            '                                    <i class="fa fa-database" aria-hidden="true"></i>\n' +
                            '                                </div>\n' +
                            '                            </div>\n' +
                            '                        </div>');
                    });

                    $('#itemsInventory').html(itemsCount);
                    $('#sumInventoryAll').html(data.sum);
                }
            })
            .fail( (error) => {
                toastr.error('Error', 'error');
                console.log(error);
            })
    }

    selectItemInventory(id) {
        if (this.selectedItem >= 30) {
            toastr.error('Only 30 items', 'warning');
            return;
        }

        $('[data-id="'+id+'"]').attr('onclick', 'Inventory.unselectedItemInventory(' + id + ');');
        $('[data-id="'+id+'"]').attr('id', 'item-a');

        this.selectedItem++;
        this.sumItems += $('[data-id="'+id+'"]').data('price');

        $('#takeInventory').html(`${this.selectedItem}`);
        $('#sumInventory').html(`${this.sumItems}`);
    }

    unselectedItemInventory(id) {
        $('[data-id="'+id+'"]').attr('onclick', 'Inventory.selectItemInventory(' + id + ');');
        $('[data-id="'+id+'"]').attr('id', 'item');

        this.selectedItem--;
        this.sumItems -= $('[data-id="'+id+'"]').data('price');

        $('#takeInventory').html(`${this.selectedItem}`);
        $('#sumInventory').html(`${this.sumItems}`);
    }

    openModalTrade(trade) {
        $('#tradeModal').attr('href', `https://steamcommunity.com/tradeoffer/${trade}/`);
        $('#tradeoffer-modal').arcticmodal();
    }

    unselectAll() {
        this.selectedItem = 0;
        this.sumItems = 0;

        $('#takeInventory').html(`${this.selectedItem}`);
        $('#sumInventory').html(`${this.sumItems}`);
    }
}

/**
 * Variable
 */
let selectedItems = 0;
let sumItems = 0;

/**
 * Select ITEM Inventory-Steam
 */
const selectItem = (id) => {
    if (selectedItems >= 30) {
        toastr.error('Only 30 items', 'warning');
        return;
    }
    $('[data-id="'+id+'"]').attr('onclick', 'unselectedItem(' + id + ');');
    $('[data-id="'+id+'"]').attr('id', 'item1-a');
    selectedItems++;
    sumItems += $('[data-id="'+id+'"]').data('price');

    $('#total-count').html(selectedItems);
    $('#total-price').html(sumItems);
};

/**
 * Unselected ITEM Inventory-Steam
 */
const unselectedItem = (id) => {
    $('[data-id="'+id+'"]').attr('onclick', 'selectItem(' + id + ');');
    $('[data-id="'+id+'"]').attr('id', 'item1');
    selectedItems--;
    sumItems -= $('[data-id="'+id+'"]').data('price');

    $('#total-count').html(selectedItems);
    $('#total-price').html(sumItems);
};

/**
 * Deposit Inventory Steam
 */
const AddItemsInInventory = () => {
    let items = [];
    $('[id="item1-a"]').each( (item, i, arr) => {
        items.push($(i).data('id'));
    });
    $.ajax({
        url: '/api/inventory/trade',
        type: 'POST',
        data: {items: items}
    })
        .done( (data) => {
            return toastr[data.status](data.msg);
        })
        .fail( (error) => {
            toastr.error('Uncknown error', 'error');
            console.log(error);
        })
};

$(document).ready(() => {

    const socket = io.connect(':8080', {secure: true});

    /**
     * Modal Inventory
     */
    $('.buttons-invent-in-2').click( () => {
        $('#loadinventorysteam').html('');
        $('#inventory');
        selectedItems = 0;
        sumItems = 0;
        $.ajax({
            url: '/api/inventory/load',
            type: 'POST'
        })
            .done( (data) => {
                if (!data.success) return Inventory.noty(data.msg, 'warning');
                if (data.items.length == 0) return toastr.error('Empty inventory', 'warning');
                LoadSteamInventory(data.items);
            })
            .fail( (error) => {
                toastr.error('Can't received inventory', 'error');
                console.log(error);
            })
    });

    /**
     * Withdraw
     */
    $('.buttons-invent-in-4').click( () => {
        let items = [];
        $('[id="item-a"]').each( (item, i, arr) => {
            items.push($(i).data('id'));
        });

        if (items.length == 0) {
            toastr.error('Choose items!', 'warning');
            return;
        }

        $.ajax({
            url: '/api/inventory/withdraw',
            type: 'POST',
            data: {items: items}
        })
            .done( (data) => {
                if (data.success) {
                    $('[id="item-a"]').each( (item, i, arr) => {
                        $(i).remove();
                    });
                    Inventory.unselectAll();
                }
                return toastr[data.status](data.msg);
            })
            .fail( (error) => {
                toastr.error('Error', 'error');
                console.log(error);
            })
    });

    /**
     * Send friend
     */
    $('.buttons-invent-in-5').click( () => {
        const idUser = prompt('Write ID');
        if (idUser) {
            let items = [];
            $('[id="item-a"]').each((item, i, arr) => {
                items.push($(i).data('id'));
            });

            if (items.length == 0) {
                toastr.error('Choose items!', 'warning');
                return;
            }

            $.ajax({
                url: '/api/inventory/sendUser',
                type: 'POST',
                data: {items: items, user: idUser}
            })
                .done((data) => {
                    if (data.success) {
                        $('[id="item-a"]').each((item, i, arr) => {
                            $(i).remove();
                        });
                        Game.unselectAll();
                    }
                    return toastr[data.status](data.msg);
                })
                .fail((error) => {
                    toastr.error('Error', 'error');
                    console.log(error);
                })
        }
    });

    /**
     * Sell items
     */
    $('.buttons-invent-in-3').click( () => {
        if (confirm('You want sell?')) {
            let items = [];
            $('[id="item-a"]').each((item, i, arr) => {
                items.push($(i).data('id'));
            });

            if (items.length == 0) {
                toastr.error('Choose items!', 'warning');
                return;
            }

            $.ajax({
                url: '/api/inventory/sell',
                type: 'POST',
                data: {items: items}
            })
                .done((data) => {
                    if (data.success) {
                        $('[id="item-a"]').each((item, i, arr) => {
                            $(i).remove();
                        });
                        Inventory.unselectAll();
                        Inventory.updateInventory();
                        $('.userBalance').html(data.balance);
                    }
                    return toastr[data.status](data.msg);
                })
                .fail((error) => {
                    toastr.error('Error', 'error');
                    console.log(error);
                })
        }
    });
    /**
     * New Bet
     */
    $('.add-items').click( () => {
        let items = [];
        $('[id="item-a"]').each( (item, i, arr) => {
            items.push($(i).data('id'));
        });

        if (items.length == 0) {
            toastr.error('Choose items!', 'warning');
            return;
        }

        $.ajax({
            url: '/api/game/newBet',
            type: 'POST',
            data: {items: items}
        })
            .done( (data) => {
                if (data.success) {
                    $('[id="item-a"]').each( (item, i, arr) => {
                        $(i).remove();
                    });
                    Inventory.unselectAll();
                }
                return toastr[data.status](data.msg);
            })
            .fail( (error) => {
                toastr.error('Error', 'error');
                console.log(error);
            })
    });

    /**
     * Inventory
     */
    const LoadSteamInventory = (data) => {
        data.forEach( (item) => {
            $('#loadinventorysteam').append('<div id="item1" class="rarity-'+item.type+'" data-id="'+item.id+'" data-price="'+item.price+'" onclick="selectItem('+item.id+')"><img src="https://steamcommunity-a.akamaihd.net/economy/image/'+item.classid+'//60fx60f" class="invent-item"><div class="item-bottom"><div class="item-bottom-l">'+item.price+'</div><div class="item-bottom-r"><i class="fa fa-rub" aria-hidden="true"></i></div></div></div>');
        });
    };

    /**
     * Notify
     */
    socket.on('notify', (data) => {
        if (data.steamid === USER_ID) {
            toastr[data.status](data.msg);
            Inventory.updateInventory();

            if (data.trade) {
                Inventory.openModalTrade(data.trade);
            }
        }
    });

    /**
     * Update
     */
    if (USER_ID !== 'null') Inventory.updateInventory();
    socket.on('updateInventory', (data) => {
        if (data.steamid === USER_ID) {
            Inventory.updateInventory();
        }
    });
});

怎么了？我怎样才能纠正这个错误？

Answer 1

好吧..。好消息是您正在使用JS ES6

如果您打算从类中创建多个实例(每个实例具有不同的状态)，则应该使用：

const inv = new Inventory()

...

inv.updateInventory()

如果您打算直接使用类中的方法(没有多状态管理)，则应该将方法定义为static。

class Inventory {

    static updateInventory() {
    }

...

Inventory.updateInventory()

注意，当使用static方法时，您的constuctor将不会被调用