Notions de base avancées du front-end (6) : Observez les piles d'appels de fonction, les chaînes de portée et les fermetures dans les outils de développement Chrome

Dans le développement front-end, il existe une compétence très importante appelée débogage des points d'arrêt.

Dans les outils de développement de Chrome, grâce au débogage des points d'arrêt, nous pouvons très facilement observer le processus d'exécution de JavaScript étape par étape et percevoir intuitivement la pile d'appels de fonction, la chaîne de portée, l'objet variable, la fermeture, ces changements dans les informations clés . Par conséquent, le débogage des points d'arrêt joue un rôle très important dans la localisation rapide des erreurs de code et dans la compréhension rapide du processus d'exécution du code. Il s'agit également d'une compétence avancée essentielle pour nos développeurs front-end.

Bien sûr, si vous n'en savez pas suffisamment sur ces concepts de base de JavaScript [contexte d'exécution, objets variables, fermetures, ceci, etc.], il peut être difficile de maîtriser parfaitement le débogage des points d'arrêt. Mais heureusement, dans les articles précédents, j'ai donné un aperçu détaillé de ces concepts, il devrait donc être relativement facile pour tout le monde de maîtriser cette compétence.

Afin d'aider tout le monde à mieux comprendre cela et la fermeture, et parce que la définition de la fermeture dans l'article précédent est un peu biaisée, j'utiliserai des exemples liés à la fermeture dans cet article. En savoir plus sur le débogage des points d'arrêt. afin que chacun puisse apporter des corrections à temps. J'admets mon erreur ici et j'ai induit tout le monde en erreur.

1. Revue des concepts de base

La fonction est en cours Lorsque l'exécution est appelée, un contexte d'exécution pour la fonction actuelle est créé. Lors de la phase de création du contexte d'exécution, l'objet variable, la chaîne de portée, la fermeture et ce pointeur seront déterminés respectivement. De manière générale, il existe plusieurs fonctions dans un programme JavaScript et le moteur JavaScript utilise une pile d'appels de fonctions pour gérer l'ordre d'appel de ces fonctions. La séquence d'appel de la pile d'appels de fonction est cohérente avec la structure des données de la pile.

2. Apprenez à connaître les outils de débogage de point d'arrêt

Essayez d'utiliser une version plus récente du navigateur Chrome (je ne suis pas sûr que l'ancienne version que vous utilisez soit la même que la mienne), affichez les outils de développement du navigateur Chrome.

Trois points verticaux dans le coin supérieur droit du navigateur -> Plus d'outils -> Outils de développement ->

Dans ma démo, j'ai mis le code dans app.js et je l'ai introduit dans index.html. Pour l’instant, nous devons uniquement nous concentrer sur la flèche rouge dans la capture d’écran. Au-dessus de l'extrême gauche, il y a une rangée d'icônes. Nous pouvons contrôler l'ordre d'exécution des fonctions en les utilisant. De gauche à droite, ils sont :

Reprendre/mettre en pause l'exécution du script

● passer au prochain appel de fonction
, la performance réelle n'est pas rencontrée Lorsque la fonction est atteinte, effectuez l'étape suivante. Lorsqu'une fonction est rencontrée, l'étape suivante est exécutée directement sans entrer dans la fonction.

● passez à l'appel de fonction suivant
Entrez, la performance réelle est que lorsque la fonction n'est pas rencontrée, l'étape suivante est exécutée. Lorsqu'une fonction est rencontrée, le contexte d'exécution de la fonction est entré.

Quantity sortir de la fonction actuelle
Sortir de la fonction actuelle

Quantity désactiver les points d'arrêt
Désactiver les points d'arrêt

● ne pas faire de pause sur les exceptions
Capture d'exception sans pause

Parmi elles, traverser, entrer et sauter sont les trois opérations que j'utilise le plus.

Dans le code d'affichage Cliquez sur le numéro de ligne pour définir un point d'arrêt. Les paramètres de point d'arrêt ont les caractéristiques suivantes :

Ensuite, nous utilisons Pour quelques exemples, utilisons l'outil de débogage de point d'arrêt pour voir comment notre fonction de démonstration fonctionne pendant l'exécution.

Avant de poursuivre la lecture, nous pouvons nous arrêter et y réfléchir, qui est la fermeture dans cet exemple ?

这是来自《你不知道的js》中的一个例子。由于在使用断点调试过程中，发现chrome浏览器理解的闭包与该例子中所理解的闭包不太一致，因此专门挑出来，供大家参考。我个人更加倾向于chrome中的理解。

● 第一步：设置断点，然后刷新页面。

● 第二步：点击上图红色箭头指向的按钮（step into），该按钮的作用会根据代码执行顺序，一步一步向下执行。在点击的过程中，我们要注意观察下方call stack 与 scope的变化，以及函数执行位置的变化。

一步一步执行，当函数执行到上例子中

我们可以看到，在chrome工具的理解中，由于在foo内部声明的baz函数在调用时访问了它的变量a，因此foo成为了闭包。这好像和我们学习到的知识不太一样。我们来看看在《你不知道的js》这本书中的例子中的理解。

书中的注释可以明显的看出，作者认为fn为闭包。即baz，这和chrome工具中明显是不一样的。

而在备受大家推崇的《JavaScript高级编程》一书中，是这样定义闭包。

这里chrome中理解的闭包，与我所阅读的这几本书中的理解的闭包不一样。具体这里我先不下结论，但是我心中更加偏向于相信chrome浏览器。

我们修改一下demo01中的例子，来看看一个非常有意思的变化。

// demo02
var fn;
var m = 20;
function foo() {
    var a = 2;
    function baz(a) { 
        console.log(a);
    }
    fn = baz; 
}
function bar() {
    fn(m); 
}

foo();
bar(); // 20

这个例子在demo01的基础上，我在baz函数中传入一个参数，并打印出来。在调用时，我将全局的变量m传入。输出结果变为20。在使用断点调试看看作用域链。

是不是结果有点意外，闭包没了，作用域链中没有包含foo了。我靠，跟我们理解的好像又有点不一样。所以通过这个对比，我们可以确定闭包的形成需要两个条件。

● 在函数内部创建新的函数；

● 新的函数在执行时，访问了函数的变量对象；

还有更有意思的。

我们继续来看看一个例子。

// demo03

function foo() {
    var a = 2;

    return function bar() {
        var b = 9;

        return function fn() {
            console.log(a);
        }
    }
}

var bar = foo();
var fn = bar();
fn();

在这个例子中，fn只访问了foo中的a变量，因此它的闭包只有foo。

修改一下demo03，我们在fn中也访问bar中b变量试试看。

// demo04

function foo() {
    var a = 2;

    return function bar() {
        var b = 9;

        return function fn() {
            console.log(a, b);
        }
    }
}

var bar = foo();
var fn = bar();
fn();

这个时候，闭包变成了两个。分别是bar，foo。

我们知道，闭包在模块中的应用非常重要。因此，我们来一个模块的例子，也用断点工具来观察一下。

// demo05
(function() {

    var a = 10;
    var b = 20;

    var test = {
        m: 20,
        add: function(x) {
            return a + x;
        },
        sum: function() {
            return a + b + this.m;
        },
        mark: function(k, j) {
            return k + j;
        }
    }

    window.test = test;

})();

test.add(100);
test.sum();
test.mark();

var _mark = test.mark();
_mark();

注意：这里的this指向显示为Object或者Window，大写开头，他们表示的是实例的构造函数，实际上this是指向的具体实例

上面的所有调用，最少都访问了自执行函数中的test变量，因此都能形成闭包。即使mark方法没有访问私有变量a，b。

我们还可以结合点断调试的方式，来理解那些困扰我们很久的this指向。随时观察this的指向，在实际开发调试中非常有用。

// demo06

var a = 10;
var obj = {
    a: 20
}

function fn () {
    console.log(this.a);
}

fn.call(obj); // 20

更多的例子，大家可以自行尝试，总之，学会了使用断点调试之后，我们就能够很轻松的了解一段代码的执行过程了。这对快速定位错误，快速了解他人的代码都有非常巨大的帮助。大家一定要动手实践，把它给学会。

Enfin, sur la base de la situation d'exploration ci-dessus, résumons à nouveau la fermeture :

La création de la fermeture n'est confirmée que lorsque la fonction est appelée et exécutée.

La formation des fermetures est directement liée à l'ordre d'accès de la chaîne de portée.

Une fermeture ne sera formée que lorsque la fonction interne accède à l'objet variable dans la chaîne de portée supérieure. Par conséquent, nous pouvons utiliser des fermetures pour accéder aux variables à l'intérieur de la fonction.

Les fermetures comprises dans Chrome sont très différentes des fermetures comprises dans "JS You Don't Know" et "JavaScript Advanced Programming". Personnellement, je suis plus enclin à croire en Chrome. Je ne tirerai aucune conclusion hâtive ici. Vous pouvez le confirmer par vous-même après avoir exploré la base de mes idées. Dans un article précédent, j'ai fait une définition basée sur ce que j'ai appris du livre. Je pense qu'elle était erronée. Je suis désolé pour tout le monde.