Javascript 类 function 调用不起作用[重复]

Question

这个问题在这里已经有了答案：

如何在回调中访问正确的 `this` 13 个答案

23 天前关闭。

So I am calling a function from another function within a class in JavaScript and I get an error: this.functionname is not a function. 所以天才们，帮帮我。

第一个调用调用 cartManager class 中的 function 将物品放入购物车（后端），成功后，我想更新一个浮动购物车图标。 第一次调用有效并且后端很好，但是成功后的第二次调用不起作用它给了我一个错误。

class cartManager{
    constructor(){
        //Do something here
    }

    fetchCartIcon(){
        /*
            Fetch cart icon
        */
       alert("Fetch cart icon");
        $.ajax({
            type :"POST",
            url: "backend/cart-manager.php",
            data: {"mode":"cart_icon"},
            error: function(data){
                alert(data);
            },
            success: function(data){
                alert(data);
                $(".cart-icon").attr('src', data);
            }
        });
        
    }

    fetchCartContents(){
        /*
            Fetch contents of cart from backend
        */
        $.ajax({
            type : "POST",
            url : "backend/cart-manager.php",
            data: {},
            error: function(data){
                alert(data);
            },
            success: function(data){
                $("#cart-content").html(data);
            }
        });
    }

    addItemToCart(itemId){
        $.ajax({
            type : "POST",
            url: "backend/cart-manager.php",
            data: {"mode" : "add_to_cart", "item_id" : itemId},
            beforeSend: function(){
                $("#image-output-"+itemId).html("<div class = 'cart-cover'><img src = 'icons/load.gif' class = 'dynamic-image' /></div>");
            },
            error: function(data){
                alert(data);
            },
            success: function(data){
                if(data == "successful"){

                
                setTimeout(function(){
                    $("#image-output-"+itemId).html("<div class = 'cart-cover'><img src = 'icons/tick.gif' class = 'dynamic-image' /></div>");
                }, 1000);
               
                setTimeout(function(){
                    $("#image-output-"+itemId).html("");
                }, 1500);
                $("#add-cart-"+itemId).attr("src", "icons/added to cart.png");
                this.fetchCartIcon;
            }else{
                alert(data);
            }
            }
        });
    }

    removeItemFromCart(itemId){
        /*
            Remove item from cart
        */
        $.ajax({
            type: "POST",
            url: "backend/cart-manager.php",
            data : {},
            error: function(data){
                alert(data);
            },
            success: function(data){
                this.fetchCartIcon;
            }
        });
    }
}

从另一个 function 调用 addItemToCart

function addToCart(pId, bId, phoneNo, prodName, obj){
    let cart = new cartManager();
    cart.addItemToCart(pId);
}

Answer 1

使用箭头 function，因为您需要在词法上解决this问题。 否则this内部success function 将不会指向 object 本身，因为它的this取决于 function 调用站点（它被调用的位置）。

重写为：

success: (data) => {...and here everything stays the same}