Js: доступ к области родительского класса
У меня есть класс jquery внутри нормального класса в javascript. Возможно ли получить доступ к переменным в области родительского класса из функции обратного вызова в классе 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. есть ли способ доступа к переменной статуса в родительском классе?
Ответы
Ответ 1
Вы устанавливаете "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
});
};
};
Ответ 2
Я отправлю этот ответ на этот старый вопрос, так как никто еще не опубликовал это раньше.
Вы можете использовать метод bind
для вызовов функций, чтобы определить область, к которой принадлежит this
.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
Нормально каждый раз, когда вы создаете метод - this
относится к текущей области действия функции. Переменные из области видимости2 не могут видеть переменные из области видимости1.
например.
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);
};
Ответ 3
Используйте функцию стрелки
Функция стрелки не имеет this
. Используется значение this
лексической области видимости; Функции стрелок следуют нормальным правилам поиска переменных. Таким образом, при поиске this
, который не присутствует в текущей области видимости, они в конечном итоге найти this
из его области видимости.
Нормальный синтаксис функции
function(param1, param2) {}
Синтаксис функции стрелки
(param1, param2) => {}
использование
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
});
};
};
Использование функции Arrow в классе ECMAScript 2015
class simpleClass {
constructor() {
this.status = 'pending';
this.target = jqueryObject;
}
updateStatus() {
this.target.faceOut('fast', () => {
this.status = "complete";
});
}
}
var s = new simpleClass();
s.updateStatus();
Описанный код работает только в современных браузерах.
Ответ 4
Извините 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
Ответ 5
попробуйте следующее:
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 || {}));
вы также можете определить свой целевой объект как закрытую переменную
Ответ 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.'); }
}
})
Ответ 7
Вы можете использовать состояние mantain с использованием переменных закрытия:
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();