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)

注： Iはまた、（this.runを試してみました）。これは。同じ結果で..ありがとう！

Answer 1

cartは「クラス」であり、cartDetailsはその「クラス」の「インスタンス」です。クラス自体ではなく、インスタンス上で "run"を実行する必要があります。そのため、cart.run（）は機能しません。 this.runを使用すると、ajax呼び出しに渡されたコールバックがカートクラス自体のプロパティとして定義されていないため、 "this"はインスタンスを参照しません。

私はこれを試していないが、私は次のように動作するはずと信じて：

あなたのAjax機能は、プロパティカートクラスとして定義されているので、「これは」インスタンスを参照します。 ajax関数の初めに変数 "this"を変数に格納します。これは成功コールバックで後でアクセスできます。

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..'); 
     } 
    }); 
},