実行コンテキスト、モジュール/JavaScript

実行コンテキスト

実行コンテキストの概念

<script>
console.log("This is global context");

function ExContext1() {
    console.log("This is ExContext1");
};

function ExContext2() {
    ExContext1();
    console.log("This is ExContext2");
};

ExContext2();
</script>

-- 실행 컨텍스트 스택이 전역 컨텍스트 -> ExContext2 -> ExContext1 순으로 쌓이게 된다.

コンテキスト作成プロセスの実行

アクティブオブジェクトの作成

パラメータオブジェクトの作成

スキャン情報の作成

変数の作成

このバインディング

実行コード

スキャンチェーン

グローバル実行コンテキストのスキャンチェーン

<script>
var var1 = 1;
var var2 = 2;
console.log(var1); // (출력값) 1
console.log(var2); // (출력값) 2
</script>

1) 위 코드는 전역 코드이다. 함수가 선언되지 않아 함수 호출이 없고, 실행 가능한 코드들만 나열되어 있다.
2) 위 코드가 실행되면, 먼저 전역 실행 컨텍스트가 생성되고, 변수 객체가 만들어진다.
3) 현재 전역 실행 컨텍스트 단 하나만 실행되고 있어 참조할 상위 컨텍스트가 없다. 자신이 최상위에 위치하는 변수 객체이다.
4) 따라서, 이 변수 객체의 소코프 체인은 자기 자신만을 가진다.
5) 변수 객체의 [[scope]]는 변수 객체 자신을 가리킨다.

関数を呼び出すときに作成される実行コンテキストのブランチチェーン。

<script>
var var1 = 1;
var var2 = 2;
function func() {
    var var1 = 10;
    var var2 = 20;
    console.log(var1);  // (출력값) 10
    console.log(var2);  // (출력값) 20
}
func();
console.log(var1);  // (출력값) 1
console.log(var2);  // (출력값) 2
</script>

1) 코드 실행시 전역 실행 컨텍스트가 생성되고, func() 함수 객체가 만들어진다.
2) 함수 객체가 생성될 때, 그 함수 객체의 [[scope]]는 현재 실행되는 컨텍스트의 변수 객체에 있는 [[scope]]를 그대로 가진다. 따라서, func 함수 객체의 [[scope]]는 전역 변수 객체가 된다.
3) 스코프 체인[(1, func 변수 객체), (0, 전역 객체)]

レプリカ

モジュールの概念

<script>
function outerFunc() {
    var x = 10;
    var innerFunc = function () { console.log(x); }
    return innerFunc;
}

var inner = outerFunc();
inner();    // (출력값) 10
</script>
1) outerFunc에서 선언된 x를 참조하는 innerFunc가 클로저
2) 클로저로 참조되는 외부 변수 즉, outerFunc의 x와 같은 변수를 '자유 변수'라고 한다. 클로저는 자유 변수에 엮여 있는 함수이다.

<script>
function  outerFunc(arg1, arg2) {
    var local = 8;
    function innerFunc(innerArg) {
        console.log((arg1 + arg2) / (innerArg + local))
    }
    return innerFunc;
}
var exam1 = outerFunc(2, 4);
exam1(2);
</script>

エンクロージャの使用

<script>
var getCompletedStr = (function () {
    var buffAr = [
        'I am ',
        '',
        '. I live in ',
        '',
        '. I am ',
        '',
        ' years old.',
    ];

    return (function (name, city, age) {
        buffAr[1] = name;
        buffAr[3] = city;
        buffAr[5] = age;

        return buffAr.join('');
    });
})();

var str = getCompletedStr('zzoon','seoul', 16);
console.log(str);
</script>
--> I am zzoon. I live in seoul. I am 16 years old.

<script>
function callLater(obj, a, b) {
    return (function () {
        obj["sum"] = a + b;
        console.log(obj["sum"]);
    });
}

var sumObj = {
    sum : 0
}

var func = callLater(sumObj, 1, 2);
setTimeout(func, 2000);
</script>
--> 2초 뒤, 3

<script>
function outerFunc(argNum) {
    var num = argNum;
    return function (x) {
        num += x;
        console.log('num: ' + num);
    }
}
var exam = outerFunc(40);
exam(5);
exam(-10);
</script>
--> num : 45, num : 35
- 클로저의 프로퍼티값이 쓰기 가능하므로 그 값이 여러 번 호출로 항상 변경할 수 있음

<script>
function func() {
    var x = 1;
    return {
      func1 : function () { console.log(++x); },
      func2 : function () { console.log(-x); }
    };
};

var exam = func();
exam.func1();
exam.func2();
</script>
--> 2, -2
- 하나의 클로저가 여러 함수 객체의 스코프 체인에 들어가 있는 경우

<script>
function countSeconds(howMany) {
    for (var i = 1; i <= howMany; i++) {
        (function (currentI) {
            setTimeout(function () {
                console.log(currentI);
            }, currentI * 1000);
        })(i);
    }
};
countSeconds(3);
</script>
--> 1, 2, 3