Js: 访问父类的作用域

我在 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 对象的作用域。是否有办法访问父类中的 status 变量？

81268 次浏览
小开

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

小开
最佳答案

将“ this”设置为父函数中的一个变量，然后在内部函数中使用它。

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

您可以使用闭包变量来维护状态:

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

试试这个:

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

还可以将目标对象定义为私有变量

小开

我将张贴这个老问题的答案无论如何，因为还没有人张贴这之前。

可以在函数调用中使用 bind方法来定义 this所属的作用域。

Https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/function/bind

通常，每次创建方法时，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);
};
小开

通过将 “这个”设置为一个可以很容易访问的变量，比如:

$("#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.'); }
}
})
小开

使用 箭头函数

箭头函数没有自己的 this。使用封闭词法范围的 this值; 箭头函数遵循常规变量查找规则。因此，当搜索当前范围内不存在的 this时，他们最终会在其封闭范围内找到 this。

正常的函数语法

function(param1, param2) {}

箭头函数语法

(param1, param2) => {}

用法

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

在 ECMAScript 2015类中使用 Arrow 函数

class simpleClass {


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


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


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

所描述的代码仅在 现代浏览器中有效。


提交答案