如何从类函数内部访问对象属性

How to access object property from inside class function

本文关键字：访问 对象 属性 内部 类函数      更新时间：2023-09-26

我在Javascript中的一个类有时需要用Json"更新"。我一直在做一个函数，在给定id的情况下更新数据数组，但现在我想做的是更封装（函数更新，在类中）。

我做的：

function File(data){
        this.data = data;
        this.update = function (callback){
            var set = function(ajaxData){
                this.data = ajaxData.PcbFile;
            }
            getPcbFile(data.id, function(ajaxData){
                set(ajaxData);
                callback();
            });
        };
    }

但是，this.data = ajaxData.PcbFile;不起作用。。。我的对象仍然使用最后一个数据集，而不是更新后的数据集。我创建的函数SET是另一个设置数据的尝试。

ajax没有问题，因为我已经调试了ajaxData，而且（当我更新时）还可以。

那么，如何真正从内部函数访问对象属性data呢？

（对不起我的英语…）

这是我通过艰苦的方式学到的，你必须小心this。它总是指当前作用域中的this，而不是包含对象。每当你在function() { ... }中包装一些东西时，this就变成了一个不同的范围。在您的情况下，将对象复制到一个局部变量并操作它的.data属性。

function File(data){
    this.data = data;
    var file = this; //call the variable whatever you want
    this.update = function (callback){
        var set = function(ajaxData){
            file.data = ajaxData.PcbFile;
        }
        getPcbFile(data.id, function(ajaxData){
            set(ajaxData);
            callback();
        });
    };
}

缓存this，这样您就可以在其他地方的同一上下文中引用它：

function File(data){
  var self = this;
  self.data = data;
  self.update = function (callback){
    var set = function(ajaxData){
      self.data = ajaxData.PcbFile;
    }
    getPcbFile(data.id, function(ajaxData){
      set(ajaxData);
      callback();
    });
  };
}

试试这个：

function File(data){
    this.data = data;
    var self = this;
    this.update = function (callback){
        var set = function(ajaxData){
            self.data = ajaxData.PcbFile;
        }
        getPcbFile(data.id, function(ajaxData){
            set(ajaxData);
            callback();
        });
    };
}

函数中this的值取决于该函数的调用方式。例如，当您使用"点"表示法someObj.someMethod()时，在someMethod()中，您会将this设置为someObj。可以使用.apply()或.call()方法将this显式设置为其他对象。否则，如果使用set(ajaxData)调用函数，则this将是全局对象（window）。

通过在函数外保留对this的引用（为此，我更喜欢使用变量名self），您可以在函数内引用它。

 (function(){
   var accessible = {
     prop1: 'blabla',
     verify: function(){
       console.log( this.prop1);
       return this;
     },
     deepAccess: function(){
       return function(){
         accessible.prop1 = 'bloblo';
         return function(){
           console.log("Deep access ", accessible.prop1);
         }
       }
     },
     insideFunction: function(){
       //here you can use both 'this' or 'accessible' 
                  this.prop1 = 'bleble';
                  return this;
       },
       prop2: 3.1415
    };
   return accessible;
})().verify().insideFunction().verify().deepAccess()()();
/* console shows:
 blabla
 bleble
 Deep access bloblo
*/
相关文章：