lexical environment in ecma 262 5
TRANSCRIPT
![Page 1: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/1.jpg)
By 김훈민NHN Technology Services Corp.
Front-End Development Team
http://huns.me
Lexical Environment in ECMA-262 Edition 5.1
![Page 2: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/2.jpg)
ECMA-262 Edition 5, 2009ECMA-262 Edition 3 탄생 이후 10 년
![Page 3: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/3.jpg)
JSON
Function
ObjectArrays
use strict
Date
New Features in ECMA-262 Edition 5
![Page 4: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/4.jpg)
1 more thing.
![Page 5: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/5.jpg)
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
![Page 6: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/6.jpg)
Before ECMA 262-5…?
Variable Object
![Page 7: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/7.jpg)
Chapter 10.
Execution Context ECMAScript 코드를 실행하는 환경
![Page 8: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/8.jpg)
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
![Page 9: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/9.jpg)
Execution Context Stack
Execution Context
Execution Context
Execution Context
Execution Context
![Page 10: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/10.jpg)
Executable Code
<script> var sayHello = "Hello";
function person(){ var first = 'David';
function getFirstName(){ eval("first = 'Steven'"); return first; }
alert(sayHello + getFirstName()); } person(); </script>
FunctionCode
Global Code
EvalCode
Evaluating
Initializing execution context
Initializing execution context
Initializing execution context
![Page 11: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/11.jpg)
Pseudo code
ExecutionContext = {
LexicalEnvironment : [Lexical Environment], VariableEnvironment : [Lexical Environment], ThisBinding : [object]
}
* […] 은 Value Type
![Page 12: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/12.jpg)
Lexical Environment자원을 어디에서 찾을 것인가
![Page 13: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/13.jpg)
Components of Lexical Environment
lexical environment = {
environment record : -, outer environment reference : - }
지역 식별자 덩어리유효범위 내의 식별자를 바인딩
중첩 유효범위를 가질 수 있는 환경에서 상위 lexical environment 를 참조
![Page 14: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/14.jpg)
2 type of environment record
Declarative vs
Object
![Page 15: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/15.jpg)
DeclarativeEnvironmentRecord : {
x : 10, y : 20, result : 30
}
![Page 16: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/16.jpg)
ObjectEnvironmentRecord : {
bindObject : globalObject
}
![Page 17: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/17.jpg)
Establishing an Execution Context
실행 콘텍스트 초기화thisBinding, Hoisting
![Page 18: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/18.jpg)
Global Code
{ LexicalEnvironment : globalEnv, VariableEnvironment : globalEnv, ThisBinding : window}
Global Execution Context
ObjectEnvironmentRecord : { bindingObject : window},OuterEnvironmentReferece : null,
globalEnv
![Page 19: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/19.jpg)
function sum(x, y){ var result = x + y; var barr = function(){ console.log("barr"); }
function printResult(){ console.log(result); } return printResult; }
sum(10, 20);
Global Execution Context
sum’sExecution Context
Function Code
![Page 20: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/20.jpg)
thisBinding
sunFunctionEC.thisBinding = null;
function sum(x, y){ var result = x + y; var barr = function(){ console.log("barr"); }
function printResult(){ console.log(result); } return printResult; }
sum(10, 20);
{
ThisBinding : null,
}
sumFunctionEC
![Page 21: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/21.jpg)
thisBinding
sunFunctionEC.thisBinding = null;
function sum(x, y){ var result = x + y; var barr = function(){ console.log("barr"); }
function printResult(){ console.log(result); } return printResult; }
sum(10, 20);
{
ThisBinding : null,
}
sumFunctionEC
ThisBinding 이 null, undefined 인 경우this = global
“use strict” 모드에서는 this = null
![Page 22: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/22.jpg)
thisBinding on Function
sunFunctionEC.ThisBinding = foo;foo.sum(10, 20);
{
ThisBinding : foo,
}
sumFunctionEC
![Page 23: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/23.jpg)
{ ThisBinding : null, LexicalEnv : -}
sumFunctionEC
EnvironmentRecord : {}
localEnv
localEnv
Creating local lexical environment
![Page 24: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/24.jpg)
Declaration Binding Instantiation실행 콘텍스트 바인딩 초기화
![Page 25: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/25.jpg)
function sum(x, y){
console.log(barr);
var result = x + y; var barr = function(){ console.log("barr"); }
function printResult(){ console.log(result); } return printResult; }
sum(10, 20);
{ ThisBinding : null, LexicalEnv : localEnv}
sumFunctionEC
EnvironmentRecord : {
}
x : 10,y : 20,
localEnv
Declaration Binding Instantiation
![Page 26: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/26.jpg)
EnvironmentRecord : { x : 10, y : 20,
}
function sum(x, y){
console.log(barr);
var result = x + y; var barr = function(){ console.log("barr"); }
function printResult(){ console.log(result); } return printResult; }
sum(10, 20);
printResult : Function Reference
Hoisting
{ ThisBinding : null, LexicalEnv : localEnv}
sumFunctionEC
localEnv
Declaration Binding Instantiation
![Page 27: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/27.jpg)
function sum(x, y){
console.log(barr);
var result = x + y; var barr = function(){ console.log("barr"); }
function printResult(){ console.log(result); } return printResult; }
sum(10, 20);
EnvironmentRecord : { x : 10, y : 20, printResult : Function Reference,
}
arguments : Arguments Object
{ ThisBinding : null, LexicalEnv : localEnv}
sumFunctionEC
localEnv
Declaration Binding Instantiation
![Page 28: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/28.jpg)
EnvironmentRecord : { x : 10, y : 20, printResult : Function Reference
}
function sum(x, y){
console.log(barr);
var result = x + y; var barr = function(){ console.log("barr"); }
function printResult(){ console.log(result); } return printResult; }
sum(10, 20);
result : undefined,barr : undefined
Hoisting
{ ThisBinding : null, LexicalEnv : localEnv}
sumFunctionEC
localEnv
Declaration Binding Instantiation
![Page 29: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/29.jpg)
EnvironmentRecord : { x : 10, y : 20, printResult : Function Reference, result : undefined, barr : undefined
}
function sum(x, y){
console.log(barr);
var result = x + y; var barr = function(){ console.log("barr"); }
function printResult(){ console.log(result); } return printResult; }
sum(10, 20);
{ ThisBinding : null, LexicalEnv : localEnv}
sumFunctionEC
localEnv
Declaration Binding Instantiation
![Page 30: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/30.jpg)
function sum(x, y){
console.log(barr);
var result = x + y; var barr = function(){ console.log("barr"); }
function foo(){ console.log("foo"); } return result; }
sum(10, 20); result : 30,barr : Function Reference
{ ThisBinding : null, LexicalEnv : localEnv}
sumFunctionEC
EnvironmentRecord : { x : 10, y : 20, foo : Function Reference result : undefined, barr : undefined
}
localEnv
Declaration Binding Instantiation
result : 30,barr : Function Reference
![Page 31: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/31.jpg)
Identifier Resolution식별자와 묶여있는 값을 찾아가는 과정
스코프 체인의 원리
![Page 32: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/32.jpg)
outer environment reference
The outer environment reference is used
to model the logical nesting of Lexical Environment values
![Page 33: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/33.jpg)
var a = 10; (function foo() { var b = 20;
(function bar() { var c = 30; console.log( a + b + c );
})();
})();
Identifier Resolution #1
GlobalExecution Context
foo’sExecution Context
bar’sExecution Context
![Page 34: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/34.jpg)
var a = 10; (function foo() { var b = 20;
(function bar() { var c = 30; console.log( a + b + c );
})();
})();
LexicalEnvironment : { EnvironmentRecord : { c : 30 } OuterEnvironmentReference : fooEC.LexicalEnvironment},
bar’s EC
LexicalEnvironment : { EnvironmentRecord : { b : 20 } OuterEnvironmentReference : globalEC.LexicalEnvironment},
foo’s EC
LexicalEnvironment : { EnvironmentRecord : { a : 10 } OuterEnvironmentReference : null},
Global EC
Identifier Resolution #1
![Page 35: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/35.jpg)
var a = 10; (function foo() { var b = 20;
(function bar() { var c = 30; console.log( a + b + c );
})();
})();
LexicalEnvironment : { EnvironmentRecord : { c : 30 } OuterEnvironmentReference : fooEC.LexicalEnvironment},
barEC
LexicalEnvironment : { EnvironmentRecord : { b : 20 } OuterEnvironmentReference : globalEC.LexicalEnvironment},
fooEC
LexicalEnvironment : { EnvironmentRecord : { a : 10 } OuterEnvironmentReference : null},
globalEC
Identifier Resolution #2
![Page 36: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/36.jpg)
Closure자유변수를 간직한 코드 블럭
![Page 37: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/37.jpg)
A lexical environment that defines the environment in which a Function object is executed.
Function Object’sInternal property
[[Scope]]
![Page 38: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/38.jpg)
function sum(x, y){ var result = x + y;
function printResult(){ console.log("foo:”+ result); } return printResult; }
var print = sum(10, 20);print();
LexicalEnvironment = { EnvironmentRecord : { x : 10, y : 20, result : undefined, printResult : function }, OuterEnvironmentReference : globalEC.lexicalEnvironment},
ThisBinding : null
sum’s EC
[[Scope]]:
printResult function
sumEC’s lexical environment
Creating Function Object
![Page 39: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/39.jpg)
function sum(x, y){ var result = x + y;
function printResult(){ console.log("foo:”+ result); } return printResult; }
var print = sum(10, 20);print();
[[Scope]]:
printResult function
sumEC’s lexical environment
ThisBinding : null
sum’s EC
LexicalEnvironment = { EnvironmentRecord : { x : 10, y : 20, result : undefined, printResult : function }, OuterEnvironmentReference : globalEC.lexicalEnvironment},
Closure
![Page 40: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/40.jpg)
function sum(x, y){ var result = x + y;
function printResult(){ console.log("foo:”+ result); } return printResult; }
var print = sum(10, 20);print();
[[Scope]]:
printResult function
sumEC’s lexical environment
LexicalEnvironment = { EnvironmentRecord : { x : 10, y : 20, result : undefined, printResult : function }, OuterEnvironmentReference : globalEC.lexicalEnvironment},
Closure
![Page 41: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/41.jpg)
[[Scope]]: sumEC’s lexical environment
printResult function
Creating printResult’s EC
LexicalEnvironment = { EnvironmentRecord : { … }, OuterEnvironmentReference : sumEC’s lexical environment},ThisBinding : null
printResult’s ECfunction sum(x, y){ var result = x + y;
function printResult(){ console.log("foo:”+ result); } return printResult; }
var print = sum(10, 20);print();
![Page 42: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/42.jpg)
VariableEnvironmentLexicalEnvironment 의 쌍둥이
![Page 43: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/43.jpg)
Execution Context Pseudo code
ExecutionContext = {
LexicalEnvironment : [lexical environment],
VariableEnvironment : [lexical environment], ThisBinding : [object]
}
* […] 은 type
![Page 44: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/44.jpg)
LexicalEnvironment and VariableEnvironment
components of an execution context
are always Lexical Environments
- 10.3 Execution Contexts in ECMA 262-5 -
![Page 45: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/45.jpg)
VariableEnvironment = LexicalEnvironment
{ ThisBinding : null, LexicalEnv : globalEnv,
VariableEnv : null}
Global EC
EnvironmentRecord : { bindingObject : window},OuterEnviromentReferece : null
globalEnv
var foo = "abc";
with({ foo : "bar" }) {
function f() { console.log(foo); }
f(); }
GlobalEC.VariableEnv = GlobalEC.LexicalEnv;
globalEnv
![Page 46: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/46.jpg)
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 -
![Page 47: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/47.jpg)
With Statement #1
{ ThisBinding : null, LexicalEnv : globalEnv, VariableEnv : globalEnv}
Global EC
EnvironmentRecord : { bindingObject : window},OuterEnviromentReferece : null
globalEnv
var foo = "abc";
with({ foo : "bar" }) {
function f() { console.log(foo); }
f(); }
ObjectEnvironmentRecord : { bindingObject : -},OuterEnviromentReferece :
newEnv{foo:bar}
newEnv,
GlobalEC.LexicalEnv
![Page 48: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/48.jpg)
With Statement #2
{ ThisBinding : null, LexicalEnv : newEnv, VariableEnv : globalEnv}
Global EC
EnvironmentRecord : { bindingObject : window},OuterEnviromentReferece : null
globalEnv
var foo = "abc";
with({ foo : "bar" }) {
function f() { console.log(foo); }
f(); }
ObjectEnvironmentRecord : { bindingObject : { foo : bar }},OuterEnviromentReferece : GlobalEC.LexicalEnv
newEnv
![Page 49: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/49.jpg)
With Statement #3
{ ThisBinding : null, LexicalEnv : newEnv, VariableEnv : globalEnv}
Global EC
EnvironmentRecord : { bindingObject : window},OuterEnviromentReferece : null
globalEnv
ObjectEnvironmentRecord : { bindingObject : { foo : bar }},OuterEnviromentReferece : null
newEnv
globalEnvwith 문이 끝나면
GlobalEC.LexicalEnv = GlobalEC.VariableEnv;
![Page 50: Lexical environment in ecma 262 5](https://reader036.vdocuments.pub/reader036/viewer/2022062513/554f6276b4c905c8088b4b2c/html5/thumbnails/50.jpg)
Reference
1. ECMAScript Language Specification 5.1 Edition2. ECMAScript 5 spec: LexicalEnvironment versus VariableEnvironment3. ECMA-262-5 in detail. Chapter 3.2 Lexical environments