| Autor | Zpráva | ||
|---|---|---|---|
| xROAL Profil |
Zdravím, narazil som na dosť zvláštny problém. Mám následovný kód:
function objekt(){
this.list = {};
this.vytvorElement = function(){
var el = document.createElement("div");
el.id = "el1";
document.body.appendChild(el);
this.list.element = document.getElementById("el1");
}
this.citajElement = function(e){
var el = this.list.element;
}
}
var obj = new objekt;
obj.vytvorElement(); // div sa vytvori, vlozi sa do body, vsetko OK
obj.citajElement(); // Cannot read property "element" of undefinedNeviete poradiť čím by toto mohlo byť spôsobené? Google mi v tomto moc neporadil. |
||
| Joker Profil |
#2 · Zasláno: 4. 3. 2014, 19:41:31
xROAL:
Mně se to neděje, uvedený kód normálně proběhne. |
||
| Str4wberry Profil |
#3 · Zasláno: 4. 3. 2014, 19:44:18
Který prohlížeč to dělá?
Pokud si ve funkci citajElement zmíněný element vrátím, normálně mi ho náísledný obj.citajElement vrátí.
Živá ukázka |
||
| xROAL Profil |
#4 · Zasláno: 4. 3. 2014, 19:59:46
Robí mi to v Google Chrome a tu som vysekal časť reálneho kódu v ktorom sa to deje (i keď nevidím rozdiel oproti príkladu čo som napísal vyššie):
function player(){
this.playlist = null;
this.el = {};
this.create = function(){
if(!document.getElementById("player")){
var main = document.createElement("div");
main.id = "player";
main.style.top = "-100%";
document.body.appendChild(main);
this.el.main = document.getElementById("player");
var playlist = document.createElement("div");
playlist.id = "playlist";
playlist.style.left = "-25%";
this.el.main.appendChild(playlist);
this.el.playlist = document.getElementById("playlist");
// ... kopa dalsich createElement...
}
}
this.show = function(){
if(this.el.main && this.el.main.style.top == "0%"){
this.el.main.style.top = "-100%";
}else{
this.el.main.style.top = "0%";
}
}
this.togglePlaylist = function(e){
var playlist = this.el.playlist; // tu nastane chyba Cannot read property...
var player = this.el.player;
var button = e.target;
if(playlist.style.left != "0%"){
playlist.style.left = "0%";
player.style.margin = "0 1% 0 26%";
button.className = "hide";
}else{
playlist.style.left = "-25%"
player.style.margin = "0 5%";
button.className = "";
}
}
} |
||
| _es Profil |
xROAL:
„togglePlaylist() však hlási že this.el je undefined.“ A akým spôsobom je uvedená metóda volaná? Od toho závisí, čo je vtedy this. Možno je this.e undefined preto, že je this niečo iné, než si myslíš a chyba je (aj) inde, ako v uvedenom kóde. Asi si celkom neporozumel platnosti premenných a ako funguje this. Napríklad, v kóde v [#1] nemajú riadky 11 až 13 zmysel. Argument e je nepoužitý a premenná el je k ničomu - je to lokálna premenná, ktorá zanikne po skončení vnorenej funkcie.
|
||
| Chamurappi Profil |
#6 · Zasláno: 5. 3. 2014, 10:10:04
Reaguji na _es:
„A akým spôsobom je uvedená metóda volaná?“ Tipnul bych si, že this.togglePlaylist přiřazuje do nějakého onclicku (napovídá tomu i argument e s targetem). Pak je při vzniku události v this element, na němž je událost zachytávána. A ten tudíž nemá vlastnost el.
|
||
| xROAL Profil |
Tak som potom vážne špatne pochopil koncept. Očakával by som, že
this bude referovať na objekt/inštanciu bez ohľadu na spôsob volania metódy. (JS mi s týmto this dáva ozaj zabrať. Ale aspoň som zase o niečo múdrejší.)
Metóda je naozaj volaná cez onclick a teda, ako som až na základe vašich správ zistil, pod this je v danej metóde práve DIV na ktorý bolo kliknuté.
Vyriešil som to teda použitím var that = this; a v metóde namiesto this používať that.
Ďakujem za rady, samého by ma to asi nenapadlo ;) |
||
| Joker Profil |
#8 · Zasláno: 5. 3. 2014, 13:12:59
xROAL:
„Očakával by som, že this bude referovať na objekt/inštanciu bez ohľadu na spôsob volania metódy.“
To sice platí, ale tady nejde o způsob volání metody, ale o přiřazení metody. Tzn. když budu mít například: var foo = { "id" : "foo", "fn" : function() { return this.id }};
var bar = {"id" : "bar"};bar.fn = foo.fn; // bar.fn() vrátí "bar" bar.fn = function() { return foo.fn(); } // bar.fn() vrátí "foo" |
||
|
Časová prodleva: 12 let
|
|||
0