고급 프론트 엔드 기본 사항 (3): 변수 개체에 대한 자세한 설명, 높은 수준의 방법으로 변수 개선을 설명하는 방법 교육

새해 초부터 일에 대한 열의가 별로 높지 않아 요즘 활동이 뜸한 상태입니다. 아침에 일어나고 싶지 않고, 일어나도 회사에 가고 싶지 않습니다. 물론 휴가 이전에도 일에 대한 열정은 매우 높았고, 소규모 프로그램 프로젝트를 시작하려고 생각하고 있었습니다. 그러나 휴가를 마치고 돌아온 후에는 작업 스타일이 완전히 달라졌습니다. 명절후증후군이 심한 것 같아요. 다행히 이번 주가 완전히 낭비되지는 않았음을 보여주기 위해 몇 편의 기사를 썼습니다. 이 문서에서는 변수 개체를 소개합니다.

JavaScript에서는 필연적으로 변수와 함수를 선언해야 하는데 JS 파서는 이러한 변수를 어떻게 찾나요? 또한 실행 컨텍스트에 대한 더 깊은 이해가 필요합니다.

이전 기사에서 우리는 함수가 호출(활성화)되면 새로운 실행 컨텍스트가 생성된다는 것을 이미 알고 있었습니다. 실행 컨텍스트의 수명주기는 두 단계로 나눌 수 있습니다.

1. 생성 단계
이 단계에서는 실행 컨텍스트가 변수 객체를 생성하고 범위 체인을 설정하며 이

2. 코드 실행 단계
생성 완료 후 코드 실행이 시작되며, 이때 변수 할당, 함수 참조 등의 코드 실행이 완료됩니다.

여기서 실행 컨텍스트를 자세히 이해하는 것이 매우 중요하다는 것을 알 수 있습니다. 왜냐하면 실행 컨텍스트에는 변수 개체, 범위 체인, this 등이 포함되기 때문입니다. 하지만 이는 매우 중요한 개념이므로 우리가 JavaScript를 진정으로 이해할 수 있는지 여부와 관련이 있습니다. 다음 글에서는 이를 하나씩 자세히 요약해 보겠습니다. 여기서는 먼저 변수 개체를 이해하는 데 중점을 둡니다.

변수 객체

변수 객체 생성은 다음과 같은 과정을 순차적으로 거친다.

1.인수 객체를 생성합니다. 현재 컨텍스트의 매개변수를 확인하고 객체 아래에 속성 및 속성값을 설정합니다.

2. 현재 컨텍스트의 함수 선언, 즉 function 키워드를 사용하여 선언된 함수를 확인합니다. 변수 객체에 함수 이름으로 속성을 생성하고 속성 값은 함수가 위치한 메모리 주소에 대한 참조입니다. 함수 이름 속성이 이미 존재하는 경우 해당 속성은 새 참조로 덮어쓰여집니다.

3. 현재 컨텍스트에서 변수 선언을 확인합니다. 변수 선언이 발견될 때마다 변수 개체에 변수 이름으로 속성을 생성하고 속성 값이 정의되지 않습니다. 변수명의 속성이 이미 존재하는 경우, 같은 이름의 함수가 정의되지 않은 상태로 수정되는 것을 방지하기 위해 바로 건너뛰고 원래 속성값은 수정되지 않습니다.

이 규칙에 따르면 변수 승격을 이해하는 것은 매우 간단해집니다. 변수 승격은 많은 기사에서 언급되지만 실제로는 정확히 무엇인지 알지 못하는 사람들이 많습니다. 앞으로는 변수 개체 생성 프로세스를 사용하여 인터뷰 중에 변수 승격을 면접관에게 설명하여 즉각적인 개선을 보장할 것입니다.

위 규칙에서 함수 선언이 var 선언보다 우선순위가 높다는 것을 알 수 있습니다. 모든 사람이 변수 객체를 더 잘 이해할 수 있도록 몇 가지 간단한 예를 통해 이에 대해 논의하겠습니다.

// demo01
function test() {
    console.log(a);
    console.log(foo());

    var a = 1;
    function foo() {
        return 2;
    }
}

test();

위의 예에서는 test()의 실행 컨텍스트에서 직접 이해하기 시작합니다. test()가 전역 범위에서 실행되면 test()의 실행 컨텍스트가 생성되기 시작합니다. 이해를 돕기 위해 다음과 같은 형식으로

创建过程
testEC = {
    // 变量对象
    VO: {},
    scopeChain: {},
    this: {}
}

// 因为本文暂时不详细解释作用域链和this，所以把变量对象专门提出来说明

// VO 为 Variable Object的缩写，即变量对象
VO = {
    arguments: {...},
    foo: <foo reference>  // 表示foo的地址引用
    a: undefined
}

를 표현합니다. 실행 단계에 들어가기 전에는 변수 객체의 속성에 접근할 수 없습니다! 그러나 실행 단계에 들어가면 변수 개체가 활성 개체로 변환되고 내부 속성에 액세스할 수 있으며 실행 단계 작업이 시작됩니다.

이렇게 인터뷰에서 가변 객체와 활성 객체의 차이점이 무엇인지 묻는다면 자유롭게 대답할 수 있습니다. 실제로는 동일한 객체이지만 실행이 다릅니다. 컨텍스트.

// 执行阶段
VO ->  AO   // Active Object
AO = {
    arguments: {...},
    foo: <foo reference>,
    a: 1
}

따라서 위의 데모1 예제에서는 실행 순서가 다음과 같습니다.

function test() {
    function foo() {
        return 2;
    }
    var a;
    console.log(a);
    console.log(foo());
    a = 1;
}

test();

이해를 돕기 위해 또 다른 예를 들어보겠습니다.

// demo2
function test() {
    console.log(foo);
    console.log(bar);

    var foo = 'Hello';
    console.log(foo);
    var bar = function () {
        return 'world';
    }

    function foo() {
        return 'hello';
    }
}

test();

// 创建阶段
VO = {
    arguments: {...},
    foo: <foo reference>,
    bar: undefined
}
// 这里有一个需要注意的地方，因为var声明的变量当遇到同名的属性时，会跳过而不会覆盖

// 执行阶段
VO -> AO
VO = {
    arguments: {...},
    foo: 'Hello',
    bar: <bar reference>
}

이 예에서 위의 지식을 결합하여 변수 개체의 생성 단계부터 실행 단계까지의 변경 사항을 주의 깊게 비교해야 합니다. 이미 이해했다면 변수 개체와 관련된 모든 것이 의미됩니다. 당신에게는 더 이상 어려운 일이 아닙니다.

전역 컨텍스트 변수 객체

브라우저를 예로 들면 전역 객체는 window입니다.
전역 컨텍스트에는 특별한 위치가 있으며, 해당 변수 개체는 창 개체입니다. 이 특별한 기능은 창을 가리키는 이 지점에도 적용됩니다.

// 以浏览器中为例，全局对象为window
// 全局上下文
windowEC = {
    VO: window,
    scopeChain: {},
    this: window
}

또한 전역 컨텍스트의 수명 주기는 프로그램의 수명 주기와 일치합니다. 브라우저 창을 닫는 등 프로그램이 종료되지 않는 한 전역 컨텍스트는 항상 존재합니다. 다른 모든 컨텍스트는 전역 컨텍스트의 속성에 직접 액세스할 수 있습니다.