显示不是函数错误的JavaScript模式

Question

我是javascript新手。我正在尝试使用JavaScript模式。我很了解概念。但我不知道如何调用已经在对象中的函数。

var productValues = 0; 
    var cart = function(){ 
    this.method = "get"; 
    } 

cart.prototype ={ 
ajax : function(obj,Url){ 
    console.log("into ajax call"); 
    $.ajax({ 
     url: Url, 
     type :"Get", 
     headers : { 
      'Accept':'Application/json', 
      'Content-Type' : 'Application/json' 
     }, 
     data : "jsonObj="+JSON.stringify(obj), 
     success : function(response) { 
      productValues= response; 
      console.log(productValues); 
      cart.run(); 
     }, 
     error : function() { 
      alert('Error while request..'); 
     } 
    }); 
}, 
remove : function(number){ 
    var obj={"identity": number }; 
    this.ajax(obj,"Cartremove"); 
    window.location.href="mycart.jsp"; 
}, 

delivery : function(number){ 
    var obj={"identity": number }; 
    this.ajax(obj,"delivery"); 
    window.location.href="delivery.jsp"; 
}, 

run : function(){ 
    console.log("into run"); 
      var count=1; 
      if(typeof productValues.obj1 === "undefined"){ 
       var h3 = document.createElement('h3'); 
       var t1 =document.createTextNode("Nothing to display"); 
       h3.appendChild(t1); 
       h3.setAttribute("align","center"); 
       document.getElementById("addtable").appendChild(h3); 
      } 
      else{ 
      $.each(productValues, function (index, value) { 
        var cell, row, table; 
        table = document.createElement('table'); 
        table.setAttribute('align','center'); 
        table.style.width= '60%'; 
        table.style.cellpadding ="19px"; 

        table.setAttribute("class","table table-bordered"); 
        row = table.insertRow(0); 
        row.setAttribute('align','center'); 
        var x= row.insertCell(0);x.innerHTML = "Type"; 
        x.style.color="white"; 
        var y= row.insertCell(1); 
        y.innerHTML = "Description"; 
        y.style.color="white"; 
        row.style.backgroundColor ="#006064"; 
        row = table.insertRow(1); row.setAttribute('align','center'); 
        var prod= row.insertCell(0); prod.innerHTML = "ProductName"; 
        prod.setAttribute("value",value.id); 
        prod.setAttribute("id","nn"); 
        row.insertCell(1).innerHTML = value.productname; 

        row = table.insertRow(2); row.setAttribute('align','center'); 
        row.insertCell(0).innerHTML = "Price"; 
        row.insertCell(1).innerHTML = value.price; 

        row = table.insertRow(3); row.setAttribute('align','center'); 
        row.insertCell(0).innerHTML = "Quantity"; 
        row.insertCell(1).innerHTML = value.quantity; 

        row = table.insertRow(4); row.setAttribute('align','center'); 
        row.insertCell(0).innerHTML = "Discount"; 
        row.insertCell(1).innerHTML = value.discount; 
        var br =document.createElement("br"); 
        var add= document.getElementById("addtable"); 
        add.setAttribute("align","center"); 
        add.appendChild(br); 
        add.appendChild(br); 
        add.appendChild(table); 
        var buyBtn = document.createElement("Button"); 
        buyBtn.setAttribute("class","btn btn-primary"); 
        buyBtn.innerHTML="Buy"; 
        buyBtn.setAttribute("value",count); 
        buyBtn.setAttribute("id","deliveryBtn"); 
     buyBtn.addEventListener("click",function(){this.delivery(value.id);}); 
        add.appendChild(buyBtn); 

        var removeBtn = document.createElement("Button"); 
        removeBtn.setAttribute("class","btn btn-primary"); 
        removeBtn.innerHTML="remove"; 
        removeBtn.setAttribute("id","removeBtn"); 
        removeBtn.setAttribute("value",count); 
     removeBtn.addEventListener("click",function(){this.remove(value.id);}); 
        add.appendChild(removeBtn); 
        var div =document.createElement("div"); 
        var linebreak= document.createElement("br"); 
        div.appendChild(linebreak); 
        add.appendChild(div); 
        count++; 
      }); 
     } 
     } 
} 
function call(){ 
    console.log("into call function"); 
    var cartDetails = new cart(); 
    cartDetails.ajax("","myCart"); 
} 

对于澄清：

-I have 3 ajax calls For Remove , Delivery , Also for the page loading

run方法我创建一个DOM表。 当用户按下删除按钮 应该调用删除方法。并且ajax调用应该工作。

But its showing --> Uncaught TypeError: cart.run is not a function at Object.success (mycart.jsp:89)

注：我也试过this.run（）;和this.run;同样的结果..谢谢！

Answer 1

由于购物车是“类”，而cartDetails是该“类”的“实例”。你应该对实例执行“run”而不是类本身，这就是cart.run（）不起作用的原因。当您使用this.run时，“this”不会引用实例，因为传递给ajax调用的回调没有被定义为购物车类本身的属性。

我没有试过，但我相信下面应该工作：

你的AJAX功能被定义为一个属性的车类，所以“这”指的实例。在AJAX功能，存储的开始。“这”在一个变量，您可以稍后再访问成功回调：

ajax : function(obj,Url){ 

    var myself = this; 

    console.log("into ajax call"); 
    $.ajax({ 
     url: Url, 
     type :"Get", 
     headers : { 
      'Accept':'Application/json', 
      'Content-Type' : 'Application/json' 
     }, 
     data : "jsonObj="+JSON.stringify(obj), 
     success : function(response) { 
      productValues= response; 
      console.log(productValues); 

      myself.run(); 

     }, 
     error : function() { 
      alert('Error while request..'); 
     } 
    }); 
},