javascript 실행 환경과scope_javascript 스킬에 대한 자세한 설명

최근에 "JavaScript 고급 프로그래밍 3"을 다시 읽었는데, 제가 배운 지식 중 일부를 블로그에 작성해야겠다는 생각이 들었습니다. 그렇지 않으면 모든 것을 잊어버리게 될 것입니다. 오늘 요약하고 싶은 것은 js 실행 환경과 범위입니다.

먼저 실행 환경에 대해 이야기해보겠습니다

1. 실행 환경
​​​​​책의 개념인 실행 환경은 함수가 액세스할 수 있는 변수나 기타 데이터를 정의하고 각각의 동작을 결정합니다. 각 실행 환경에는 이와 관련된 변수 개체가 있습니다. 환경에 정의된 모든 변수와 함수는 이 개체에 저장됩니다. 코드를 작성하는 동안에는 이 객체에 액세스할 수 없지만 파서는 데이터를 처리할 때 뒤에서 이를 사용합니다.

　실행 환경은 변수나 함수가 다른 데이터에 접근할 수 있는 권한이 있는지 정의하는 개념이자 메커니즘입니다

자바스크립트에는 세 가지 유형의 실행 가능한 자바스크립트 코드가 있습니다.
​​​ 1. 글로벌 코드(Global Code), 즉 js 파일, HTML 페이지에 삽입된 js 코드 등과 같이 어떠한 기능에도 속하지 않는 글로벌 코드입니다.
​​​​ 2. Eval Code는 eval() 함수를 사용해 동적으로 실행되는 JS 코드입니다.
​​​ 3. 함수 코드(Function Code), 즉 사용자 정의 함수에 포함된 함수 본문 JS 코드입니다.

Eval Code를 건너뛰고 전역 실행 환경과 함수 실행 환경에 대해서만 이야기하세요.

1. 글로벌 환경:

글로벌 환경은 가장 주변적인 실행 환경입니다. 전역 실행 환경은 창 개체로 간주됩니다. 따라서 모든 전역 변수와 함수는 window 개체의 속성과 메서드로 생성됩니다. 코드가 브라우저에 로드되면 전역 실행 환경이 생성됩니다(웹 페이지나 브라우저를 닫으면 전역 실행 환경이 파괴됩니다). 예를 들어, 페이지에서는 JS 코드가 처음 로드될 때 전역 실행 환경이 생성됩니다.

이것이 클로저에 메모리 누수의 단점이 있는 이유입니다. 클로저의 외부 기능은 전역 환경으로 취급되기 때문입니다. 그래서 그것은 파괴되지 않고 항상 기억 속에 저장될 것입니다.

2. 함수 실행 환경

각 함수에는 고유한 실행 환경이 있습니다. 실행이 함수에 들어가면 해당 함수의 실행 환경이 실행 환경 스택의 맨 위로 푸시되고 실행 권한을 얻게 됩니다. 함수의 실행이 완료되면 해당 실행 환경은 스택 상단에서 제거되고 실행 권한은 이전 실행 환경으로 반환됩니다. 이는 ECMAScript 프로그램의 실행 흐름입니다.

이렇게 해석할 수도 있습니다. JavaScript 함수가 호출되면 함수는 해당 함수에 해당하는 실행 환경으로 들어갑니다. 다른 함수가 호출되면 새로운 실행 환경이 생성되고, 함수 호출 중에는 실행 프로세스가 이 환경에서 진행됩니다. 호출된 함수가 반환되면 실행 프로세스는 원래 실행 환경으로 돌아갑니다. 따라서 실행 중인 JavaScript 코드는 실행 환경 스택을 구성합니다.

　함수 호출 시 함수의 로컬 환경이 생성됩니다(함수 내의 코드가 실행된 후 환경이 소멸되고, 여기에 저장된 모든 변수 및 함수 정의도 소멸됩니다).

2-1 정의기간

함수가 정의되면 [[scope]] 속성이 생성됩니다. 이 객체는 객체 목록에 해당합니다. 목록에 있는 객체는 JavaScript 내에서만 접근할 수 있으며 구문을 통해서는 접근할 수 없습니다.

　(범위는 범위를 의미하기도 합니다.)

전역 함수 A를 정의한 다음 A 함수는 A의 [[scope]] 속성을 생성합니다. 현재 [[scope]]에는 전역 개체 [Global Object]만 포함되어 있습니다.

그리고 A 내부에 B 함수를 정의하면 B 함수는 [[scope]] 속성도 생성합니다. B의 [[scope]] 속성에는 두 개의 개체가 포함되며, 그 중 하나는 A 활성화 개체의 활성 개체입니다. , 하나는 전역 개체이고 A의 활동 개체는 앞에 있고 전역 개체는 뒤에 있습니다.

즉, 함수의 [Scope] 속성에 있는 개체 목록의 순서는 상위 계층 함수의 활성화 개체 개체, 상위 계층, 가장 바깥쪽 전역 개체까지입니다.

다음은 샘플 코드입니다. A에는 범위가 하나만 있고 B에는 범위가 두 개 있습니다

// 外部函数
function A(){
  var somevar;
  
  // 内部函数
 function B(){
   var somevar;
  }
}

2-2 실행기간

함수가 실행되면 해당 함수의 실행 환경으로 들어갑니다. 먼저 자체 활동 객체인 [활성화 객체]를 생성합니다(이 객체에는 이 객체, 매개변수(인수), 지역 변수(이름이 지정된 매개변수 포함) 및 변수 개체의 범위 체인 [[범위 체인]]을 선택한 다음 이 실행 환경의 [범위]를 [[범위 체인]]에 순서대로 복사하고 마지막으로 활성 개체를 [[범위 체인]]에 푸시합니다. 범위 체인]]은 순서가 지정된 스택이므로 실행 환경에서 액세스할 수 있는 모든 변수 및 개체에 대한 순서 있는 액세스를 보장합니다.

// 第一步页面载入创全局执行环境global executing context和全局活动象
// 定义全局[[scope]],只含有Window对象
// 扫描全局的定义变量及函数对象:color【undefined】、changecolor【FD创建changecolor的[[scope]]，此时里面只含有全局活动对象】,加入到window中，所以全局变量和全局函数对象都是做为window的属性定义的。
// 程序已经定义好所以在此执行环境内任何位置都可以执行changecolor(),color也已经被定义，但是它的值是undefined

// 第二步color赋值"blue"
var color = "blue";

// 它是不需要赋值的，它就是引用本身
function changecolor() {
 // 第四步进入changecolor的执行环境
 // 复制changecolor的[[scope]]到scope chain
 // 创建活动对象，扫描定义变量和定义函数，anothercolor【undefined】和swapcolors【FD创建swapcolors的[[scope]]加入changecolor的活动对象和全局活动对象】加入到活动对象,活动对象中同时还要加入arguments和this
 // 活动对象推入scope chain 顶端
 // 程序已经定义好所以在此执行环境内任何位置都可以执行swapcolors(),anothercolor也已经被定义好，但它的值是undefined
 
 // 第五anothercolor赋值"red"
 var anothercolor = "red";
 
 // 它是不需要赋值的，它就是引用本身
 function swapcolors() {
  // 第七步进入swapcolors的执行环境，创建它的活动对象
  // 复制swapcolors的[[scope]]到scope chain
  // 扫描定义变量和定义函数对象，活动对象中加入变量tempcolor【undefined】以及arguments和this
  // 活动对象推入scope chain 顶端
  
  // 第八步tempcolor赋值anothercolor,anothercolor和color会沿着scope chain被查到，并继续往下执行
  var tempcolor = anothercolor;
   anothercolor = color;
   color = tempcolor; 
 }

 // 第六步执行swapcolors,进入其执行环境
 swapcolors();
}

// 第三步执行changecolor,进入其执行环境
changecolor();

 var color="blue";
 function changecolor(){
 var anothercolor="red";
 function swapcolors(){
 var tempcolor=anothercolor;
 anothercolor=color;
 color=tempcolor;
  // Todo something  
  }
 swapcolors();
}
changecolor();
 //这里不能访问tempcolor和anocolor;但是可以访问color;
alert("Color is now "+color);

if(true){
  var myvar = "张三"; 
 }
 alert(myvar);// 张三

for (var i=0;i<10;i++){
   console.log(i) 
  }
  
  alert(i); // 10

var name = "小明";
function getName(){
 alert( name ); //'undefined'
 var name = '小黄';
 alert(name ); //小黄
}
getName()

var name = "小明";
function getName(){
 var name;
 alert( name ); //'undefined'
 var name = '小黄';
 alert(name ); //小黄
}
getName()