Javascript js：访问父类的范围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5106284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
js: accessing scope of parent class
提问by Sam
I have a jquery class within a normal class in javascript. Is it possible to access variables in the scope of the parent class from a callback function in the jquery class?
我在 javascript 的普通类中有一个 jquery 类。是否可以从 jquery 类中的回调函数访问父类范围内的变量？
A simple example of what I mean is shown below
我的意思的一个简单例子如下所示
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
});
};
};
Now in the above example, the callback function tries to access the scope of the jquery object. is there any way to access the status variable in the parent class?
现在在上面的例子中，回调函数尝试访问 jquery 对象的范围。有没有办法访问父类中的状态变量？
回答by Tom Brothers
You set "this" to a variable in the parent function and then use it in the inner function.
您将“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
});
};
};
回答by ins0
I will post this answer to this old question anyway as no one yet posted this before.
无论如何，我会发布这个老问题的答案，因为之前没有人发布过这个。
You can use the bindmethod on your function calls to define the scope which thisbelongs to.
您可以bind在函数调用上使用该方法来定义this属于的范围 。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
Normaly everytime you create a method - thisbelongs to the current scope of the function. Variables from scope2 can't see variables from scope1.
通常每次创建方法时 - 都this属于函数的当前范围。范围 2 中的变量无法看到范围 1 中的变量。
e.g.
例如
function(){
// scope 1
this.baz = 'foo';
function(){
// scope 2
this.baz // not defined
};
};
with the bindmethod you can define the scope from thisinside the function. So using .bind(this)you're telling the called function that their own scope from thisis referred to the scope of the parent function, like:
使用该bind方法，您可以从this函数内部定义作用域。因此，使用 .bind(this)您是在告诉被调用函数，它们自己的作用域来自this父函数的作用域，例如：
function(){
// scope 1
this.baz = 'foo';
function(){
// scope 1
this.baz // foo
}.bind(this);
};
so in your case, this would be an example using the bindmethod
所以在你的情况下，这将是一个使用该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);
};
回答by Lucky Soni
Use an Arrow Function
使用箭头函数
An arrow function does not have it's own
this. Thethisvalue of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. So while searching forthiswhich is not present in current scope they end up findingthisfrom its enclosing scope.
箭头函数没有自己的
this. 使用this封闭词法范围的值；箭头函数遵循正常的变量查找规则。因此，在搜索this当前范围中不存在的内容时，他们最终会this从其封闭范围中找到。
Normal function syntax
普通函数语法
function(param1, param2) {}
function(param1, param2) {}
Arrow function syntax
箭头函数语法
(param1, param2) => {}
(param1, param2) => {}
Usage
用法
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
});
};
};
Using an Arrow function within a ECMAScript 2015 Class
在 ECMAScript 2015 类中使用箭头函数
class simpleClass {
constructor() {
this.status = 'pending';
this.target = jqueryObject;
}
updateStatus() {
this.target.faceOut('fast', () => {
this.status = "complete";
});
}
}
const s = new simpleClass();
s.updateStatus();
Described code works only in modern browsers.
描述的代码仅适用于现代浏览器。
回答by Muhammad Awais
By setting "this"to a variable you can access easily. Like:
通过将“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.'); }
}
})
回答by Tokimon
Sorry m8. You have to nest the reference down into the objects like so:
对不起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
});
};
};
notice the var _root
注意 var _root
回答by mdikici
try this:
尝试这个：
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 || {}));
you can also define your target object as private variable
您还可以将目标对象定义为私有变量
回答by Humberto
You can mantain state using closure 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();
