JavaScript 기초 (6) 함수 표현 Closure_Javascript 기술

사실 js가 함수 클로저를 지원하는 주된 이유는 js가 데이터를 저장할 수 있는 함수가 필요하기 때문입니다. 여기서 저장되는 데이터는 함수 종료 후 함수 내 변수의 값만 저장된다는 것입니다. js가 함수 내에 데이터를 저장할 수 있어야 하는 이유는 js가 함수형 언어이기 때문입니다. 함수 내에 데이터를 저장하는 것은 함수형 언어의 특징입니다.

앞서 소개한 세 가지 함수 정의 방법 복습

functiosu(numnumreturnunum//함수 선언 구문 정의
vasufunction(numnum)returnunum}//함수 표현식 정의
vasuneFunction("num""num""returnunum")//함수 생성자

클로저를 분석하기 전에 먼저 함수 정의 및 호출 시 흔히 저지르는 실수를 살펴보겠습니다.

예 1:

sayHi(); //错误：函数还不存在
var sayHi = function () {
  alert("test");
};

예 2:

if (true) {
  function sayHi() {
    alert("1");
  }
} else {
  function sayHi() {
    alert("2");
  }
}
sayHi();//打印结果并不是我们想要的

예 3:

var fun1 = function fun2() {
  alert("test");
}
fun2();//错误：函数还不存在

예제 1에서는 함수 선언 구문을 사용하여 함수를 정의하기 전에는 함수를 호출할 수 없습니다. 해결책:

1. 함수 표현식을 사용하여 함수를 정의하는 경우 표현식이 정의된 후에 호출되어야 합니다.

var sayHi = function () {
  alert("test");
};
sayHi()

2. 함수 선언을 사용하세요. (여기서 브라우저 엔진은 모든 코드가 실행되기 전에 함수 선언을 승격하고 함수 선언을 읽습니다.)

sayHi(); 
function sayHi () {
  alert("test");
};

예제 2에서 예상 결과는 1이 인쇄되어야 하지만 실제 결과는 2가 인쇄됩니다.

if (true) {
  function sayHi() {
   alert("1");
  }
  } else {
  function sayHi() {
   alert("2");
  }
}
sayHi();//打印结果并不是我们想要的

왜 이런 일이 일어나는 걸까요? 함수 선언 승격으로 인해 브라우저는 사전 구문 분석 중에 if 조건을 판단하지 않고 두 번째 함수 정의를 구문 분석할 때 첫 번째 조건을 직접 덮어씁니다.

해결책:

var sayHi;
if (true) {
  sayHi = function () {
   alert("1");
  }
  } else {
  sayHi = function () {
   alert("2");
  }
}
sayHi();

예제 3에서는 fun1()만 사용하여 호출할 수 있고 fun2()는 사용할 수 없음을 확인했습니다.

나 자신의 이해로는 실제 이유를 알 수 없습니다. 정보를 찾을 수 없습니다.

1: function fun3() { }; 그림과 같이 var fun3 = function fun3() { };

따라서 fun1()만 사용하여 호출할 수 있고 fun2()는 사용할 수 없습니다.

사실 아직 궁금한 점이 있나요? 아시는 분 계시면 알려주세요.

fun2는 외부에서 호출할 수 없는데 왜 함수 내부에서 호출할 수 있나요? 디버거에서는 여전히 fun1을 얻을 수 없습니다.

자, 위의 세 가지 질문으로 준비를 시작해 보겠습니다. 오늘의 주제인 "폐쇄"를 계속해 보겠습니다.

1. 폐쇄란 무엇인가요?

정의: 다른 함수의 범위에 있는 변수에 접근하는 함수입니다

예제 함수부터 시작해 보겠습니다.

예 1:

function fun() {
  var a = "张三";
}
fun();//在我们执行完后，变量a就被标记为销毁了

예 2:

function fun() {
  var a = "张三";
  return function () {
    alert("test");
  }
}
var f = fun();//同样，在我们执行完后，变量a就被标记为销毁了

예 3:

function fun() {
  var a = "张三";
  return function () {
    alert(a);
  }
}
var f = fun();//【现在情况发生变化了，如果a被销毁，显然f被调用的话就不能访问到变量a的值了】
f();//【然后变量a的值正常的被访问到了】
//这就是闭包，当函数A 返回的函数B 里面使用到了函数A的变量，那么函数B就使用了闭包。
示例：
function fun() {
  var a = "张三";
  return function () {
   alert(a);
  }
}
var f = fun();//【现在情况发生变化了，如果a被销毁，显然f被调用的话就不能访问到变量a的值了】
f();//【然后变量a的值正常的被访问到了】

분명히 클로저를 잘못 사용하면 메모리 사용량이 늘어납니다. 따라서 특별한 상황이 아닌 한 클로저를 사용하지 않도록 하세요. 사용하는 경우 메모리를 재활용할 수 있도록 null 참조를 수동으로 설정해야 합니다. f = null ;

그림: (스코프 체인을 이해하지 못하는 학생은 이전 기사 스코프 및 스코프 체인을 먼저 읽어보세요)

2. 익명함수란 무엇인가요? (그냥 컨셉만 설명)

예: (즉, 이름이 없는 함수)

객체의 함수 반환값이 익명함수일 때 발생하는 이상한 현상에 대해

설명하기 전에 먼저 머리를 비우고 읽으면서 더 이상 혼란스러워하지 마십시오. 혼란스러우면 다음 내용을 무시하세요.

var name1 = "张三";
var obj = {
  name1: "李四",      
  fun2: function () {
    alert(this.name1);
  },
  fun3: function () {
    return function () {
      alert(this.name1);
    }
  }
}

obj.fun2();//인쇄 결과 "lee思"은 예상한 대로입니다.

obj.fun3()();//여기서 반환되는 것은 함수이므로 이를 호출하려면 () 쌍을 추가해야 합니다. 인쇄된 결과는 '장산(Zhang San)'인데 의외다.

//정말 혼란스럽습니다. 이것이 전반적인 상황을 시사하는 것은 무엇입니까?
앞서 "어떤 객체가 메서드를 클릭하든 이것이 객체입니다"라고 말한 다음 obj.fun3()()은 "Zhang San"을 인쇄합니다. 이는 이것이 전역 범위를 실행한다는 의미입니다.

아래 예를 보면 그 이유를 이해할 수 있습니다.

obj.fun3()()을 분해해 보겠습니다. 먼저 obj.fun3()은 창 범위에 익명 함수를 반환한 다음 이를 호출하여 창을 가리킵니다. (설명이 좀 억지스러운 느낌도 들고 맞는지 아닌지도 모르겠습니다. 일단은 이렇게 이해합니다)

클로저 형성 원인: 메모리 해제 문제

일반적으로 함수가 실행되면 로컬 활성 객체는 소멸되고 전역 범위만 메모리에 저장되지만 클로저의 경우에는 상황이 다릅니다.

클로저의 활성 개체는 여전히 메모리에 저장되므로 위의 예에서 함수 호출이 반환된 후 변수 i는 활성 개체에 속합니다. 즉, 해당 스택 영역은 해제되지 않았지만 i 변수에 의해 저장된 범위 체인이 전역적으로 b()->a()->로 이동하면 범위 var i 선언을 찾은 다음 var i=1; ; 클로저 내의 결과, 최종적으로 출력 값은 2입니다.

위 내용은 편집자가 공유한 JavaScript 기초 Part 6의 함수 표현식 클로저입니다.