Explication détaillée des fermetures en JavaScript

Closure : Closure est une fonction qui fait référence à une variable d'une autre fonction. La variable étant référencée, elle ne sera pas recyclée, elle peut donc être utilisée pour encapsuler une variable privée.

Lorsqu'une fonction interne est référencée en dehors des données qui définissent sa portée, une fermeture de la fonction interne est créée. Si la fonction interne fait référence à une variable située dans la fonction externe, lorsque la fonction externe est appelée, celles-ci. les variables ne seront pas libérées en mémoire car la fermeture les nécessite

La portée de la variable : Il existe deux types de portée, la portée globale et la portée locale

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

Lire de l'extérieur Obtenir local variables : cela n'est pas possible dans des circonstances normales, mais vous pouvez définir une autre fonction à l'intérieur de la fonction afin que la fonction interne puisse accéder aux variables de la fonction externe. De plus, les fonctions externes ne peuvent pas accéder aux variables de fonction internes. Il s'agit de la structure unique de « portée de chaîne » du langage JavaScript

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

Les fermetures peuvent être utilisées à de nombreux endroits. Il a deux utilisations principales. L'une consiste à lire les variables à l'intérieur de la fonction comme mentionné précédemment, et l'autre est de conserver les valeurs de ces variables en mémoire

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> les variables de la fonction sont toutes stockées en mémoire, ce qui consomme beaucoup de mémoire, donc les fermetures ne peuvent pas être abusées, sinon cela entraînerait des problèmes de performances sur la page Web et pourrait provoquer des fuites de mémoire dans IE. La solution est de supprimer toutes les variables locales inutilisées avant de quitter la fonction

2> La fermeture modifiera la valeur des variables internes de la fonction parent en dehors de la fonction parent. Par conséquent, si vous utilisez la fonction parent comme objet, la fermeture comme méthode publique et les variables internes comme valeur privée, vous devez être prudent et ne pas le faire avec désinvolture. Changez la valeur de la variable à l'intérieur de la fonction parent.

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]());
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!