Closure Principle: Understanding Scope and Scope Chain

Programming Languages
1

Closure Principle: Understanding Scope and Scope Chain

Introduction

In this article, we will delve into the concept of closures and explore how they work in JavaScript. A closure is a function that has access to its outer function’s scope, even when the outer function has returned. This allows the closure to reference variables from the outer scope, making it a powerful tool for creating reusable code.

Example One: Closure with Immediate Execution

function exp1() {
  var a = 1;
  var b = function() {
    console.log(a);
  };

  // When exp1 function is called, a is not output because it is still 1.
  // When the function b is called, it outputs the value of a found by the scope chain.
  a = a + 3;
  return b;
}

var res1 = exp1();
// [function] res1();

console.log('------------------------');

// The essence of exp1 function is that it has completed execution, and b is called.
// b is a function that has access to the scope of exp1, even though exp1 has returned.

Example Two: Closure with Immediate Execution

function exp2() {
  var a = 1;
  var b = function() {
    console.log(a);
  }();

  // B is an anonymous function that is executed immediately.
  // It outputs the value of a, which is 1.
  a = a + 3;
  return b;
}

var res2 = exp2();
// 1

console.log('------------------------');

Example Three: Closure with Delayed Execution

function exp3() {
  var a = 1;
  var b = function() {
    return function() {
      console.log(a);
    };
  }();

  // Add a layer to b, making it a function that holds a closure.
  // The outer layer of the anonymous function is executed immediately.
  // It returns a function that, when called, will output the value of a found by the scope chain.
  a = a + 3;
  return b;
}

var res3 = exp3();
// [function] res3();

console.log('------------------------');

// When the function is called, it performs output, and the value of a has been modified to 4.

Example Four: Closure with Delayed Execution

function exp4() {
  var a = 1;
  var b = function(num) {
    return function() {
      console.log(num);
    };
  }(a);

  // Add a layer to b, making it a function that holds a closure.
  // The outer anonymous function is executed immediately, passing the value of a as an argument.
  // It returns a function that, when called, will output the value of num found by the scope chain.
  a = a + 3;
  return b;
}

var res4 = exp4();
// [function] res4();

console.log('------------------------');

// When the function is called, it performs output, and the value of num is 1.

Example Five: Closure with Array

function exp5() {
  var b = [];
  for (var i = 0; i < 4; i++) {
    b[i] = function() {
      console.log(i);
    };
  }
  return b;
}

var res5 = exp5();
// [[function], [function], [function], [function]]

res5[1]();
// 4

console.log('------------------------');

Example Six: Closure with Array and Parameter Passing

function exp6() {
  var b = [];
  for (var i = 0; i < 4; i++) {
    b[i] = function(num) {
      return function() {
        console.log(num);
      };
    }(i);
  }
  return b;
}

var res6 = exp6();
// [[function], [function], [function], [function]]

res6[1]();
// 1

This article was originally published on Cattle Off Network. The author is Mr. Apple. This paper is involved in the Tencent Cloud Media Sharing Plan. If you are reading this, you are welcome to join and share it together.