ugrás a tartalomhoz

JavaScript this hivatkozás mindig az aktuális div adatait adja vissza

Max Logan · 2007. Ápr. 11. (Sze), 11.10
Alapvetően eddig még nem használtam OO kódot. Egy probléma során vizsont rájöttem, hogy muszáj lesz objektumokhoz nyúlnom.

A probléma: egy HTML elem onClick eseményéhez egy olyan függvényt szerettem volna hozzárendelni, aminek 2 paramétere van. Arra rájöttem, hogy az addEvenetListener-rel nem fog összejönni. Ekkor kicsit gondolkodtam és szmbe jutott, hogy egy objektum tulajdonságaival tudom helyettesíteni a paraméter listát.

A kód a következőképpen néz ki:

 function block()
 {
    this.id = 'ID alapérték';
    this.cmd = 'CMD alapérték';
    this.show = showBlock;

//  (1)
//  alert('ID : ' + this.id + '\nCommand : ' + this.cmd);

    function showBlock()
    {
       alert('(show)ID : ' + this.id + '\n(show)Command : ' + this.cmd);
    }
 }

 var obj = document.getElementById('getclients');

 var getClients_block = new block();

 getClients_block.id = 'ID #1';
 getClients_block.cmd = 'CMD #1';

// (2)
// alert('ID : ' + getClients_block.id + '\nCommand : ' + getClients_block.cmd);
   
 addEvent(obj, 'click', getClients_block.show);
Az (1)-es pontnál szépen kiírja a kezdőértékeket amit megadtam. A (2)-es pontnál kiírja a felülírt értékeket. Viszont az eseménykezelő által beállított esemény bekövetkeztekor (tehát amikor rákattintok a DIV-re) nem a (2)-e pontnál beállíott értékeket írja ki, hanem annak a DIV-nek az értékeit amihez hozzá van rendelve az onClick esemény. Tehát kiírja az ID-hez, hogy getclient (ez a DIV ID-je), és mivel nincs cmd tulajdonsága ez undefined lesz.

Miért viselkedik így a kód?

Ha jól tévedek, akkor megoldást jelent a problémára, ha nem this.id-vel adom meg, hanem var id-vel és csinálok egy setID tagfüggvényt. De ha nem muszáj, akkor nem szeretnék ehhez a megoldáshoz folyamodni.
‹ Ajax: Két select mező beállítása után adatok lekérése az adatbázisból WMP elhelyezése weblapokon online adás lejátszásához ›
 ■
1

Megoldottam, de ...

Max Logan · 2007. Ápr. 11. (Sze), 13.57
... azért érdekelne az eredeti felvetésre a magyarázat.

 function block()
 {
    var id = 'ID alapérték';
    var cmd = 'CMD alapérték';

    this.show = showBlock;
    this.setVar = setVariable;

    function showBlock()
    {
       alert('(show)ID : ' + id + '\n(show)Command : ' + cmd);
    }

    function setVariable(varName, newValue)
    {
       eval(varName + ' = \'' + newValue + '\';');
    }
 }

 var getClients_block = new block();
 getClients_block.setVar('id','ID #1');
 getClients_block.setVar('cmd','CMD #1');

 var obj = document.getElementById('getclients');
 addEvent(obj, 'click', getClients_block.show);
2

a fenti jó kérdés

toxin · 2007. Ápr. 11. (Sze), 14.36
azon még meditálni kell :) (nekem) , a feladat viszont nem egyszerűbb closure-al , azaz és pl

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Cp1250"/>
<title></title>
<script type="text/javascript">
window.onload = function(){

	 var block = function (id,cmd)
	 {
	    return function ()
	    {
	       alert('(show)ID : ' + id + '\n(show)Command : ' + cmd);
	    }
	 }
		
	 var obj = document.getElementById('getclients');	
	 var getClients_block = block('ID #1','CMD #1');
	 
	 obj.addEventListener('click', getClients_block,true);
	 
}
</script>
</head>
<body>
<div id="getclients" style="width:100px; height:100px;background-color:black;"></div>
</body>
</html>
hamár a js olyan kedves, hogy closure esetén, letárolja a kapott függvény paramétereket is a call object-ben ?

üdv t
3

Re

Max Logan · 2007. Ápr. 11. (Sze), 14.55
Ha ez a var-os megoldás jelenti a closure-t, akkor azt kell mondanom, hogy ez nekem elég idegen. Így kezdtem előszőr, csak nem tudtam, hogy így is lehet több objektum példányt létrehozni, azt hittem, hogy mivel var, csak 1 db lehet belőle. A show tagfüggvényen kívül egyébként lesz egy hide is.

<off>
Hol találhtató (főként magyar, de angol is jöhet) jó JS OOP leírás teljesen az alapoktól?
</off>
4

re

toxin · 2007. Ápr. 11. (Sze), 15.00
Bad Books

Nearly all of the books about JavaScript are quite awful. They contain errors, poor examples, and promote bad practices. Important features of the language are often explained poorly, or left out entirely. I have reviewed dozens of JavaScript books, and I can only recommend one: JavaScript: The Definitive Guide (5th Edition) by David Flanagan. (Attention authors: If you have written a good one, please send me a review copy.)

http://javascript.crockford.com/javascript.html

ha számít a véleményem :) megerősítem : JavaScript: The Definitive Guide (5th Edition) egy js könyv mind felett ;)

üdv t
5

Az ára nem semmi ...

Max Logan · 2007. Ápr. 11. (Sze), 15.11
Nem a legolcsóbb darab, de akkor a tervezett PhotoShop és Illustrator könyvek helyett inkább ebbe fektetek be.

Ha már JS-nél tartunk, akkor erről az AJAX könyvről mi a véleményed? (Nekem ez a könyv van meg és belelapozva nem rossz - időm nem sok volt még vele foglalkozni, majd nyár elején)
7

Ha ez a var-os megoldás jelenti a closure-t

toxin · 2007. Ápr. 11. (Sze), 15.19
ez lemaradt, nem az jelenti, kb. érthető lesz mi történik ha megnézed

http://weblabor.hu/cikkek/oojsafelszinalatt / Belépés egy futási környezetbe / Ezt követően létrejön egy Variables nevű pszeudo objektum. ...

részét, de inkább az egész cikket, persze un. az ajánlott könyvben is benne van, némiképp érthetőbben, és alapokról indulva :)


üdv t
6

eval

vbence · 2007. Ápr. 11. (Sze), 15.16
Lehet eval-lal is függvényt gyártani. pl:

function valodiFuggveny(a, b) {
    ...
}

var a = 1;
var b = 2;
akarmi.onclick=eval("function () { valodiFuggveny(" + a + ", " + b + "); }");
Objektumot persze nem lehet így becsomagolni, olyankor egy mindenhonnan látható globális konténerbe lehet rakni őket és indexel hivatkozni rájuk.