Lexical environment in ecma 262 5

By 김훈민
NHN Technology Services Corp.
Front-End Development Team
http://huns.me
Lexical
Environment
in ECMA-262 Edition 5.1

ECMA-262 Edition 5, 2009
ECMA-262 Edition 3 탄생 이후 10년

JSON
Function
Object
Arrays
use strict
Date
New Features
in ECMA-262 Edition 5

I will note that there are some real
improvements in ES5, in particular to
Chapter 10 which now uses declarative
binding environments. ES1-3's abuse of
objects for scopes (again I'm to blame
for doing so in JS in 1995, economizing on objects
needed to implement the language in a big hurry) was
a bug, not a feature.
https://mail.mozilla.org/pipermail/es-discuss/2010-April/010915.html

Before ECMA 262-5…?
Variable Object

Chapter 10.
Execution Context
ECMAScript 코드를 실행하는 환경

Execution Context
<script>
var sayHello = "Hello";
function person(){
var first = 'David';
function getFirstName(){
eval("first = 'Steven'");
return first;
}
alert(sayHello + getFirstName());
}
person();
</script>
Execution Context

Execution Context Stack
Execution Context
Execution Context
Execution Context
Execution Context

Executable Code
<script>
var sayHello = "Hello";
function person(){
var first = 'David';
function getFirstName(){
eval("first = 'Steven'");
return first;
}
alert(sayHello + getFirstName());
}
person();
</script>
Function
Code
Global
Code
Eval
Code
Evaluating
Initializing
execution context
Initializing
execution context
Initializing
execution context

Pseudo code
ExecutionContext = {
LexicalEnvironment : [Lexical Environment],
VariableEnvironment : [Lexical Environment],
ThisBinding : [object]
}
* […]은 Value Type

Lexical Environment
자원을 어디에서 찾을 것인가

Components of Lexical Environment
lexical environment = {
environment record : -,
outer environment reference : -
}
지역 식별자 덩어리
유효범위 내의 식별자를 바인딩
중첩 유효범위를 가질 수 있는 환경에
서 상위 lexical environment를 참조

2 type of environment record
Declarative
vs
Object

DeclarativeEnvironmentRecord : {
x : 10,
y : 20,
result : 30
}

ObjectEnvironmentRecord : {
bindObject : globalObject
}

Establishing
an Execution Context
실행 콘텍스트 초기화
thisBinding, Hoisting

Global Code
{
LexicalEnvironment : globalEnv,
VariableEnvironment : globalEnv,
ThisBinding : window
}
Global Execution Context
bindingObject : window
},
OuterEnvironmentReferece : null,
globalEnv

thisBinding
sunFunctionEC.thisBinding = null;
function sum(x, y){
var result = x + y;
}
}
return printResult;
}
sum(10, 20);
{
ThisBinding : null,
}
sumFunctionEC

thisBinding
sunFunctionEC.thisBinding = null;
function sum(x, y){
var result = x + y;
}
}
return printResult;
}
sum(10, 20);
{
ThisBinding : null,
}
sumFunctionEC
ThisBinding이 null, undefined인 경우
this = global
“use strict” 모드에서는
this = null

thisBinding on Function
sunFunctionEC.ThisBinding = foo;foo.sum(10, 20);
{
ThisBinding : foo,
}
sumFunctionEC

{
ThisBinding : null,
LexicalEnv : -
}
sumFunctionEC
EnvironmentRecord : {}
localEnv
localEnv
Creating local lexical environment

Declaration Binding
Instantiation
실행 콘텍스트 바인딩 초기화

x : 10,
y : 20,
}
function sum(x, y){
console.log(barr);
var result = x + y;
}
}
return printResult;
}
sum(10, 20);
printResult : Function Reference
Hoisting
{
ThisBinding : null,
}
sumFunctionEC
localEnv

function sum(x, y){
console.log(barr);
var result = x + y;
}
}
return printResult;
}
sum(10, 20);
x : 10,
y : 20,
printResult : Function Reference,
}
arguments : Arguments Object
{
ThisBinding : null,
}
sumFunctionEC
localEnv

x : 10,
y : 20,
printResult : Function Reference
}
function sum(x, y){
console.log(barr);
var result = x + y;
}
}
return printResult;
}
sum(10, 20);
result : undefined,
barr : undefined
Hoisting
{
ThisBinding : null,
}
sumFunctionEC
localEnv

x : 10,
y : 20,
printResult : Function Reference,
result : undefined,
barr : undefined
}
function sum(x, y){
console.log(barr);
var result = x + y;
}
}
return printResult;
}
sum(10, 20);
{
ThisBinding : null,
}
sumFunctionEC
localEnv

Identifier Resolution
식별자와 묶여있는 값을 찾아가는 과정
스코프 체인의 원리

outer environment reference
The outer environment reference is used
to model the logical nesting of Lexical Environment values

var a = 10;
(function foo() {
var b = 20;
(function bar() {
var c = 30;
console.log( a + b + c );
})();
})();
Identifier Resolution #1
Global
Execution Context
foo’s
Execution Context
bar’s
Execution Context

var a = 10;
(function foo() {
var b = 20;
(function bar() {
var c = 30;
})();
})();
c : 30
}
fooEC.LexicalEnvironment
},
barEC
b : 20
}
globalEC.LexicalEnvironment
},
fooEC
a : 10
}
OuterEnvironmentReference : null
},
globalEC

Closure
자유변수를 간직한 코드 블럭

A lexical environment that defines the environment
in which a Function object is executed.
Function Object’s
Internal property
[[Scope]]

function sum(x, y){
var result = x + y;
console.log("foo:”+ result);
}
return printResult;
}
var print = sum(10, 20);
print();
LexicalEnvironment = {
x : 10,
y : 20,
result : undefined,
printResult : function
},
globalEC.lexicalEnvironment
},
ThisBinding : null
sum’s EC
[[Scope]]:
printResult function
sumEC’s lexical environment
Creating Function Object

function sum(x, y){
var result = x + y;
}
return printResult;
}
print();
[[Scope]]:
ThisBinding : null
sum’s EC
x : 10,
y : 20,
result : undefined,
},
},
Closure

function sum(x, y){
var result = x + y;
}
return printResult;
}
print();
[[Scope]]:
x : 10,
y : 20,
result : undefined,
},
},
Closure

[[Scope]]: sumEC’s lexical environment
Creating printResult’s EC
…
},
},
ThisBinding : null
printResult’s ECfunction sum(x, y){
var result = x + y;
}
return printResult;
}
print();

VariableEnvironment
LexicalEnvironment의 쌍둥이

Execution Context Pseudo code
ExecutionContext = {
LexicalEnvironment : [lexical environment],
VariableEnvironment : [lexical environment],
ThisBinding : [object]
}
* […]은 type

LexicalEnvironment and VariableEnvironment
components of an execution context
are always Lexical Environments
- 10.3 Execution Contexts in ECMA 262-5 -

VariableEnvironment = LexicalEnvironment
{
ThisBinding : null,
LexicalEnv : globalEnv,
VariableEnv : null
}
Global EC
},
OuterEnviromentReferece : null
globalEnv
var foo = "abc";
with({ foo : "bar" }) {
function f() {
console.log(foo);
}
f();
}
GlobalEC.VariableEnv = GlobalEC.LexicalEnv;
globalEnv

The value of the VariableEnvironment component
never changes while the value of the
LexicalEnvironment component
may change
during execution of code within an execution context.
- 10.3 Execution Contexts in ECMA 262-5 -

With Statement #1
{
ThisBinding : null,
LexicalEnv : globalEnv,
VariableEnv : globalEnv
}
Global EC
},
globalEnv
var foo = "abc";
function f() {
console.log(foo);
}
f();
}
bindingObject : -
},
OuterEnviromentReferece :
newEnv
{foo:bar}
newEnv,
GlobalEC.LexicalEnv

With Statement #2
{
ThisBinding : null,
LexicalEnv : newEnv,
}
Global EC
},
globalEnv
var foo = "abc";
function f() {
console.log(foo);
}
f();
}
bindingObject : { foo : bar }
},
OuterEnviromentReferece :
GlobalEC.LexicalEnv
newEnv

With Statement #3
{
ThisBinding : null,
LexicalEnv : newEnv,
}
Global EC
},
globalEnv
bindingObject : { foo : bar }
},
newEnv
globalEnv
with문이 끝나면
GlobalEC.LexicalEnv = GlobalEC.VariableEnv;

Reference
1. ECMAScript Language Specification 5.1 Edition
2. ECMAScript 5 spec: LexicalEnvironment versus VariableEnvironment
3. ECMA-262-5 in detail. Chapter 3.2 Lexical environments

Thanks.
email : kim.hunmin@nhn.com
facebook : facebook.com/jeokrang
blog : http://huns.me

Lexical environment in ecma 262 5

More Related Content

What's hot

More from Kim Hunmin

Lexical environment in ecma 262 5