js의 실행 컨텍스트 및 변수 객체 분석

이 글은 js의 실행 컨텍스트와 변수 객체에 대한 분석입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

Execution Context

JavaScript 코드 실행 프로세스에는 컴파일과 실행이라는 두 단계가 포함됩니다. JavaScript 코드 컴파일 단계에서는 코드 실행 단계에서 범위 규칙이 결정되거나 함수가 호출되면 실행 컨텍스트(실행 컨텍스트)도 생성됩니다. 호출되는 실행 환경

은 ECMA-262에서 다음과 같은 정의를 갖습니다.

컨트롤러가 ECMA 스크립트의 실행 코드로 전환하면 컨트롤러는 실행 환경으로 들어갑니다. 현재 활성화된 여러 실행 환경은 논리적으로 스택 구조를 형성합니다. 논리적 스택의 최상위 실행 환경을 현재 실행 중인 실행 환경이라고 합니다. 컨트롤러가 현재 실행 중인 실행 환경에 종속된 실행 코드에서 해당 실행 환경과 독립적인 실행 코드로 전환될 때마다 새로운 실행 환경이 생성됩니다. 새로 생성된 실행 환경은 스택에 푸시되어 현재 실행 중인 실행 환경이 됩니다.

이것은 또한 JavaScript 코드에서 여러 실행 컨텍스트가 생성되는 추상적인 개념입니다. 실행 컨텍스트는 변수나 함수가 접근할 수 있는 다른 데이터입니다. 사양과 관련 문서를 읽어보니 실행 컨텍스트(줄여서 EC)에는 주로 다음과 같이 의사 코드로 표현되는 세 가지 지점이 포함되어 있다는 것을 알게 되었습니다.

다음 코드를 살펴보세요.

EC = {
    this: // 绑定this指向为当前执行上下文, 如果函数属于全局函数，则this指向window
    scopeChain: [] // 创建当前执行环境的作用域链,
    VO: {} // 当前环境的变量对象(Variable Object)，每个环境都有一个与之关联的变量对象
}

• 1 이 코드를 실행하면 먼저 전역 컨텍스트 globalEC가 생성되어 실행에 푸시됩니다.

• 2. foo()가 호출되면 foo의 컨텍스트 fooEC가 생성되어 실행 컨텍스트 스택에 푸시됩니다. 🎜#
  3. bar()가 호출되면 bar의 컨텍스트 barEC가 생성되어 실행 컨텍스트 스택에 푸시됩니다. #4. bar 함수가 실행되면 barEC는 실행 컨텍스트 스택에서 팝됩니다.

• 5. fooEC는 실행 컨텍스트 스택
• #🎜 🎜#

  6. 브라우저 창이 닫히면 전역 컨텍스트 globalEC가 실행 컨텍스트 스택에서 나타납니다.

요약: 스택의 맨 아래는 항상 전역 컨텍스트이고, 스택의 맨 위는 현재 실행 중인 컨텍스트입니다. 브라우저가 닫힐 때만 실행 컨텍스트에서 전역 컨텍스트가 나타납니다. stack

• Variable Object:# 🎜🎜#
• 각 실행 환경에는 연결된 변수 개체가 있으며 이는 모든 변수와 함수가 정의된 추상적인 개념입니다. 환경에 있는 모든 정보는 이 개체에 저장됩니다. 우리가 작성하는 코드는 이 개체에 액세스할 수 없지만 단일 파서는 데이터를 처리할 때 뒤에서 이를 사용합니다.
  브라우저에서 js 스크립트 프로그램을 처음 로드하면 기본적으로 전역 실행 환경으로 들어갑니다. 이때 전역 환경 변수 개체는 코드에서 액세스할 수 있는 window입니다.

환경이 함수인 경우 이 활성 개체는 현재 컨텍스트(VO = AO)의 변수 개체로 사용됩니다. 이때 변수 개체는 코드를 통해 액세스할 수 없습니다. 활성 개체에 대해 설명합니다.

Activation Object

1 활동 객체(이하 AO로 약칭)를 초기화합니다.

언제든지 함수가 호출되면 현재 컨텍스트의 활성 개체가 즉시 생성되고 활성 개체는 변수 개체로 사용되며 인수 특성을 통해 초기화되고 값은 인수 개체(전달된 실제 매개 변수 집합, 형식 매개변수와는 관련이 없으며 형식 매개변수는 로컬 환경으로 사용됩니다. 로컬 변수가 정의됩니다)

var a = 1;
function foo() {
    var b = 2;
    function bar() {
        console.log(b)
    }
    bar()
    console.log(a);
}

foo()

arguments 객체에는 다음 속성이 있습니다:

length:

매개변수는 실제로 전달됩니다. Number;

callee:

은 현재 함수, 즉 호출된 함수에 대한 참조;

• 'Class index':

  문자열 유형의 정수, 값 Argument 객체에 있는 객체 첨자의 값이고 Argument 객체는 배열과 구별되어야 하며 Argument 객체이며 단지 배열과 길이 속성이 같고 값은 첨자를 통해 접근할 수 있습니다#🎜🎜 #

• AO = {
    arguments: <ArgO>
  };

  그럼 핵심은 바로 실행 환경입니다. 코드는 두 단계로 나누어 처리합니다.

  # 🎜🎜#실행 환경 진입

• 함수 실행 코드#🎜 🎜#

2.

함수가 호출되면 실행 환경(컨텍스트)에 들어가 바로 활성 객체를 생성하고,args 속성을 통해 초기화되며, 동시에 모든 형식 매개변수, 모든 함수 선언, 모든 변수 실행 환경의 선언을 스캔하여 활성 개체(AO)에 추가하고 이 값을 결정한 다음 코드가 실행되기 시작합니다.

1. 실행 환경 진입 단계:

2. 모든 형식 매개변수 선언:
   #🎜 🎜#정식 매개변수 이름은 활성 개체 속성으로 생성됩니다. 실제 매개변수가 전달되면 값은 실제 매개변수 값이 됩니다. 매개변수가 전달되지 않으면 값이 정의되지 않습니다.
#🎜🎜 #

모든 함수 선언:# 🎜🎜#

함수 이름은 활성 객체의 속성으로 생성됩니다. 값은 이 함수를 가리키는 메모리의 포인터입니다. 객체에 이미 같은 이름의 속성이 있으면 완전히 대체됩니다.

모든 변수 선언:

所有变量名称作为活动对象的属性被创建, 值为undefined,但是和函数声明不同的是, 如果变量名称跟已经存在的属性(形式参数和函数)相同、则不会覆盖

function foo(a, b) {
    var c = 10;
    function d() {
        console.log('d');
    }
    var e = function () {
        console.log('e');
    };
    (function f() {})
    if (true) {
        var g = 20;
    } else {
        var h = 30;
    }
}

foo(10);

此时在进入foo函数执行上下文时,foo的活动对象fooAO为:

fooAO = {
    arguments: {
        0: 10,
        length: 1
    },
    a: 10,
    b: undefined,
    c: fundefined,
    d: <d reference>  //指向d函数的指针,
    e: undefined,
    g: undefined,
    h: undefined  // 虽然else中的代码永远不会执行,但是h仍然是活动对象中的属性
}

这个例子做如下几点说明:

• 1.关于函数,只会创建函数声明作为活动对象的属性, 而f函数作为函数表达式并不会出现在活动对象(AO)中

• 2.e虽然值是一个函数, 但是作为变量属性被活动对象创建

3、代码执行阶段

在进入执行上下文阶段，活动对象拥有了属性，但是很多属性值为undefined, 到代码执行阶段就开始为这些属性赋值了

还是上面的代码例子, 此时活动对象如下:

fooAO = {
    arguments: {
        0: 10,
        length: 1
    },
    a: 10,
    b: undefined,
    c: 10, // 赋值为undefined
    d: <d reference>  //指向d函数的指针,
    e: <d reference>  // 指向e函数的指针
    g: 20,
    h: undefined  // 声明h变量,但是没有赋值
}

变量对象包括:{ arguments对象+函数形参+内部变量＋函数声明(但不包含表达式) }

这时这个活动对象, 即作为当前执行环境的变量对象会被推到此执行环境作用域链的最前端(作用域链本篇不做介绍，会在下一篇文章中单独讲解作用域和作用域链), 假定执行环境为一个对象,则整个执行环境可以访问到的属性如下:

伪代码如下:

fooExecutionContext = {
    scopeChain: [], //fooAO +所有父执行环境的活动对象,
    fooAO: {
        arguments: {
            0: 10,
            length: 1
        },
        a: 10,
        b: undefined,
        c: 10, // 赋值为undefined
        d: <d reference>  //指向d函数的指针,
        e: <d reference>  // 指向e函数的指针
        g: 20,
        h: undefined
    },
    this: 当前执行环境的上下文指针
}

补充:

下面的例子为了说明一下变量声明的顺序及变量同名不会影响函数声明

console.log(foo); //  foo的函数体
var foo = 10;
console.log(foo) // 10
function foo() {};
foo = 20;
console.log(foo); // 20

在代码执行之前, 就会读取函数声明,变量声明的顺序在函数声明和形参声明之后, 整个流程如下:

进入执行环境阶段:

1. var VO = {}
2. VO[foo] = 'foo函数指针'
3. 扫描到var foo = 10，

 // 但是foo做为function已经声明，所以变量声明不会影响同名的函数声明，如果代码中没有foo函数声明的话,则foo为undefined

代码执行阶段:

1. VO[foo] = 10;
2. VO[foo] = 20;

解析代码完成。

相关推荐：

js对象是什么？js对象的介绍（附代码）

Js中前端模块化的详细分析及其区别对比

js中字符方法以及字符串操作方法的总结（附代码）

위 내용은 js의 실행 컨텍스트 및 변수 객체 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!