如何通過其自身的功能更改對象的屬性？

Question

這來自我自己的js文件。

function hesap (hesapdiv, hesapmodal, hesapid){
    this.hesapid = hesapid;
    this.hesapdiv = hesapdiv;
    this.hesapmodal = hesapmodal;

    hesapdiv.on("click", "button", function() {
      hesapmodal.modal("show");
    });


    hesapmodal.on("click", "button[hesapid]", function() {
    var hesapid = $(this).attr('hesapid');
    console.log(this.hesapid + "-" + hesapid + "-" + $(this).attr('hesapid'));
    var isim = $(this).attr('isim');
    hesapdiv.find("input").val(hesapid + " - " + isim);
    hesapmodal.modal('hide');
  });}

和下面的代碼，我可以在我的所有網頁中使用。

var hesap1 = new hesap($("#hesapdiv"), $("#HesaplarModal"), 36);
$("#kasaislemikaydet").on('click', function(event) {
        event.preventDefault(); // To prevent following the link (optional)
        alert(hesap1.hesapid);)};

現在，當用戶從模態中選擇“快捷鍵”時，函數將成功獲取屬性值。 但是，它不會將值分配給對象的“ hesapid”。 因此，從網頁上我無法獲得hesapid的新價值。 例如，單擊按鈕以獲取新選擇的“ hesapid”的值，始終提示第一個值“ 36”。

Answer 1

var _this=this; //save this to variable   

hesapmodal.on("click", "button[hesapid]", function() {

     console.log(_this.hesapid);//here You have object property and it can be changed
     //example assign
     _this.hesapid = $(this).attr('hesapid');

});

我正在創建_this變量，因為click事件的回調中的this是調用了該事件的DOM元素，因此請在_this變量中創建this （hesap object）的引用， 該引用在回調函數中可見並且可以在其中使用。

完整的工作代碼：

function hesap (hesapdiv, hesapmodal, hesapid){

    this.hesapid = hesapid;
    this.hesapdiv = hesapdiv;
    this.hesapmodal = hesapmodal;

    var _this=this;//to use this in click callback

    this.hesapdiv.on("click", "button", function() {

        _this.hesapmodal.modal("show");
    });


    this.hesapmodal.on("click", "button[hesapid]", function() {

        _this.hesapid = $(this).attr('hesapid');

        var isim = $(this).attr('isim');

        _this.hesapdiv.find("input").val( _this.hesapid + " - " + isim);

        _this.hesapmodal.modal('hide');

    });

}

Answer 2

function hesap (_hesapdiv, _hesapmodal, _hesapid){
    var self = this;
    this.hesapid = _hesapid;
    this.hesapdiv = _hesapdiv;
    this.hesapmodal = _hesapmodal;

    hesapdiv.on("click", "button", function() {
      self.hesapmodal.modal("show");
    });


    hesapmodal.on("click", "button[hesapid]", function() {
    var hesapid = $(this).attr('hesapid');
    console.log(self.hesapid + "-" + hesapid + "-" + $(this).attr('hesapid'));
    var isim = $(this).attr('isim');
    self.hesapdiv.find("input").val(hesapid + " - " + isim);
    self.hesapmodal.modal('hide');
  });}

this在javascript指功能this在不在。

ES6有一個更好的方法來解決這個問題

function hesap (hesapdiv, hesapmodal, hesapid){
  this.hesapid = hesapid;
  this.hesapdiv = hesapdiv;
  this.hesapmodal = hesapmodal;

  hesapdiv.on("click", "button", () => {
    hesapmodal.modal("show");
  });


  hesapmodal.on("click", "button[hesapid]", () => {
    var hesapid = $(this).attr('hesapid');
    console.log(this.hesapid + "-" + hesapid + "-" + $(this).attr('hesapid'));
    var isim = $(this).attr('isim');
    hesapdiv.find("input").val(hesapid + " - " + isim);
    hesapmodal.modal('hide');
 });
}

購買使用() =>代替function ()在ES6 this返回到父function () 在您的情況下， hesap函數。