Compréhension approfondie de la portée de JavaScript et des connaissances de Closure_Basic

Portée

La portée est la portée d'une variable et d'une fonction. Toutes les variables déclarées dans une fonction en JavaScript sont toujours visibles dans le corps de la fonction. Il existe une portée globale et une portée locale en JavaScript, mais il n'y a pas de portée au niveau du bloc, ni de portée locale. Les variables ont une priorité plus élevée que les variables globales. Utilisons quelques exemples pour comprendre les « règles cachées » de portée en JavaScript (ce sont également des questions souvent posées lors des entretiens front-end).

1. Déclarez les variables à l'avance
Exemple 1 :

var scope="global";
function scopeTest(){
  console.log(scope);
  var scope="local" 
}
scopeTest(); //undefined

La sortie ici n'est pas définie et aucune erreur n'est signalée. En effet, la déclaration dans la fonction que nous avons mentionnée plus tôt est toujours visible dans le corps de la fonction. La fonction ci-dessus est équivalente à :

.

var scope="global";
function scopeTest(){
  var scope;
  console.log(scope);
  scope="local" 
}
scopeTest(); //local

Notez que si vous oubliez var, la variable sera déclarée comme variable globale.

2. Aucune portée au niveau du bloc

Contrairement à d'autres langages couramment utilisés, il n'y a pas de portée au niveau du bloc en Javascript :

function scopeTest() {
  var scope = {};
  if (scope instanceof Object) {
    var j = 1;
    for (var i = 0; i < 10; i++) {
      //console.log(i);
    }
    console.log(i); //输出10
  }
  console.log(j);//输出1

}

La portée des variables en JavaScript est au niveau de la fonction, c'est-à-dire que toutes les variables de la fonction sont définies tout au long de la fonction. Cela apporte également quelques « règles cachées » que nous rencontrerons si nous n'y prêtons pas attention :

var scope = "hello";
function scopeTest() {
  console.log(scope);//①
  var scope = "no";
  console.log(scope);//②
}

La valeur de sortie en ① s'est avérée indéfinie, ce qui est vraiment fou. Nous avons déjà défini la valeur de la variable globale. Cet endroit ne devrait-il pas être bonjour ? En fait, le code ci-dessus équivaut à :

var scope = "hello";
function scopeTest() {
  var scope;
  console.log(scope);//①
  scope = "no";
  console.log(scope);//②
}

Déclarez à l'avance et les variables globales ont une priorité inférieure aux variables locales. Selon ces deux règles, il n'est pas difficile de comprendre pourquoi undefined est généré.

Chaîne de lunette

En JavaScript, chaque fonction a son propre contexte d'exécution. Lorsque le code est exécuté dans cet environnement, une chaîne de portée d'objets variables sera créée. La chaîne de portée est une liste d'objets ou une chaîne d'objets, qui garantit un accès ordonné. aux objets variables.
L'extrémité avant de la chaîne de portée est l'objet variable de l'environnement d'exécution de code actuel, qui est souvent appelé « objet actif ». La recherche de variables commencera à partir de l'objet de la première chaîne, alors si l'objet contient des attributs de variable. la recherche s'arrêtera. Si ce n'est pas le cas, elle continuera à rechercher la chaîne de portée supérieure jusqu'à ce qu'elle trouve l'objet global :

La recherche étape par étape de la chaîne de portée affectera également les performances du programme. Plus la chaîne de portée variable est longue, plus l'impact sur les performances est important. C'est l'une des principales raisons pour lesquelles nous essayons d'éviter de l'utiliser. variables globales.

Fermeture

Concepts de base
La portée est une condition préalable à la compréhension des fermetures. Les fermetures signifient que les variables de la portée externe sont toujours accessibles dans la portée actuelle.

function createClosure(){
  var name = "jack";
  return {
    setStr:function(){
      name = "rose";
    },
    getStr:function(){
      return name + ":hello";
    }
  }
}
var builder = new createClosure();
builder.setStr();
console.log(builder.getStr()); //rose:hello

L'exemple ci-dessus renvoie deux fermetures dans la fonction. Les deux fermetures conservent des références à la portée externe, de sorte que les variables de la fonction externe sont toujours accessibles, peu importe où elles sont appelées. Une fonction définie à l'intérieur d'une fonction ajoutera l'objet actif de la fonction externe à sa propre chaîne de portées. Par conséquent, dans l'exemple ci-dessus, les propriétés de la fonction externe sont accessibles via la fonction interne. C'est également un moyen pour JavaScript de le faire. simuler des variables privées.

Remarque : étant donné que les fermetures auront des étendues de fonctions supplémentaires (les fonctions anonymes internes portent la portée des fonctions externes), les fermetures occuperont plus d'espace mémoire que les autres fonctions. Une utilisation excessive peut entraîner une augmentation de l'utilisation de la mémoire.

Variables dans les fermetures

Lors de l'utilisation d'une fermeture, en raison de l'influence du mécanisme de chaîne de portée, la fermeture ne peut obtenir que la dernière valeur de la fonction interne. Un effet secondaire est que si la fonction interne est dans une boucle, la valeur de. la variable est toujours la dernière valeur.

  //该实例不太合理，有一定延迟因素，此处主要为了说明闭包循环中存在的问题
  function timeManage() {
    for (var i = 0; i < 5; i++) {
      setTimeout(function() {
        console.log(i);
      },1000)
    };
  }

Le programme ci-dessus ne saisit pas les nombres 1 à 5 comme prévu, mais en sort 5 toutes les 5 fois. Regardons un autre exemple :

function createClosure(){
  var result = [];
  for (var i = 0; i < 5; i++) {
    result[i] = function(){
      return i;
    }
  }
  return result;
}

La valeur de retour de l'appel de createClosure()[0]() est 5, et la valeur de retour de createClosure()[4]() est toujours 5. À travers les deux exemples ci-dessus, nous pouvons voir les problèmes que posent les fermetures lors de l'utilisation de fonctions internes avec des boucles : parce que la chaîne de portée de chaque fonction stocke les objets actifs pour les fonctions externes (timeManage, createClosure), ils font donc tous référence à la même variable. i. Lorsque la fonction externe revient, la valeur de i à ce moment est 5, donc la valeur de chaque fonction interne i est également 5.
Alors comment résoudre ce problème ? Nous pouvons forcer le retour du résultat attendu via un wrapper anonyme (expression de fonction anonyme auto-exécutable) :

function timeManage() {
  for (var i = 0; i < 5; i++) {
    (function(num) {
      setTimeout(function() {
        console.log(num);
      }, 1000);
    })(i);
  }
}

Ou renvoie une affectation de fonction anonyme dans la fonction anonyme de fermeture :

function timeManage() {
  for (var i = 0; i < 10; i++) {
    setTimeout((function(e) {
      return function() {
        console.log(e);
      }
    })(i), 1000)
  }
}
//timeManager();输出1,2,3,4，5
function createClosure() {
  var result = [];
  for (var i = 0; i < 5; i++) {
    result[i] = function(num) {
      return function() {
        console.log(num);
      }
    }(i);
  }
  return result;
}
//createClosure()[1]()输出1；createClosure()[2]()输出2

无论是匿名包裹器还是通过嵌套匿名函数的方式，原理上都是由于函数是按值传递，因此会将变量i的值复制给实参num，在匿名函数的内部又创建了一个用于返回num的匿名函数，这样每个函数都有了一个num的副本，互不影响了。

闭包中的this

在闭包中使用this时要特别注意，稍微不慎可能会引起问题。通常我们理解this对象是运行时基于函数绑定的，全局函数中this对象就是window对象，而当函数作为对象中的一个方法调用时，this等于这个对象（TODO 关于this做一次整理）。由于匿名函数的作用域是全局性的，因此闭包的this通常指向全局对象window：

var scope = "global";
var object = {
  scope:"local",
  getScope:function(){
    return function(){
      return this.scope;
    }
  }
}

调用object.getScope()()返回值为global而不是我们预期的local，前面我们说过闭包中内部匿名函数会携带外部函数的作用域，那为什么没有取得外部函数的this呢？每个函数在被调用时，都会自动创建this和arguments，内部匿名函数在查找时，搜索到活跃对象中存在我们想要的变量，因此停止向外部函数中的查找，也就永远不可能直接访问外部函数中的变量了。总之，在闭包中函数作为某个对象的方法调用时，要特别注意，该方法内部匿名函数的this指向的是全局变量。

幸运的是我们可以很简单的解决这个问题，只需要把外部函数作用域的this存放到一个闭包能访问的变量里面即可：

var scope = "global";
var object = {
  scope:"local",
  getScope:function(){
    var that = this;
    return function(){
      return that.scope;
    }
  }
}
object.getScope()()返回值为local。

内存与性能

由于闭包中包含与函数运行期上下文相同的作用域链引用，因此，会产生一定的负面作用，当函数中活跃对象和运行期上下文销毁时，由于必要仍存在对活跃对象的引用，导致活跃对象无法销毁，这意味着闭包比普通函数占用更多的内存空间，在IE浏览器下还可能会导致内存泄漏的问题，如下：

 function bindEvent(){
  var target = document.getElementById("elem");
  target.onclick = function(){
    console.log(target.name);
  }
 }

上面例子中匿名函数对外部对象target产生一个引用，只要是匿名函数存在，这个引用就不会消失，外部函数的target对象也不会被销毁，这就产生了一个循环引用。解决方案是通过创建target.name副本减少对外部变量的循环引用以及手动重置对象：

 function bindEvent(){
  var target = document.getElementById("elem");
  var name = target.name;
  target.onclick = function(){
    console.log(name);
  }
  target = null;
 }

闭包中如果存在对外部变量的访问，无疑增加了标识符的查找路径，在一定的情况下，这也会造成性能方面的损失。解决此类问题的办法我们前面也曾提到过：尽量将外部变量存入到局部变量中，减少作用域链的查找长度。

总结：闭包不是javascript独有的特性，但是在javascript中有其独特的表现形式，使用闭包我们可以在javascript中定义一些私有变量，甚至模仿出块级作用域，但闭包在使用过程中，存在的问题我们也需要了解，这样才能避免不必要问题的出现。