js：访问父类的范围

我有一个正常的类在JavaScript中的jQuery类。 是否有可能通过jquery类中的callback函数访问父类范围内的variables？

我的意思的简单例子如下所示

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

现在在上面的例子中，callback函数试图访问jquery对象的作用域。 有没有办法在父类中访问状态variables？

Answer 1

您将“this”设置为父函数中的variables，然后在内部函数中使用它。

 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

无论如何，我会把这个答案张贴在这个老问题上，因为之前没有人发布这个答案。

你可以在函数调用中使用bind方法来定义它所属的范围。

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

通常每次创build一个方法 – this属于函数的当前范围。 来自scope2的variables不能看到来自scope1的variables。

例如

 function(){ // scope 1 this.baz = 'foo'; function(){ // scope 2 this.baz // not defined }; }; 

用bind方法你可以在函数里面定义这个范围。 所以使用.bind(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 3

对不起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 4

通过将“this”设置为variables，您可以轻松访问。 喜欢：

 $("#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 5

带箭头function

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

所描述的代码仅适用于现代浏览器。

Answer 6

您可以使用闭包variables来维护状态：

 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 7

尝试这个：

  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 || {})); 

你也可以将你的目标对象定义为私有variables