JavaScript는 chain_javascript 기술 범위의 클로저에 대해 이야기합니다.

센마는 폐쇄입니다
폐쇄의 개념에 관해서는 의미가 있습니다.

클로저란 다른 함수 범위에 있는 변수에 접근할 수 있는 함수를 말합니다
이 개념은 다소 복잡하므로 분해해 보겠습니다. 개념적으로 클로저에는 두 가지 특성이 있습니다.

• 1. 기능
• 2. 다른 함수 범위의 변수에 접근할 수 있습니다
  

ES 6 이전에는 Javascript에는 함수 범위 개념만 있었고 블록 수준 범위 개념은 없었습니다(단, catch로 잡힌 예외는 catch 블록에서만 액세스할 수 있음)(IIFE는 로컬 범위를 생성할 수 있음). 각 함수 범위는 닫혀 있습니다. 즉, 함수 범위의 변수는 외부에서 접근할 수 없습니다.

function getName() {
 var name = "美女的名字";
 console.log(name);  //"美女的名字"
}
function displayName() {
 console.log(name); //报错
}

그러나 포기를 거부한 싱글남은 아름다운 여인의 이름을 얻기 위해 코드를 이렇게 바꿨습니다.

function getName() {
 var name = "美女的名字";
 function displayName() {
 console.log(name); 
 }
 return displayName;
}
var 美女 = getName(); 
美女() //"美女的名字"

이제 미인은 폐쇄적인 여자이고, 싱글 남자는 마음대로 놀 수 있다. (단, 싱글이 변수명을 중국어로 쓰는 것은 권장하지 않으니 배우지 마시기 바랍니다.)

폐쇄와 관련하여 세 가지 사항을 더 말씀드리고 싶습니다.
1. 클로저는 현재 함수 외부의 변수에 액세스할 수 있습니다.

function getOuter(){
 var date = '815';
 function getDate(str){
 console.log(str + date); //访问外部的date
 }
 return getDate('今天是：'); //"今天是：815"
}
getOuter();

getDate는 클로저입니다. 이 함수가 실행되면 범위 A가 형성됩니다. 날짜 변수는 A에 정의되어 있지 않지만 상위 범위에서 변수의 정의를 찾을 수 있습니다.

2. 외부 함수가 반환되더라도 클로저는 외부 함수에서 정의한 변수에 계속 액세스할 수 있습니다.

function getOuter(){
 var date = '815';
 function getDate(str){
 console.log(str + date); //访问外部的date
 }
 return getDate;  //外部函数返回
}
var today = getOuter();
today('今天是：'); //"今天是：815"
today('明天不是：'); //"明天不是：815"

3. 클로저는 외부 변수의 값을 업데이트할 수 있습니다

function updateCount(){
 var count = 0;
 function getCount(val){
 count = val;
 console.log(count);
 }
 return getCount;  //外部函数返回
}
var count = updateCount();
count(815); //815
count(816); //816

스코프 체인
클로저가 외부 함수의 변수에 접근할 수 있는 이유는 무엇인가요? 이것은 Javascript의 범위 체인에 관한 것입니다.
Javascript에는 변수나 함수가 액세스할 수 있는 다른 데이터를 정의하고 해당 동작을 결정하는 실행 컨텍스트라는 개념이 있습니다. 각 실행 환경에는 이와 관련된 변수 개체가 있으며, 환경에서 정의된 모든 변수와 함수는 이 개체에 저장됩니다. Javascript에서는 이를 일반 객체로 처리할 수 있지만 해당 속성을 수정할 수만 있고 참조할 수는 없습니다.

변수 객체에도 상위 범위가 있습니다. 변수에 접근할 때 인터프리터는 먼저 현재 범위에서 식별자를 검색합니다. 식별자가 없으면 변수의 식별자를 찾거나 부모 범위가 더 이상 존재하지 않을 때까지 부모 범위로 이동합니다. 범위 체인.

스코프 체인은 프로토타입 상속과 다소 유사하지만 약간의 차이점이 있습니다. 공통 객체의 속성을 검색하고 현재 객체나 해당 프로토타입에서 찾을 수 없는 경우 정의되지 않은 속성이 반환됩니다. 찾고 있는 항목이 범위 체인에 없으면 ReferenceError가 발생합니다.

스코프 체인의 최상위는 전역 객체입니다. 전역 환경 코드의 경우 범위 체인에는 전역 개체라는 하나의 요소만 포함됩니다. 따라서 전역 환경에서 변수를 정의하면 전역 객체에서도 정의됩니다. 함수가 호출되면 범위 체인에는 여러 범위 개체가 포함됩니다.

• 글로벌 환경

범위 체인에 대해 좀 더 이야기합니다(빨간 책에는 범위와 실행 환경에 대한 자세한 설명이 있습니다). 간단한 예를 살펴보겠습니다.

// my_script.js
"use strict";
var foo = 1;
var bar = 2;

글로벌 환경에서는 간단한 변수 2개가 생성됩니다. 앞에서 언급했듯이 변수 개체는 현재 전역 개체입니다.

• 비중첩 함수

함수 중첩 없이 함수를 생성하도록 코드 변경:

"use strict";
var foo = 1;
var bar = 2;
function myFunc() {
 //-- define local-to-function variables
 var a = 1;
 var b = 2;
 var foo = 3;
 console.log("inside myFunc");
}
console.log("outside");
//-- and then, call it:
myFunc();

当myFunc被定义的时候，myFunc的标识符（identifier）就被加到了当前的作用域对象中（在这里就是全局对象），并且这个标识符所引用的是一个函数对象（function object）。函数对象中所包含的是函数的源代码以及其他的属性。其中一个我们所关心的属性就是内部属性[[scope]]。[[scope]]所指向的就是当前的作用域对象。也就是指的就是函数的标识符被创建的时候，我们所能够直接访问的那个作用域对象（在这里就是全局对象）。

比较重要的一点是：myFunc所引用的函数对象，其本身不仅仅含有函数的代码，并且还含有指向其被创建的时候的作用域对象。

当myFunc函数被调用的时候，一个新的作用域对象被创建了。新的作用域对象中包含myFunc函数所定义的本地变量，以及其参数（arguments）。这个新的作用域对象的父作用域对象就是在运行myFunc时我们所能直接访问的那个作用域对象。

• Nested functions

如前面所说，当函数返回没有被引用的时候，就会被垃圾回收器回收。但是对于闭包（函数嵌套是形成闭包的一种简单方式）呢，即使外部函数返回了，函数对象仍会引用它被创建时的作用域对象。

"use strict";
function createCounter(initial) {
 var counter = initial;
 function increment(value) {
 counter += value;
 }
 function get() {
 return counter;
 }
 return {
 increment: increment,
 get: get
 };
}
var myCounter = createCounter(100);
console.log(myCounter.get()); // 返回 100
myCounter.increment(5);
console.log(myCounter.get()); // 返回 105

当调用createCounter(100)时，内嵌函数increment和get都有指向createCounter(100) scope的引用。如果createCounter(100)没有任何返回值，那么createCounter(100) scope不再被引用，于是就可以被垃圾回收。但是因为createCounter(100)实际上是有返回值的，并且返回值被存储在了myCounter中，所以对象之间的引用关系发生变化。

需要用点时间思考的是：即使createCounter(100)已经返回，但是其作用域仍在，并能且只能被内联函数访问。可以通过调用myCounter.increment() 或 myCounter.get()来直接访问createCounter(100)的作用域。

当myCounter.increment() 或 myCounter.get()被调用时，新的作用域对象会被创建，并且该作用域对象的父作用域对象会是当前可以直接访问的作用域对象。

当执行到return counter;时，在get()所在的作用域并没有找到对应的标示符，就会沿着作用域链往上找，直到找到变量counter，然后返回该变量，调用increment(5)则会更有意思。当单独调用increment(5)时，参数value会存贮在当前的作用域对象。函数要访问value，能马上在当前作用域找到该变量。但是当函数要访问counter时，并没有找到，于是沿着作用域链向上查找，在createCounter(100)的作用域找到了对应的标示符，increment()就会修改counter的值。除此之外，没有其他方式来修改这个变量。闭包的强大也在于此，能够存贮私有数据。

Similar function objects, different scope objects
对于上面的counter示例，再说点扩展的事。看代码：

//myScript.js
"use strict";
function createCounter(initial) {
 /* ... see the code from previous example ... */
}
//-- create counter objects
var myCounter1 = createCounter(100);
var myCounter2 = createCounter(200);

myCounter1 和 myCounter2创建之后，关系图是酱紫的：

在上面的例子中，myCounter1.increment和myCounter2.increment的函数对象拥有着一样的代码以及一样的属性值（name，length等等），但是它们的[[scope]]指向的是不一样的作用域对象。

这才有了下面的结果：

var a, b;
a = myCounter1.get(); // a 等于 100
b = myCounter2.get(); // b 等于 200
myCounter1.increment(1);
myCounter1.increment(2);
myCounter2.increment(5);
a = myCounter1.get(); // a 等于 103
b = myCounter2.get(); // b 等于 205

作用域和this
作用域会存储变量，但this并不是作用域的一部分，它取决于函数调用时的方式。关于this指向的总结，可以看这篇文章：JavaScript面试问题：事件委托和this