如何通过自己的功能改变对象的属性？答案

【问题标题】：How to change property of object by its own function?如何通过自己的功能改变对象的属性？
【发布时间】：2016-08-12 16:11:24
【问题描述】：

这是我自己的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);)};

现在，当用户从模态中选择“hesap”时，获取属性值的函数是成功的。但它不会将值分配给对象的“hesapid”。所以从网页上我无法获得 hesapid 的新价值。例如，单击按钮以获取新选择的“hesapid”的值，始终提醒第一个值“36”。

【问题讨论】：

标签： javascript jquery oop

【解决方案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 变量，因为点击事件回调中的 this 是调用事件的 DOM 元素，所以为我们的 this 创建引用> （hesap 对象）在 _this 变量中，在回调函数中可见并且可以在那里使用。

完整的工作代码：

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');

    });

}

【讨论】：

谢谢，这是我的一天

【解决方案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');
  });}

javascript中的this是指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');
 });
}

在 ES6 中使用 () => 而不是 function () 购买 this 会返回父级 function ()。在您的情况下，hesap 函数。

【讨论】：