js：訪問父類的範圍

Question

我有一個在javascript中的普通類內的jquery類。是否有可能通過jquery類中的回調函數訪問父類範圍內的變量？

我的意思一個簡單的例子示出如下

var simpleClass = function() {  
    this.status = "pending"; 
    this.target = jqueryObject; 
    this.updateStatus = function() { 
     this.target.fadeOut("fast",function() { 
      this.status = "complete"; //this needs to update the parent class 
     }); 
    }; 
}; 

現在，在上面的例子中，回調函數試圖訪問jQuery對象的範圍。有什麼方法可以訪問父類中的狀態變量嗎？

Answer 1

您可以設置「本」在父函數變量，然後用它在內部功能。

var simpleClass = function() {   
    this.status = "pending";  
    this.target = jqueryObject;  

    var parent = this; 

    this.updateStatus = function() {   
      this.jqueryObject.fadeOut("fast",function() {    
       parent.status = "complete"; //this needs to update the parent class   
      });  
     }; 
    }; 

Answer 2

對不起m8。你必須巢參考下到像這樣的對象：

var simpleClass = function() { 
    var _root = this; 
    this.status = "pending"; 
    this.target = jqueryObject; 
    this.updateStatus = function() { 
     this.root = _root; 
     _root.target.fadeOut("fast",function() { 
      this.status = "complete"; //this needs to update the parent class 
     }); 
    }; 
}; 

通知var _root

Answer 3

可以使用閉包變量十個分量狀態：

function simpleClass() { 
    var _state = { status: "pending", target: jqueryObject; } 

    this.updateStatus = function() { 
     this.target.fadeOut("fast",function() { 
     _state.status = "complete"; //this needs to update the parent class 
     }); 
    } 
} 

// Later... 
var classInstance = new simpleClass(); 

Answer 4

試試這個：

var sc = (function(scc){ 

    scc = {}; 

    scc.target = jQueryObject; 


    scc.stt = "stt init"; 

    scc.updateStatus = function(){ 
     var elem = this; 

     this.target.click(function(){ 
      elem.stt= "stt change"; 
      console.log(elem.stt); 
     }) 

    } 

    return scc; 


}(sc || {})); 

，你也可以定義你的目標對象爲私有變量

Answer 5

我將在此無論如何回答這個老問題，因爲之前沒有人發佈過這個問題。

您可以在函數調用中使用bind方法來定義this所屬的範圍。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Normaly每次你創建一個方法 - this屬於功能的電流範圍。來自scope2的變量無法看到來自scope1的變量。

例如

function(){ 
    // scope 1 
    this.baz = 'foo'; 

    function(){ 
     // scope 2 
     this.baz // not defined 
    }; 
}; 

與bind方法，你可以從this在函數內部定義的範圍。因此，使用.bind(this)你告訴調用的函數，從this自己的範圍被稱爲父功能的範圍，如：

function(){ 
    // scope 1 
    this.baz = 'foo'; 

    function(){ 
     // scope 1 
     this.baz // foo 
    }.bind(this); 
}; 

所以你的情況，這將是使用bind方法

爲例

var simpleClass = function() {  
    this.status = "pending"; 
    this.target = jqueryObject; 
    this.updateStatus = function() { 
     this.target.fadeOut("fast",function() { 
      this.status = "complete"; //this needs to update the parent class 
     }.bind(this)); 
    }.bind(this); 
}; 

Answer 6

通過將「this」設置爲一個變量，您可以輕鬆訪問該變量。像：

$("#ImageFile").change(function (e) { 
    var image, file; 
    var Parent=this; 
    if ((file = Parent.files[0])) { 
     var sFileExtension = file.name.split('.')[file.name.split('.').length - 1]; 

     if (sFileExtension === "jpg" || sFileExtension === "jpeg" || sFileExtension === "bmp" || sFileExtension === "png" || sFileExtension === "gif") { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       alert(Parent.files[0].name); 
      }; 
      reader.readAsDataURL(Parent.files[0]); 
     } 
     else { alert('Wrong file selected. Only jpg, jpeg, bmp, png and gif files are allowed.'); } 
    } 
}) 

Answer 7

隨着箭頭功能

var simpleClass = function() {  
    this.status = "pending"; 
    this.target = jqueryObject; 
    this.updateStatus = function() { 
     this.target.fadeOut("fast",() => { // notice the syntax here 
      this.status = "complete"; // no change required here 
     }); 
    }; 
}; 

類語法

class simpleClass { 

    constructor() { 
     this.status = 'pending'; 
     this.target = jqueryObject; 
    } 

    updateStatus() { 
     this.target.faceOut('fast',() => { 
      this.status = "complete"; 
     }); 
    } 
} 

var s = new simpleClass(); 
s.updateStatus(); 

描述代碼的工作只是在現代瀏覽器。