Front end week 4: closures - Hoa0/project-tech GitHub Wiki

Closures

Binnen in JavaScript heb je een feature “closure”, waarbij een intern functie toegang heeft tot de variabelen van de buitenste functie. Functie worden omsloten door {}.

Closures heeft drie soorten scope skeletten:

  • Het heeft toegang tot zijn eigen scope – variabelen zijn gedefinieerd tussen de accolades { }
  • Heeft toegang tot de variabele van de buitenste functie.
  • Heeft toegang tot de globale variabelen.

Voorbeeld 1: closure In dit voorbeeld zijn twee functie weergegeven.

  • function outer() is het buitenste functie, die een variabele var b = 10; heeft en de function inner() teruggeeft.

  • function inner () heeft een variabelen var a = 20; Deze functie heeft toegang tot de variabelen b die in functie outer staat.

// bron: (Prashant Ram, 2018)
function outer() {
   var b = 10;
   function inner() {
        
         var a = 20; 
         console.log(a+b);
    }
   return inner;
}

Voorbeelden: 2

//bron: (Developer Mozilla, 2021)
// global scope
var e = 10;
function sum(a){
  return function(b){
    return function(c){
      // outer functions scope
      return function(d){
        // local scope
        return a + b + c + d + e;
      }
    }
  }
}

console.log(sum(1)(2)(3)(4)); // log 20

// You can also write without anonymous functions:

// global scope
var e = 10;
function sum(a){
  return function sum2(b){
    return function sum3(c){
      // outer functions scope
      return function sum4(d){
        // local scope
        return a + b + c + d + e;
      }
    }
  }
}

var s = sum(1);
var s1 = s(2);
var s2 = s1(3);
var s3 = s2(4);
console.log(s3) //log 20

Bronnen

Developer Mozilla (2021), Geraadpleegd van, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Prashant Ram (2018,16 januari). Geraadpleegd van, https://medium.com/@prashantramnyc/javascript-closures-simplified-d0d23fa06ba4