Variabler og scope

Innhold

Scope

    	(function () {
            globalVar = "test";
            var lokalVar = "test";
            
            console.log(globalVar);
            console.log(lokalVar);
        }())
        
        if (typeof globalVar !== 'undefined') {
        	console.log("Har global");
        }
        if (typeof lokalVar !== 'undefined') {
       		console.log("Har lokal");
        }
    

Closures

Først et eksempel

    	var car = function () {
        	var doors = 4,
            	wheels = 4;
            
            function getDoors () {
            	return doors;
            }
            return {
            	getDoors:getDoors
            }
        }();
    

Parentesene til slutt gjør at funksjonen kjøres med en gang. Verdien av car er det funksjonen returnerer. Javascriptfunksjoner husker alltid en referanse til det ytre scopet hvor de ble definert.

    	console.log(typeof car.doors);
        console.log(car.getDoors());	
    

Closures i loops

1
2
3
    	var blocks = document.querySelectorAll('.closureExample');
        
    	for (var i = 0; i < blocks.length;i++) {
        	blocks[i].addEventListener('click', function () {
            	console.log(blocks[i].innerHTML);
            }, false);
        };
    

Skiver ut -1 for alle boksene, da «i» er en referanse til den globale variabelen i

1
2
3
    	var blocks2 = document.querySelectorAll('.closureExample2');
        
    	for (var j=0; j < blocks2.length;j++) {
        	(function (j) {
                blocks2[j].addEventListener('click', function () {
                    console.log(blocks2[j].innerHTML);
                }, false);
            }(j));
        };
    

Skiver ut 0,1,2, da «j» er en referanse til variabelen j funksjonsscopet

Namespaces

Namespacing er en mekanisme som unikt definerer metoder og variabler for å unngå navnekonflikter med andre metoder og elementer som kommer fra andre kilder.

Javascript har ikke en metode for namespacing, men vi kan emulere namespacing ved å bruke javascriptobjekter

    	var mno = mno || {};
        mno.events = function () {
        	/* private */
            var private;
            
            /*global*/
            var subscribe = function(event) {
            	/*...*/
            } 
            return {
            	subscribe:subscribe
            }
        }
        
        mno.views = function () {
        	/* private */
            var private,
            	event = mno.event; /* Alltid cache*/
            
            /*global*/
            var render = function(view) {
            	/*...*/
            } 
            return {
            	render:render
            }
        }
        
        console.log(mno);
	

Typeof vs contructor

For å sjekke typen av en variabel er det smart å sjekke mot «constructor» istedenfor å bruke typeof. typeof er egentlig bare nyttig for å sjekke om noe er undefined

    	var types = {
        	'string': 'tekst', 
			'string2': new String('tekst'),	
			'number': 1.2,
			'number2': new Number(1.2),
			'boolean': true,
			'boolean2': new Boolean(true),
			'date': new Date(),
            'error': new Error(),
			'array': [1,2,3],
			'array2': new Array(1, 2, 3),
			'function': new Function(''),
			'regExp': /abc/g,
			'regExp2': new RegExp("meow"),
            'object': {},
			'object2': new Object()
    	}, key;
        
        for (key in types) {
        	console.log('--- ' + key + ' ---');
        	console.log(typeof types[key]);
            console.log(types[key].constructor);
        }

    

Loose typing

Variabler i JavaScript deklareres uten type.

    	var result,
        	num = 10,
        	numString = '10';
        
        result = num+num; /* 20 */
    	console.log(typeof result);
        result += numString; /* 2010 */ 
        console.log(typeof numString);
   	

Du kan også sjekke to variabler av forskjellig type mot hverandre. F.eks. ('7' == 7)

Det betyr ikke at du bør gjøre det.

This

this refererer til et object. I en funksjon eller når du opererer globalt er det en referanse til det globale objektet

Når du er inne i et object, referer this til objektet

Du kan sette this til å bety noe annet ved å bruke funksjonene call og apply.

Oppgave 4

Lag en NAF-bil, og bruk den til å kjøre; volvoen.