js: dostęp do zakresu klasy nadrzędnej
Mam klasę jquery wewnątrz zwykłej klasy w javascript. Czy możliwy jest dostęp do zmiennych w zakresie klasy nadrzędnej z funkcji zwrotnej w klasie jquery?
Prosty przykład tego, co mam na myśli, pokazany jest poniżej
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
});
};
};
Teraz w powyższym przykładzie funkcja callback próbuje uzyskać dostęp do zakresu obiektu jquery. czy jest jakiś sposób, aby uzyskać dostęp do zmiennej statusu w klasie nadrzędnej?
7 answers
Ustawiasz" this " na zmienną w funkcji rodzica, a następnie używasz jej w funkcji wewnętrznej.
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
});
};
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-24 15:01:42
I tak zamieszczę odpowiedź na to stare pytanie, ponieważ nikt jeszcze tego nie opublikował.
Możesz użyć metody bind
w wywołaniach funkcji, aby zdefiniować zakres, do którego należy this
.
Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
Zwykle za każdym razem, gdy tworzysz metodę - this
należy do bieżącego zakresu funkcji. Zmienne z scope2 nie widzą zmiennych z scope1
Np.
function(){
// scope 1
this.baz = 'foo';
function(){
// scope 2
this.baz // not defined
};
};
Za pomocą metody bind
można zdefiniować zakres z this
wewnątrz funkcji. Więc używając .bind(this)
mówisz wywołanej funkcji, że ich własny zakres z {[4] } odnosi się do zakresu funkcji nadrzędnej, jak:
function(){
// scope 1
this.baz = 'foo';
function(){
// scope 1
this.baz // foo
}.bind(this);
};
Więc w Twoim przypadku byłby to przykład użycia metody 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);
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-18 08:44:45
Użyj funkcja Strzałki
Funkcja strzałki nie posiada własnej
this
. Używana jest wartośćthis
zakresu leksykalnego; funkcje strzałek postępują zgodnie z normalnymi regułami wyszukiwania zmiennych. Tak więc podczas wyszukiwaniathis
, który nie jest obecny w bieżącym zakresie, kończą one znajdującthis
z jego zakresu.
Składnia funkcji normalnej
function(param1, param2) {}
Funkcja Strzałki składnia
(param1, param2) => {}
Użycie
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
});
};
};
Użycie funkcji strzałki w klasie 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();
Opisany kod działa tylko w nowoczesnych przeglądarkach.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-12 11:15:55
Przepraszam m8. Musisz zagnieżdżać referencję w dół do obiektów w ten sposób:
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
});
};
};
Zauważ var _root
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-24 15:01:41
Ustawiając "this" na zmienną, do której można łatwo uzyskać dostęp. Like:
$("#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.'); }
}
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-05 13:39:06
Spróbuj tego:
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 || {}));
Możesz również zdefiniować obiekt docelowy jako zmienną prywatną
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-24 15:31:11
Możesz ustawić stan używając zmiennych zamknięcia:
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();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-24 15:03:45