프론트엔드 기본 고급 변수 객체에 대한 자세한 설명

새해 초부터 일에 대한 열정이 별로 높지 않아 요즘 활동이 뜸한 상태입니다. 아침에 일어나고 싶지 않고, 일어나도 회사에 가고 싶지 않습니다. 물론 휴가 이전에도 일에 대한 열정은 매우 높았고, 소규모 프로그램 프로젝트를 생각하고 있었습니다. 그러나 휴가를 마치고 돌아온 후에는 작업 스타일이 완전히 달라졌습니다. 명절후증후군이 심한 것 같아요. 다행히 이번 주가 완전히 낭비되지는 않았음을 보여주기 위해 몇 편의 기사를 썼습니다. 이 문서에서는 변수 개체를 소개합니다. JavaScript에서는 필연적으로 변수와 함수를 선언해야 하는데 JS 파서는 이러한 변수를 어떻게 찾나요? 또한 실행 컨텍스트에 대한 더 깊은 이해가 필요합니다. 이전 기사에서 우리는 함수가 호출(활성화)되면 새로운 실행 컨텍스트가 생성된다는 것을 이미 알고 있었습니다. 실행 컨텍스트의 수명주기는 두 단계로 나눌 수 있습니다.

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

• 코드 실행 단계
  생성이 완료된 후 코드가 시작됩니다. 실행하면 이때 변수 할당, 함수 참조 등의 코드 실행이 완료됩니다.

실행 컨텍스트 생명주기

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

변수 객체

변수 객체 생성은 다음과 같은 과정을 순차적으로 거쳐 진행됩니다.

1. 인수 개체를 만듭니다. 현재 컨텍스트의 매개변수를 확인하고 객체의 속성과 속성값을 설정합니다.

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

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

어떤 사람들은 텍스트 읽기를 좋아하지 않는다는 걸 알아요

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

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

// demo01function 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: {...},  //注：在浏览器的展示中，函数的参数可能并不是放在arguments对象中，这里为了方便理解，我做了这样的处理    foo: <foo reference>  // 表示foo的地址引用    a: undefined
}

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

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

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

그래서 위 예제 데모1에서 실행 순서는 다음과 같습니다

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

test();

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

// demo2function 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 -> AOVO = {
    arguments: {...},
    foo: 'Hello',
    bar: <bar reference>
}

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

전역 컨텍스트의 변수 객체

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

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

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

위 내용은 프론트엔드 기본 고급 변수 객체에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!