如何从类函数内部访问对象属性[重复]

Posted 2023-02-22

【中文标题】如何从类函数内部访问对象属性[重复]

【英文标题】：How to access object property from inside class function [duplicate]

【发布时间】：2012-08-03 01:36:41

【问题描述】：

我的 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" 解析为的值取决于调用函数的方式，该函数包含使用它的任何代码。查看MDN docs for this。

【参考方案1】：

我很难学到这一点，你必须小心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();
        );
    ;

【讨论】：

太棒了！工作完美！非常感谢！

“它总是引用当前范围” - 除非它没有。如果您使用.apply() 或.call() 调用函数，则可以将this 显式设置为您喜欢的任何对象。

@nnnnnn 是的，但我从未使用过或见过它使用过。这似乎是解决问题的一种非常先进的方法。

好吧，我不会使用.apply() 或.call() 来解决手头的问题（您可以看到我的答案与您的答案基本相同），但我已将它们用于其他情况。我只是对您使用的语言很挑剔 - 请注意，this 指的是一个对象，它与范围不同。

虽然我知道“this”是指新范围内的更改，因此将“this”复制到“thing”中是可行的，但如果我的新“this”在新范围内发生了变化，我的旧的“this”应该仍然可以访问，因为它在“旧的”this 的范围内。所以我不能用“this”来引用旧的“this”，但我相信最初的问题是“我怎样才能引用'旧'这个”？如果这是一个从另一个类继承的类，我可能会使用 super.memberName。所以问题是，我可以在不创建副本的情况下访问我的更高级别的成员吗？

【参考方案2】：

试试这个：

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），您可以在函数内部引用它。

【参考方案3】：

缓存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();
    );
  ;

【讨论】：

+1。很高兴看到其他人使用self 来反映该变量实际上是对自我的引用，而不是常见但（在我看来）可怕的that，听起来它总是应该引用一些other 对象。或者，向 Somekidwithhtml 道歉，thing，这实际上并没有任何意义......

我主要使用self，因为它在大多数编辑器中被突出显示为关键字，更容易跟踪，但我同意that 更常见但语义更少。

@nnnnnn 我认为这并不重要；你只需要在你使用它的范围内跟踪变量。但是，self 肯定比thing 好，我同意。

【参考方案4】：

 (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
*/