• designPattern 

    1. 정의

    • 생성된 객체들을 별도의 Pool 안에 저장 후 재사용 하는 방법으로, 불필요한 객체 생성반환(GC에 의한)을 최소화하는 **디자인 패턴**중 하나 이다.

      • 객체 재사용을 위해, 생성된 객체Pool 안에 저장시켜 놓는다.

      • 새로운 객체가 필요할때는, 무조건 새로 생성하는것이 아니라, Pool 안에 반환객체가 존재한다면, 그 중 하나를 재사용 한다.

        • 객체 재사용으로 Heap 메모리 사용을 최소화한다.
      • 사용(객체)이 끝난 후에는 다시 **Pool** 안에 반환시킨다.

    2. 특징

    • 정해진 범위내에서 개발자가 직접 **Heap 메모리**를 관리(객체 생성반환)할 수 있다.

      • **객체 생성 비용**을 줄일 수 있다.(Heap 메모리 사용을 줄일 수 있다)

        • 당연한 말이겠지만, 생성되는 객체 크기 및 그 에 따라, 더 많은 비용을 줄일 수도 있다.
      • GC 를 통해 일어나는, 메모리 반환(반환 시 일어나는 일련의 작업들)) **비용**을 줄일 수 있다.

        • 보통 이 과정(메모리 반환 과정)을 처리하는 동안에는, 프로그램 실행 이 중단된다.

        • 또한, 이 과정은 프로그램 실행 중 임의의 시간에, 임의의 시간동안 언제라도 일어날 수 있다.

        • 개발자는 이 과정제어할 수 없다.

        Static Memory Javascript with Object Pools

    • 재사용되는 객체모두 **동일한 타입**을 갖는다.

    3. JS 로 동적 ObjetPool 구현해보기

    • 일반적인 동적 Objet Pool 기능을 만드는 방법은 위 코드와 같이 크게 어렵지 않다.(물론 지원하는 기능의 범위에 따라, 구현 수준은 크게 달라질 수 있다)

    4. ObjectPool 적용 테스트

    • Click 버튼을 10번 누른 후 Profiles(in Chrome Tool) 패널을 통해, Heap Memory 를 체크하면 적용 유/무에 따른 결과를 얻을 수 있다.

      • Object Pool 적용 전

        • Ball 생성자 함수를 통해 객체를 300개 할당했다.

          • 30 * 10 = 300(무조건 새로운 객체를 Heap 메모리에 할당했다)

      • Object Pool 적용 후

        • $F 생성자 함수를 통해 93개의 객체를 할당했다.

          • $F: Object Pool 라이브러리상에서 만든 생성자 함수.

          • 적용 후에는 총 93개의 객체를 할당했으며, 207개의 객체를 재사용하였다.

    5. 정리하며

    • 즉 지나친 객체 생성반환최소화 하는것이, 어플리케이션상에 메모리 변동을 줄이는 방법이며, 이로인해 사용자 경험까지 최적화할 수 있다.

    • 일반적인 상에서는 적용할 일이 거의 없어보이지만, 게임 어플리케이션이라면, 적용 범위가 꽤 많을 듯 하다.

    6. 참고 URL

    Read more


  • javascript 
    • JS 의 다양한 함수 식

            
        // global execution context
        
        // 함수 선언식의 경우, 해당 execution context 진입 시, VO 의 새로운 속성으로 추가되며, function object 로 초기화된다.
        console.log(A); // function object
          
        // 함수 선언식(FD)
        function A(){
            // function execution context
            console.log(this); // global object
        };
          
        // 함수 표현식의 경우, 해당 execution context 진입 시, VO 의 새로운 속성으로 추가되지않으며, 
        // 초기화된 undefined 는 B 변수 선언식에 의해 초기화된것이다.
        console.log(B); // undefined
          
        // 함수 표현식(FE)
        var B = function () {
            // function execution context
            console.log(this); // global object
        };
          
        // 즉시 실행 함수(IIFE)(함수 표현식 중 하나)
        (function C(){
            // function execution context
            console.log(this); // null ==> global object
        })();
          
        // 함수 표현식의 경우, 해당 execution context 진입 시, VO 의 새로운 속성으로 추가되지않으며, 
        // 즉시 실행 함수의 경우, 함수 실행이 끝난 후 바로 소멸된다
        console.log(C); // Uncaught ReferenceError: C is not defined
      
    • 함수 선언식(Function Declaration(FD))

      • A 함수 선언

        ```javascript
        // A 함수 선언
        function A(){
          // function execution context
        };
        ```
        
        • FD 는 함수 정의를 나타내는 문장으로 해석되며, 수행결과가 존재하지 않는다.

          ```javascript
          function A(){}.length // Uncaught SyntaxError: Unexpected token .
          ```
          
        • FD 는 해당 Execution Context 진입 시, VO 의 새로운 속성으로 추가되며, function object 로 초기화 된다.(이 현상을 보통 HoistingCompiler Lift 라 부른다)

          ```javascript
          
          // global execution context
          
          // execution context 진입 시 function object 로 초기화된다.
          console.log(A); // A function object
          
          function A(){
          };
             
          ```
          
      • global execution context 내부 선언

          // global execution context
        
          function A(){
          };
        
      • ECStack 내부

          var ECStack = [
            globalExecutionContext: {
              VO: {
                A: <reference to function>
              }
            }
          ];
        
      • global or function execution context 내부 선언

        
          // global execution context
        
          // global execution context 의 VO 속성으로 추가된다.
          function A(){
        
            // function execution context
        
            // 내부 함수
            // function execution context 의 AO(VO) 속성으로 추가된다.
            function B(){
              // function execution context
            }
          };
        
          A();
        
      • ECStack 내부

          var ECStack = [
            <A> functionExecutionContext: {
              AO(VO): {
                // function execution context 의 AO(VO) 속성으로 추가된다.
                B: <reference to function>
              },
              // 함수 호출 시 생성되는 Scope Chain
              Scope(Scope Chain): [
                AO(VO): {
                  B: <reference to function>
                },
                globalExecutionContext.VO: {
                  A: < reference to function >
                }
              ]
            },
            globalExecutionContext: {
              VO: {
                // global execution context 의 VO 속성으로 추가된다.
                A: <reference to function>
              },
              Scope(Scope Chain): [
                globalExecutionContext.VO
              ]
            }
          ];
        
    • 함수 표현식(Function Expression(FE))

      • FE 는 기본적으로 표현식 위치에만 정의할 수 있다.

      • FE 는 해당 Execution Context 진입 시, VO 의 새로운 속성으로 추가되지않으며, 초기화된 undefined 는 A 변수 선언식에 의해 초기화된것이다.

        ```javascript
              
        // 함수 표현식이 아닌, A 변수 선언식에 의해 undefined 로 초기화된다.
        console.log(A); // undefined
            
        var A = function(){};
              
        // 실행 코드 처리 후 function object 가 할당된다.
        console.dir(A); // function object
        ```
        
      • FE 는 함수 데이터로 해석되며, 수행 결과가 존재한다.

        ```javascript
           // 괄호 연산자를 통한 함수 표현식
          (function A(){}).length;
                
          console.log((function A(){}).length); // 0
        ```	
        
      • FE선택적 이름을 가질 수 있다.

        • 익명 함수 표현 식(AFE(Anonymous Function Expression))

        • 기명 함수 표현 식(NFE(Named Function Expression))

                    
            // 익명 함수 표현식
            var A = function(){};
                  
            // 기명 함수 표현식
            var B = function _B(){};
                  
          
        • NFE의 함수 이름은 VO 속성으로 추가되지 않는다.

          ```javascript
              
          // 기명 함수 표현식
          var A = function _A(){}; 
              
          console.log(this.A); // function object
          console.log(this._A); // undefined
          ```
          
        • NFE의 함수 이름은 함수 내부에서만 접근 가능하다.

          ```javascript
              
          var A = function _A(){
            console.log(_A); // function object
          };
            
          A();
              
          console.log(this.A); // function object
          console.log(this._A); // undefined
          ```
          
      • 그룹화 연산자의 활용

        • FD 와 그룹화 연산자의 사용은 동일하다.

          ```javascript
              
            // JS 파서는 A 함수 선언식과 1 표현식을 감싸는 그룹화 연산자로 해석한다.
            // 즉 error 가 발생하지 않는다.
            function A(){
              
            }(1); // 1
              
            function A(){
              
            }    
              
            (1); // 1
          ```
          
        • 즉시 실행 함수 표현식(Immediately-Invoked Function Expression(IIFE))

          • 즉시 실행 함수는 FE 중 하나이다.<p>

          • 그룹화 연산자를 통해 파서가 FE해석하도록 만들 수 있다.<p>

          • 그룹화 연산자를 통해 생성된 함수는 함수 실행이 끝난 후 **바로 소멸**된다.<p>

            • FEVO 의 속성으로 추가되지 않는다.<p>

            • VO 에 추가되지 않는다는 말은, 메모리를 가용성이 좋다는 말과 같다.<p>

          • 함수를 실행 후 바로 소멸 시키는 경우, 사용하면 좋다.<p>

          • 하지만 이 말은 생성된 함수재사용이 불가능 하다는 말과 같다.(잘못 설계하면, 코드 가독성이 떨어질 위험이 있다;;;)<p>

            ```javascript
                        
            // 즉시 실행 함수를 호출하는 두 가지 방법
            (function A(x){
                
              console.log(x); // 1
                
            })(1);
                        
            (function A(x){
                
              console.log(x); // 1
                
            }(1));
                          
            ```
            
            • 그 밖에 방법(표현식이 가능할 뿐 거의 사용되지는 않는다(특별한 경우가 아니라면, 사용하지 않는것이 좋다))

              ```javascript
              1, function A(x){
                      
                console.log(x); // 1
                      
              }(1);
                      
              !function B(y){
                      
                console.log(y); // 2
              }(2);			
              ```
              
            • IIFE 응용

              • apply 메서드를 통한 this 값 초기화

                                
                  // global execution context
                
                  (function(){
                
                    // function execution context
                
                    console.log(this); // object Object
                
                  }).apply({});
                
              • JS Singleton 구현

                
                  // global execution context
                
                  var $ = (function(){
                
                      // 익명 함수 표현식 내부
                      // function execution context
                      var instance = null;
                
                      function $(){
                
                          // $ 함수 선언식 내부
                          // function execution context
                
                          // 만약 instance 변수에 할당된 this 값이 있다면, 그 값을 반환한다.
                          if (!instance) instance = this;
                
                          return instance;
                      }
                
                      return $;
                
                  }());
                
                  var obj1 = new $();
                  var obj2 = new $();
                
                  console.log(obj1 === obj2); // ture
                
              • JQuery Framework 구조생성

                
                    var $ = (function(){
                
                        function $(selector){
                            return new init(selector);
                        };
                
                        function init(selector){
                
                            selector = selector || '';
                
                            var elems = document.getElementById(selector) || document.getElementsByTagName(selector);
                
                            if (elems.length){
                
                                for (var n in elems) {
                
                                    var elem = elems[n];
                
                                    if (elem.nodeName) this[n] = elems[n];
                                };
                            }
                
                            return this;
                        };
                
                        init.prototype = {
                
                            get: function(idx){
                
                                idx = idx || 0;
                
                                return this[idx] || undefined;
                            }
                        };
                
                        $.get = function(){
                            console.log('ajax get');
                        };
                        $.post = function(){
                            console.log('ajax post');
                        };
                
                        return $;
                
                    })();
                
                    console.log($('title')); // object Object
                
                    console.log($('title')[0]); // title elem
                    console.log($('title').get(0)); // title elem
                
                    console.log($('meta')[0]); // meta elem
                    console.log($('meta').get(0)); // meta elem
                
                    console.log($('span')[0]); // undefined
                    console.log($('span').get(1)); // undefined
                
                    $.get(); // ajax get
                    $.post(); // ajax post
                
      • 그룹화 연산자를 사용하지 않는 IIFE

        • FE 는 반드시 FE 위치에 있어야 한다.

          • FEFE 위치에 있을 경우, 파서는 실행 코드 처리시, 이것이 실행 가능하다는 것을 알고 있다.

            ```javascript
            
              var A = function(x){
                console.log(x); // 1
              }(1);
            
              var B = {
            
                // 상황에 따른 초기화 값을 할당할때 유용하게 사용할 수 있다.
                x: function(y){
                  return y ? true : false;
                }(1)
              };
            
              console.log(B.x); // true
            ```
            

    Read more


  • javascript 
    • Variable 와 Execution Context 는 서로 밀접하게 관련되어있다.

    • JS 는 오직 Function Execution Context 내에서만 Isolated scope(격리된 유효범위) 을 가질 수 있다.

        var x = 1; // global variable of the global Execution Context
        function A(){
        
          // function Execution Context
          var y = 2; // local variable of the function Execution Context
        }
        
        console.log(x); // 1
      
        // 유효범위 밖의 접근은 허용하지 않는다.
        console.log(y); // Uncaught ReferenceError: y is not defined
      

    • 즉 JS 는 클래스 기반 언어인 C or C++ 처럼, 블럭 내부에 Isolated scope(격리된 유효범위) 를 가질 수 없다.

        // global execution context
          
        if (1){
            // not isolated scope
            var x = 1;
        }
          
        console.log(x); // 1
          
          
        for (var y = 0; y < 1; y++) {
            // not isolated scope
        }
          
        console.log(y); // 1
      
    • Data declaration(데이터 선언)

      • Variable Object(VO) 는 선언된 데이터(Variable, Function)들이 저장되는 Special Object 이다.

      • 즉 우리가 변수함수를 선언하는 것은, VO 에 새로운 속성을 추가하는것과 동일하다.

        ```javascript
        // global Execution Context
        var x = 1;
        
        function A(){
        
          // function Execution Context
        
        }
        ```
        
      • ECStack 내부

        • VO 는 해당 Execution Context 의 속성으로 표현될 수 있다.<p>

            var ECStack = [
              globalExecutionContext: {
                VO: {
                  // Execution Context 진입 시 x 변수는 undefined 로 초기화되며, 
                  // A 함수는 Function Object 로 초기화된다.
                  x: undefined, 
                  A: <reference to function>
                }
              }
            ];
          
      • 선언된 데이터의 종류

        • 변수 선언(VariableDeclaration(VD))<p>

        • 함수 선언(FunctionDeclaration(FD))<p>

        • 함수 매개변수들(Function Formal Parameters)<p>

          ```javascript
            // global Execution Context
            // 변수 선언
            var x = 1;
              
            // 함수 선언
            function A(y){
              
              // function Execution Context
                      
              // 함수 매개변수
              console.log(arguments[0]); // undefined
              
            }
              
            A();
          ```
          
        • ECStack 내부

          ```javascript
            var ECStack = [
              functionExecutionContext: {
                // function execution context 내부 VO 는 AO(활성화 객체)가 그 역활을 대신한다.
                AO(VO): {
                  // 전달 받은 함수 매개변수들
                  arguments: {
                    0: undefined
                  }
                  y: undefined
                }
              },
              globalExecutionContext: {
                VO: {
                  // 변수 선언식에 의한 초기화
                  x: undefined, 
                  // 함수 선언식에 의한 초기화
                  A: < reference to function > 
                }
              }
            ];
          ```
          
    • VO in Global Execution Context

      • Global Execution Context 의 VO전역 객체를 가리킨다.<p>

      • VO 는 Global Execution Context 진입 전에 생성되며, 프로그램 종료 시 소멸된다.

      • VOthis 키워드를 통해 접근가능하다.

        ```javascript
        // global Execution Context
        var x = 1;
              
        console.log(this); // global object
              
        console.log(x); // 1
        console.log(this.x); // 1
        ```
              
        ![](https://www.dropbox.com/s/giabb54eg1tppkt/87.jpg?dl=1)
        
      • 전역 객체프로그램 레벨의 어떤한 곳에서도 접근 가능하다.

                
          // global Execution Context
          var x = 1;
                
          console.log(this); // global object
          console.log(this.x); // 1
                
          // eval Execution Context
          eval('console.log(this)'); // global object
                
          function A(){
                
              // function Execution Context
              console.log(this); // global object
              console.log(this.x); // 1
          }
                
          A(); // called function object
          
        
      • 전역 객체는 초기화 시 Math, String, Date, parseInt 등의 기본 속성들을 가지며, 자기 자신을 **참조**하는 속성인 window 속성을 갖는다.

        ```javascript
              
        console.log(this.Math); // Math object
              
        console.dir(this.String); // String function object
              
        console.dir(this.parseInt); // parseInt function object
              
        console.log(this); // global object
              
        console.log(this.window); // global object
              
        console.log(this === this.window); // true
        ```		
        
      • 전역 객체 접근 시 접두사 생략이 가능하다.

              // global Execution Context
              var x = 1;
        
              // 접두사가 생략되었다.
              console.log(x); // 1
        
              console.log(this.x); // 1
        
              console.log(window.x); // 1
        
              console.log(this.window.x); // 1
        
    • AO(VO) in Function Execution Context

      • Function Execution Context 내부 VO**직접적인 접근**이 불가능하며, 활성화 객체(AO)가 이 역활을 대신한다.

        • Activation Object(AO)

              function Execution Context VO === AO
          

      • AO함수 호출 후 Function Execution Context 로 진입 시 생성되며, 함수 종료시 소멸된다.

        ```javascript
            
          // global Execution Context
            
          function A(y){
            
            // function Execution Context
            console.log(arguments[0]); // undefined
            console.log(y) // undefined
            
          }
            
          // A 함수를 호출한다.
          A();
        ```
        
      • ECStack 내부

        ```javascript
          var ECStack = [
            // 함수 호출 시 function execution context 가 생성된다. 
            functionExecutionContext: {
              AO(VO): {
                // 함수 매개변수들
                arguments: {
                  0: undefined
                }
                y: undefined
              }
            },
            globalExecutionContext: {
              VO: {
                A: <reference to function> // 함수 선언식을 통해 함수 객체로 초기화된다.
              }
            }
          ];
        ```
        
      • arguments 객체 프로퍼티

        ```javascript
        function A(x, y, z) {
            
          // arguments object
          console.dir(arguments);
            
          // 선언된 매개변수의 수
          console.log(A.length); // 3
            
          // 실제 전달된 매개변수의 수
          console.log(arguments.length); // 2
            
          // 함수 자신에 대한 참조
          console.log(arguments.callee === A); // true
            
          // 전달된 매개변수와 arguments object 속성은 서로 공유된다.
          console.log(x === arguments[0]); // true
          console.log(x); // 10
            
          // arguments object 속성을 변경한다.
          arguments[0] = 20;
          console.log(x); // 20
            
          x = 30;
          console.log(arguments[0]); // 30
            
          // 하지만 함수 호출 시 전달되지 않았던, 매개변수 z 속성은 공유되지 않는다.
          z = 40;
          console.log(arguments[2]); // undefined
            
          arguments[2] = 50;
          console.log(z); // 40
        }
            
        A(10, 20); // call function object
        ```
        
    • Execution Context 진입실행 코드 처리 과정

      • Execution Context 안의 코드 실행은 두 가지 기본적인 **단계**로 나뉜다.

        • Execution Context 진입 과정<p>

        • Execution Context 진입 후 실행 코드 처리 과정

      • Execution Context 진입 과정

        • Execution Context 진입 시(실행 코드가 처리 전) VO 의 새로운 속성들이 추가된다.

          • 변수 선언(VariableDeclaration(VD))

            • undefined초기화되는 VO 의 새로운 속성이 추가된다.

              
                // global Execution Context
              
                // Execution Context 진입 시점
                // undefined 로 초기화된다
                console.log(x); // undefined
              
                // 변수 선언
                var x = 1;
              
                // 실행 코드 처리 후
                // 값이 할당된다.
                console.log(this.x); // 1
              
            • Execution Context 진입 시 ECStack 내부

                  var ECStack = [
                    globalExecutionContext: {
                      VO: {
                        x: undefined
                      }
                    }
                  ];
              
            • 동일한 이름의 변수 선언이 이미 존재할 경우 그 아래의 함수 선언무시된다.

               ```javascript
                        
               // global Execution Context
                      
               // 이 경우 x 는 undefined 가 아닌, function object 로 초기화된다.
               console.log(x); // x function object
                                
               // 변수 선언
               var x = 1;
                      
               // 동일한 이름으로 함수 선언을 한다.
               function x(){
               };
                      
               // 동일한 이름의 함수 선언은 무시된다.
               console.log(x); // 1
               ```
               ![](http://mohwa.github.io/blog/assets/images/posts/20151014/context_2.png)
              
          • 함수 선언(FunctionDeclaration(FD))

            • 함수 객체초기화되는 VO 의 새로운 속성이 추가된다.

              ```javascript
              // global Execution Context
                              
              // Execution Context 진입 시 function object 로 초기화된다.
              console.log(A); // function object
                              
              // 함수 선언식
              function A(){
                    
                // function Execution Context
              }
              ```
              
            • Execution Context 진입 시 ECStack 내부

              ```javascript
              var ECStack = [
                globalExecutionContext: {
                  VO: {
                    A: <reference to function> // 함수 선언식을 통한 함수는 function object 로 초기화된다.
                  }
                }
              ];
              ```
              
        • 함수 매개변수들(Function Formal parameters)

          • 전달된 매개변수 값을 갖는 VO 의 새로운 속성이 추가된다. 단 값이 전달되지 않았을경우, undefined초기화된다.

            ```javascript
              // global Execution Context
                
              // 함수 선언식
              function A(x, y){
                
                // function Execution Context
                
                console.log(arguments[0]); // 1
                // 값이 전달되지 않은 매개변수는 undefined 로 초기화된다.
                console.log(arguments[1]); // undefined
              }
                          
              // A 함수를 호출한다.
              A(1); 
            ```
            
            ```javascript
              var ECStack = [
                functionExecutionContext: {
                  AO(VO): {
                    // function parameters
                    arguments: {
                      0: 1,
                      1: undefined
                    }
                    x: 1,
                    y: undefined
                  }
                },
                globalExecutionContext: {
                  VO: {
                    A: < reference to function >
                  }
                }
              ];
            ```
            
      • Execution Context 진입 후 실행 코드 처리 과정

        • Execution Context 진입 시점에서 초기화된 VO 속성은 실행 코드 처리 후 할당된 값을 가지게 된다.

          ```javascript
          // global Execution Context
                    
          // Execution Context 진입 시점: undefined 로 초기화된다.
          // 실행 코드 처리 후: 1 이 할당된다.
              
          // 변수 선언
          var x = 1;
          ```
          
        • 실행 코드 처리 후 ECStack 내부

            var ECStack = [
              globalExecutionContext: {
                VO: {
                  x: 1
                }
              }
            ];
          
    • VO in Eval Execution Context

      • eval 함수에서는 Calling Context 라는 개념이 존재하며, 이것은 eval 함수가 **호출**된 Execution Context 를 가리킨다.<p>

        
          // global Execution Context
        
          // eval 함수가 global execution context 내부에서 호출되었다.
          // 즉 calling context 는 global execution context 를 가리킨다.
          eval('var x = 1;');
        
          console.log(x); // 1
        
          function A(){
        
             // function execution context
        
             // eval 함수가 function execution context 내부에서 호출되었다.
             // 즉 calling context 는 function execution context 를 가리킨다.
             eval('var y = 2;');
        
             console.log(y); // 2
          }
        
          A();
        
      • eval 함수를 통해, 선언된 변수, 함수는 Calling Context 내부 VO 에 영향을 준다.(즉 Calling Context 내부 VO 의 속성으로 할당된다)<p>

      • eval 함수로 전달된 실행 코드는 생성된 Eval Execution Context 내부에서 처리된다.<p>

      • 해당 VO 는 Eval Execution Context 진입 시 생성되며, eval 함수 종료 시 소멸된다.

        • Global Execution Context 에서의 eval 함수

          ```javascript

          // global Execution Context

          // calling context 는 global execution context 를 가리킨다.

          // eval 함수를 통해 생성된 x 속성은 해당 calling context 내부 VO 에 영향을 준다. eval(‘var x = 1’);

          console.log(x); // 1 ```

        • ECStack 내부

          
            var ECStack = [
              evalExecutionContext: {
                VO: {
                  x: 1
                }
              },
              callingContext: globalExecutionContext,
              globalExecutionContext: {
                VO: {
                  // eval 함수로 전달된 실행 코드로 인해, calling context 내부 VO 가 영향받는다.
                  x: 1
                }
              }
            ];
          
        • Function Execution Context 에서의 eval 함수

          
            // global execution context
          
            function A() {
          
                // function execution context
          
                // calling context === function execution context
          
                // x 지역 변수르 선언한다.
                var x = 1;
          
                // eval 함수를 통해, 변수를 선언한다.
                eval('var y = 2;');
          
                console.log(x); // 1
          
                // y 속성은 calling context 내부 VO 에 영향을 준다.
                console.log(y); // 2
            }
          
            A();
          
        • ECStack 내부

          
            var ECStack = [
              evalExecutionContext: {
                VO: {
                  y: 2
                }
              },
              // 호출 문맥
              callingContext: <A> functionExecutionContext,
              <A> functionExecutionContext: {
                AO(VO): {
                  x: 1,
                  // eval 함수로 전달된 실행 코드로 인해, calling context 내부 VO 가 영향받는다.
                  y: 2
                }
              },
              globalExecutionContext: {
                VO: {
                  A: < reference to function >
                }
              }
            ];
          
      • ES5 strict-mode 에서의 eval 함수는 Calling Context 내부 VO 에 영향을 주지 않으며, 코드를 지역 샌드박스(local sandbox)에서 평가하게된다.

        
          'use strict';
        
          // global Execution Context
        
          // calling context 는 global Execution Context 를 가리킨다.
        
          // x 변수를 선언한다.
          var x = 1;
        
          // eval 함수를 통해, 선언된 변수는 해당 calling context 에 영향을 주지않으며, local sandbox 안에서 평가하게된다.
          eval('var y = 2;');
        
          console.log(x); // 1
        
          // calling context 내부 VO 에 영향을 주지 않는다.
          // local sandbox 외부에서 y 속성을 접근할 수 없다.
          console.log(y); // Uncaught ReferenceError: y is not defined
        
      • ECStack 내부

          var ECStack = [
            // local sand box
            evalExecutionContext: {
              VO: {
                y: 2
              }
            },
            // 호출 문맥
            callingContext: globalExecutionContext,
            globalExecutionContext: {
              VO: {
                // y 속성이 추가되지 않았다(즉 해당 calling context 내부 VO 에 영향을 주지 않는다)
                x: 1
              }
            }
          ];
        

    참고 URL

    Read more