JavaScript Basics – Scopes & Namespaces

​ Was sind Scopes?

Der Scope ist der Bereich, in dem Variablen und Funktionen verfügbar sind. Wörtlich übersetzt auch Geltungsbereich genannt. Grundsätzlich wird zwischen globalem und lokalem Scope unterschieden.

Global Scope:

In folgendem Beispiel wird eine globale Variable und eine globale Funktion definiert, die von überall in unserem Code aus aufgerufen werden kann.

var globalVariable = 'Ich bin eine globale Variable.'; 

var showMessage = function() {
     alert('Ich bin eine globale Funktion. ');
}; 

Local Scope:

Gegenüber dem globalen Scope steht der lokale Scope nur in bestimmten Bereichen zur Verfügung. In unserem Fall heißt es, dass die alert-Funktion einen Fehler wirft, da die lokale Variable für die Funktion nicht existiert.

var showLocalVariable = function () { 

    var localVariable = 'Ich bin eine lokale Variable.'; 

}; 

alert(localVariable); 

Abschluss:

Die Lebensdauer einer JavaScript Variable beginnt wenn sie definiert wird. Eine globale Variable wird erst gelöscht wenn die Seite geschlossen wird. Wobei eine lokale Variable gelöscht wird sobald die Funktion beendet wird. Außerdem können globale Variablen und Funktionen auch Variablen oder Funktionen die am window-Objekt hängen überschreiben. Genauso kann jeder andere auch unsere Variablen und Funktionen überschreiben. Deswegen sollte man seinen Code immer in eine Funktion packen, um sicher zu stellen das er von keinem anderen Entwickler aus Versehen überschrieben wird.

(function (win, doc) { 

    // our code goes here 

}(window, document)); 

Was sind Namespaces?

Namespaces dienen im weitesten Sinne dazu, verschiedene Dinge (in der IT sind es Methoden und Klassen) voneinander zu kapseln. Beispielsweise besteht das Filesystem in unserem Betriebssystem auch aus unzähligen Namespaces welche sich als Ordner wiederspiegeln. So kann es eine Datei mit unterschiedlichen Inhalten, aber dem selben Namen in zwei verschiedenen Ordnern (Namespaces) geben.

Warum sollte man Namespaces verwenden?

Mit dem Einsatz von Namespaces wird verhindert, dass Funktionen gegenseitig überschrieben werden. Sei es, dass mehrere Entwickler an einem Projekt arbeiten oder unterschiedliche Dienstleister daran beteiligt sind.

Wie wird ein Namespace definiert?

(function (win, doc) { 

    // Namespace definition
    var novacapta = win.NOVACAPTA || (win.NOVACAPTA = {}); 

}(window, document)); 

Beispiel mit einer Methode:

In dem folgenden Beispiel wird die each-Funktion in unseren Namespace gepackt, ist aber in unserem Kontext weiterhin ganz normal mit dem Aufruf each(collection, function(elem, index) {… }); verfügbar.

(function (win, doc) { 

    // Namespace definition
    var novacapta = win.NOVACAPTA || (win.NOVACAPTA = {}); 

    // each function
    var each = novacapta.each = function (arr, iterator, bind) { 

        for (var i = 0, len = arr.length; i < len; i++) {
            iterator.call(bind || this, arr[i], i, arr);
        } 

    }; 

}(window, document)); 

Comments