JavaScript sproget er dynamisk, hvilket vil sige at mens ens script afvikles kan alt modificeres. Har man et objekt, er det muligt at tilføje og fjerne properties på det. Sagt med andre ord er det muligt at modificere den kode der afvikles, både ved at tilføje, fjerne og overskrive funktioner samt variable.
De fleste kender til selvmodificerende javascript kode fra event handlers. Når et DOM elements “onclick” sættes til at pege på en javascript funktion, udnyttes faktisk blot javascript sproget selvmodificerende egenskaber:
<html>
<body>
<input type="button" id="knap" value="Tryk på mig" />
<script type="text/javascript">
function haandterKnapKlik() {
alert("Hehe - det kilder!");
}
var knapObjekt = document.getElementById("knap");
knapObjekt.onclick = haandterKnapKlik;
</script>
</body>
</html>
I ovenstående simple eksempel sættes onclick eventhandler funktionen ved hjælp af et inline script. Det samme resultat kan opnåes med dynamisk en tilføjet funktion som her:
<html>
<body>
<input type="button" id="knap" value="Tryk på mig" />
<script type="text/javascript">
var knapObjekt = document.getElementById("knap");
knapObjekt.onclick = function () {
alert("Hehe - det kilder osse!");
}
</script>
</body>
</html>
Fordelen ved denne metode, er at global scopet ikke bliver “forurenet” med funktionsnavne og variable. Situationen kan nemt opstå hvor der er sammenfald på navne af funktioner og variable, og det kan være ganske lumsk at debugge frem til hvor sådanne fejl er begravet, da det er helt legalt at overskrive en funktion til blot at være en simpel variabel (eller et objekt) og omvendt.
Når man skal sikre at kode kun køres en gang, kan flere strategier anvendes. Typisk ser man implementationer svarende til:
<html>
<body onload="initialiser()">
var initialiseret = false;
function initialiser() {
if (initialiseret !== false) {
return;
}
// udfør initialiseringen her ...
initialiseret = true;
}
</body>
</html>
Der er flere problemer med ovenstående. Dels ligger funktionen “initialiser” og variablen “initialiseret” i global scopet og er dermed i fare for at blive overskrevet af andre inkluderede scripts på siden, og der er intet der forhindrer at variablen “initialiseret” senere sættes til false, hvorefter koden fint kan genafvikles.
Istedet kan anvendes en anden strategi med selvmodificerende kode som angivet herunder:
<html>
<body onload="hinnerupnet.initialiser()">
var hinnerupnet = {
initialiser: function () {
// udfør initialiseringen her ...
delete this.initialiser;
},
variabelBar: "Hejsa",
metodeFoo: function () {
alert(this.variabelBar);
}
};
</body>
</html>
Funktionen “initialiser” er her pakket ind i et objekt kaldet “hinnerupnet”. Kun selve objekt variablen “hinnerupnet” er placeret i global scope. Både funktionen “initialiser”, “metodeFoo” og variablen “variabelBar” kan dermed kun tilgåes via objektet “hinnerupnet”. Chancerne for at andre scripts på siden skulle overskrive “hinnerupnet” objektet er minimale, og bør være under programmørens egen kontrol.
Ved første kald til “hinnerupnet.initialiser()” udføres koden og der afsluttes med helt at slette funktionen fra objektet. Eventuelle efterfølgende kald til funktionen leder til en exception:
>>> hinnerupnet.initialiser is not a function
Et alternativ fremt for helt at slette en funktion er at modificere koden heri, for eksempel:
<html>
<body onload="hinnerupnet.initialiser()">
var hinnerupnet = {
initialiser: function () {
// udfør initialiseringen her ...
this.initialiser = function () {
alert("Fejl: 'hinnerupnet' objektet er allerede initialiseret!");
};
}
};
</body>
</html>
Første kald til “hinnerupnet.initialiser()” vil udføre den tiltænkte initialiseringskode, og slutteligt overskrive initialiseringsfunktionen således “hinnerupnet” objektet efterfølgende er:
var hinnerupnet = {
initialiser: function () {
alert("Fejl: 'hinnerupnet' objektet er allerede initialiseret!");
}
};
Leg selv videre med mulighederne, de er mange!