고급 프런트 엔드 기본 사항(6): Chrome 개발자 도구에서 함수 호출 스택, 범위 체인 및 클로저 관찰

프론트엔드 개발에는 브레이크포인트 디버깅이라는 매우 중요한 기술이 있습니다.

Chrome의 개발자 도구에서는 중단점 디버깅을 통해 JavaScript의 실행 과정을 단계별로 매우 편리하게 관찰할 수 있으며, 함수 호출 스택, 범위 체인, 변수 객체, 클로저 등 주요 정보의 변화를 직관적으로 인식할 수 있습니다. . 따라서 중단점 디버깅은 코드 오류를 빠르게 찾아내고 코드의 실행 프로세스를 빠르게 이해하는 데 매우 중요한 역할을 합니다. 이는 프런트 엔드 개발자에게 필수적인 고급 기술이기도 합니다.

물론 이러한 JavaScript의 기본 개념(실행 컨텍스트, 변수 개체, 클로저, this 등)에 대해 충분히 알지 못한다면 중단점 디버깅을 완전히 익히기가 어려울 수 있습니다. 하지만 다행스럽게도 이전 기사에서 이러한 개념에 대한 자세한 개요를 제공했기 때문에 모든 사람이 이 기술을 익히는 것이 상대적으로 쉬울 것입니다.

이와 클로저에 대한 모든 분들의 이해를 돕기 위해, 그리고 이전 글에서 클로저에 대한 정의가 다소 편향되어 있기 때문에 이번 글에서는 클로저와 관련된 예시를 사용하겠습니다. 모든 사람이 제 시간에 수정을 할 수 있도록. 나는 여기서 내 실수를 인정하고 모두를 오해했습니다.

---

1. 기본 개념 복습

기능 is being 실행이 호출되면 현재 함수에 대한 실행 컨텍스트가 생성됩니다. 실행 컨텍스트의 생성 단계에서 변수 개체, 범위 체인, 클로저 및 이 포인터가 각각 결정됩니다. 일반적으로 JavaScript 프로그램에는 여러 함수가 있으며 JavaScript 엔진은 함수 호출 스택을 사용하여 이러한 함수의 호출 순서를 관리합니다. 함수 호출 스택의 호출 순서는 스택 데이터 구조와 일치합니다.

---

2. 중단점 디버깅 도구 알아보기

최신 버전의 Chrome 브라우저를 사용해 보세요(사용 중인 이전 버전이 내 버전과 같은지 잘 모르겠습니다). Chrome 브라우저의 개발자 도구를 불러옵니다.

브라우저 오른쪽 상단에 있는 세 개의 수직 점 -> 추가 도구 -> 개발자 도구 -> 소스

인터페이스는 다음과 같습니다.

데모에서는 app.js에 코드를 넣고 index.html에 도입했습니다. 지금은 스크린샷의 빨간색 화살표에만 집중하면 됩니다. 맨 왼쪽 위에는 아이콘 행이 있습니다. 이를 사용하여 함수의 실행 순서를 제어할 수 있습니다. 왼쪽부터

● 스크립트 실행 재개/일시 중지
스크립트 실행 재개/일시 중지

● 다음 함수 호출 건너뛰기
, 실제 성능은 발생하지 않습니다. 해당 기능에 도달하면 다음 단계를 수행합니다. 함수를 만나면 해당 함수에 들어가지 않고 바로 다음 단계를 실행합니다.

● 다음 함수 호출 실행
Step into, 실제 성능은 함수가 발생하지 않으면 다음 단계가 실행되는 것입니다. 함수가 발견되면 함수 실행 컨텍스트로 들어갑니다.

● 현재 기능에서 나가기
현재 기능에서 나가기

● 중단점 비활성화
중단점 비활성화

● 예외 시 일시 중지하지 않음
무정지 예외 캡쳐

그 중에서 제가 가장 많이 사용하는 동작은 건너뛰기, 밟기, 뛰어내리기 3가지 입니다.

위 그림의 왼쪽 두 번째 빨간색 화살표는 함수 호출 스택(call Stack)을 가리키며, 코드 실행 중 호출 스택의 변경 사항이 여기에 표시됩니다.

왼쪽 세 번째 빨간색 화살표는 현재 함수의 범위 체인이 표시되는 범위 체인(Scope)을 가리킵니다. 여기서 Local은 현재 지역 변수 개체를 나타내고 Closure는 현재 범위 체인의 클로저를 나타냅니다. 여기에 있는 범위 체인 표시의 도움으로 예제에서 누가 클로저인지 직관적으로 확인할 수 있으며 이는 클로저에 대한 심층적인 이해에 매우 도움이 됩니다.

---

3. 중단점 설정

표시 코드에서 중단점을 설정하려면 줄 번호를 클릭하세요. 브레이크포인트 설정은 다음과 같은 특징이 있습니다.

별도의 변수를 선언한 라인(값을 지정하지 않은 경우)이나 함수를 선언한 라인에는 브레이크포인트를 설정할 수 없습니다.

중단점을 설정하고 페이지를 새로 고치면 중단점 위치가 일시 중지될 때까지 JavaScript 코드가 실행됩니다. 그런 다음 위에 소개된 작업을 사용하여 디버깅을 시작할 수 있습니다.

여러 중단점을 설정하면 크롬 도구가 자동으로 가장 빠른 중단점부터 실행을 시작하도록 결정하므로 일반적으로 중단점은 하나만 설정합니다.

---

4. 예시

다음으로 For를 사용합니다. 몇 가지 예를 들어, 중단점 디버깅 도구를 사용하여 데모 기능이 실행 중에 어떻게 수행되는지 살펴보겠습니다.

// demo01

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

foo();
bar(); // 2

더 읽기 전에 잠시 멈추고 생각해 보세요. 이 예에서 종결자는 누구입니까?

这是来自《你不知道的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

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

마지막으로 위의 탐색 상황을 바탕으로 클로저를 다시 정리하자면 다음과 같습니다.

클로저는 함수가 호출되어 실행될 때만 생성되는 것으로 확인됩니다.

클로저의 형성은 스코프 체인의 액세스 순서와 직접적인 관련이 있습니다.

클로저는 내부 함수가 상위 스코프 체인의 변수 객체에 접근할 때만 형성됩니다. 따라서 클로저를 사용하여 함수 내부의 변수에 접근할 수 있습니다.

Chrome에서 이해하는 클로저는 "JS You Don't Know" 및 "JavaScript Advanced 프로그래밍"에서 이해하는 클로저와 매우 다릅니다. 개인적으로 Chrome을 믿는 경향이 더 큽니다. 여기서는 어떤 결론도 내리지 않겠습니다. 제 생각을 바탕으로 살펴보신 후 직접 확인하실 수 있습니다. 이전 글에서는 책에서 배운 내용을 바탕으로 정의를 내렸는데, 잘못된 것 같아 수정했습니다.