Detailed explanation of closures in JavaScript

Closure: Closure is a function that refers to a variable of another function. Because the variable is referenced, it will not be recycled, so it can be used to encapsulate a private variable.

When an inner function is referenced outside the data that defines its scope, a closure of the inner function is created. If the inner function references a variable located in the outer function, when the outer function is called, These variables will not be released in memory because the closure requires them

The scope of the variable: There are two types of scope, global scope and local scope

var n=999;
function f1(){
　　alert(n);
}
f1(); // 999
function f2(){
　　var m=999;
}
alert(m); // error
function f3(){
　　i=999; // 函数内部声明变量的时候，一定要使用 var 声明变量，如果不用 var，此时改变量就变成全局变量
}
f3();
alert(i); // 999

Read local from the outside Variables: This is not possible under normal circumstances, but you can define another function inside the function, so that the internal function can access the variables of the external function. In addition, external functions cannot access internal function variables. This is the unique "chain scope" structure of the JavaScript language.

function f1() {
  var n = 999;
  function f2() {
    alert(n);
  }
  return f2;
}
var result = f1();
result(); // 999

Closures can be used in many places. It has two greatest uses. One is to read the variables inside the function as mentioned earlier, and the other is to keep the values ​​​​of these variables in memory.

function f1() {
  var n = 999;
  nAdd = function(){ // nAdd 是全局变量
    n += 1;
  }
  
  function f2() {
    alert(n);
  }
  return f2;
}
var result = f1();
result(); // 999
nAdd();
result(); // 1000

1> Since closure will cause the function to The variables in are all stored in memory, which consumes a lot of memory, so closures cannot be abused, otherwise it will cause performance problems on the web page, and may cause memory leaks in IE. The solution is to delete all unused local variables before exiting the function

2> Closures will change the values ​​of variables inside the parent function outside the parent function. Therefore, if you use the parent function as an object, the closure as its public method, and the internal variables as its private value, you must be careful and don't do it casually. Change the value of the variable inside the parent function

var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function() {
    return function() {
      return this.name;
    };
  },
  getNameFunc2 : function() {
    return () => this.name;
  },
  getNameFunc3 : function() {
    this_ = this;
    return function() {
      return this_.name;
    };
  }
};
alert(object.getNameFunc()());  // The Window，this 指向调用的对象，此处执行的时全局 this 
alert(object.getNameFunc2()()); // My Object，使用箭头函数相当于 getNameFunc3 的写法
alert(object.getNameFunc3()()); // My Object

function outerFun() {
  var a =0;
  alert(a);  
}
var a = 4;
outerFun(); // 0
alert(a); // 4

function outerFun() {
  a = 0; // 没有 var，此时 a 是作用于全局变量，将修改全局变量的 a
  alert(a);  
}
var a=4; // 全局变量 a
outerFun(); // 0
alert(a); // 0

function createFunctions() {
  var result = new Array();
  for (var i=0; i < 10; i++) {
    result[i] = function() {
      return i;
    };
  }
  return result;
}
var funcs = createFunctions();
for (var i=0; i < funcs.length; i++) { // 打印出 10 个 10，在 js 中使用 () 才会执行函数
  console.log(funcs[i]());
}

The above is the detailed content of Detailed explanation of closures in JavaScript. For more information, please follow other related articles on the PHP Chinese website!