JavaScript 폐쇄, 콜백 및 iifes를 탈취합니다

이 기사는 현대 JavaScript 개발의 세 가지 중요한 개념, 즉 클로저, 콜백 함수 및 즉각적인 실행 함수 표현식 (IIFE)을 탐색 할 것입니다. 우리는 가변 범위와 향상에 대해 자세히 배웠으며 이제 탐사 여행을 완료합시다.

코어 포인트

JavaScript Closures는 상위 스코프 변수에 액세스 할 수있는 함수입니다. 콜백 함수는 다른 함수로 매개 변수로 전달되는 함수이며, 외부 함수 내에서 실행되므로 실행을 지연 시키거나 비동기 작업 순서를 유지하는 방법을 제공합니다.

실행 now function expression (iife)은 변수의 범위를 보호하고 글로벌 범위 오염을 방지하기 위해 정의 직후에 실행되는 함수입니다.

클로저는 범위에 저장된 변수를 읽고 업데이트 할 수 있으며, 이러한 업데이트는 이러한 변수에 액세스하는 모든 클로저로 보입니다. 이는 폐쇄가 값이 아닌 변수에 대한 참조를 저장합니다.
• iife를 사용하면 함수 내에서 개인 스코프를 생성하여 변수를 더 잘 관리하고 이러한 변수에 대한 외부 액세스를 방지하는 데 도움이됩니다.
이러한 개념 (클로저, 콜백 함수 및 IIFE)의 조합은 기능을 캡슐화하고 글로벌 범위 오염을 피하기 위해 간결하고 효율적이며 안전한 JavaScript 코드를 작성하는 강력한 도구를 제공합니다.
• 닫는
• javaScript에서, 클로저는 부모 함수가 를 반환하더라도 부모 스코프 변수에 대한 참조를 유지하는 모든 함수입니다.
실제로,이 튜토리얼의 첫 번째 부분의 변수 범위 섹션에서 배운 것처럼 모든 함수는 폐쇄로 간주 될 수 있습니다. 함수를 참조하거나 액세스 할 수 있기 때문입니다.
• 자체 함수 범위의 변수 및 매개 변수 외부 (부모) 함수의 변수 및 매개 변수 글로벌 범위의 모든 변수
• 그래서 당신은 그것을 모르고 폐쇄를 사용했을 수 있습니다. 그러나 우리의 목표는 그것들을 사용하는 것이 아니라 이해하는 것입니다. 그들이 어떻게 작동하는지 이해하지 못하면 올바르게 사용할 수 없습니다. 이를 위해 위의 폐쇄 정의를 세 가지 이해하기 쉬운 핵심 요점으로 분류합니다.
포인트 1 :

현재 함수 외부에서 정의 된 변수를 참조 할 수 있습니다.

이 코드 예제에서 함수는 동봉 된 (부모) 함수의 변수 및

매개 변수를 나타냅니다. 결과적으로 가 호출되면

는 이전 변수와 매개 변수를 사용하여 "프랑스에있는 파리에 있습니다"를 성공적으로 출력합니다. 지점 2 : 내부 함수는 외부 함수가 반환 된 후에도 외부 함수로 정의 된 변수를 참조 할 수 있습니다.

function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  printLocation();
}

setLocation("Paris"); // 输出：You are in Paris, France

이것은이 시간을 제외하고 첫 번째 예제와 거의 같습니다. 따라서 의 값은 내부

함수입니다. printLocation() 우리가 이것을 상기시켜 주면 - <🎜 🎜> - 우리는 다음과 같은 출력을 얻을 것입니다. 우리가 본 바와 같이, setLocation()는 어휘 스코프 외부에서 실행됩니다. 는 사라지는 것처럼 보이지만 currentLocation는 여전히 변수 (<🎜 🎜>)와 매개 변수 (<🎜 🎜>)에 액세스 할 수 있습니다. printLocation() <(> 클로저 (내 함수)는 어휘 스코프 외부에서 실행 되더라도 그 주변의 범위 (외부 기능)를 기억할 수 있습니다. 따라서 나중에 프로그램에서 언제든지 호출 할 수 있습니다.

<<> 지점 3 :

내부 함수 값보다는 참조 별 외부 함수 인 저장 변수. currentLocation <<> alert(currentLocation);

여기

function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  return printLocation;
}

var currentLocation = setLocation("Paris");

currentLocation(); // 输出：You are in Paris, France

는 두 개의 폐쇄를 포함하는 객체를 반환합니다 (<🎜

및 <🎜 🎜>). 는 현재 값을 printLocation()> 업데이트합니다. 두 번째 호출 <<<>는 기본 "파리"대신 업데이트 된 (현재) 값 setLocation() - "시드니"값을 출력합니다. printLocation() 따라서 폐쇄는 저장된 변수를 읽고 업데이트 할 수 있으며, 이러한 업데이트는 이들이 액세스하는 모든 폐쇄로 보입니다. 이는 폐쇄가 값을 복사하는 대신 외부 변수 country에 대한 참조를 저장한다는 것을 의미합니다. 이를 알지 못하면 찾기 어려운 논리적 오류로 이어질 수 있기 때문에 이것은 매우 중요한 점입니다. city 폐쇄의 흥미로운 특징은 폐쇄의 변수가 자동으로 숨겨져 있다는 것입니다. 클로저는 직접 액세스 할 수있는 방법을 제공하지 않고 밀폐 된 변수에 데이터를 저장합니다. 이러한 변수를 변경하는 유일한 방법은 간접적으로 액세스하는 것입니다. 예를 들어, 마지막 코드 스 니펫에서 <🎜 🎜> 및

클로저를 사용하여 변수

를 간접적으로 수정할 수 있음을 알 수 있습니다.

우리는이 동작을 사용하여 개인 데이터를 객체에 저장할 수 있습니다. 객체의 속성으로 데이터를 저장하는 대신 생성자에 변수로 저장 한 다음 해당 변수를 참조하는 방법으로 클로저를 사용하십시오.

알 수 있듯이 폐쇄 주변에는 신비하거나 심오한 것이 없습니다. <<> 콜백 함수 <🎜 🎜> <🎜 🎜> JavaScript에서 기능은 일류 시민입니다. 이 사실의 결과 중 하나는 기능이 다른 기능에 대한 인수로 전달되거나 다른 기능에 의해 반환 될 수 있다는 것입니다.

결과는 다른 함수를 매개 변수 또는 리턴 함수로 취하는 기능을 고차 함수라고하며 매개 변수로 전달되는 함수를 콜백 함수라고합니다. 어느 시점에서 고차 기능에 의해 "콜백"이되기 때문에 "콜백"이라고합니다.

콜백 함수에는 매일 많은 용도가 있습니다. 그중 하나는 브라우저 윈도우 객체의

및

메소드를 사용할 때입니다.이 메소드는 콜백 함수를 허용하고 실행합니다. setTimeout() 또 다른 예는 이벤트 리스너를 페이지의 요소에 첨부 할 때입니다. 이렇게하면 실제로 콜백 함수에 대한 포인터를 제공합니다. 이는 이벤트가 발생할 때 호출됩니다. setInterval()

고차 기능과 콜백 함수가 어떻게 작동하는지 이해하는 가장 쉬운 방법은 고유 한 기능 및 콜백 기능을 만드는 것입니다. 자, 지금 하나를 만들어 봅시다 :

function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  printLocation();
}

setLocation("Paris"); // 输出：You are in Paris, France

여기서 우리는

를 만듭니다.

function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  return printLocation;
}

var currentLocation = setLocation("Paris");

currentLocation(); // 输出：You are in Paris, France

는 세 가지 매개 변수를 허용합니다. 그런 다음 <<<> 문 후에는 실제 콜백 함수 (<🎜 🎜>) 기능을 트리거하는 함수 호출을 배치합니다. 마지막으로, <<>를 호출합니다. 여기서 우리는 <🎜

가 변수로 전달됩니다 (

<🎜

function printLocation () {
  console.log("You are in " + city + ", " + country);
}

) <🎜

- 우리는 즉시 실행되기를 원하지 않지만 나중에 <로 사용하기 위해 지적하고 싶습니다. 🎜>. fullName() 우리는 함수 호출이 아니라 함수 정의를 전달하고 있습니다. 이것은 콜백 함수가 즉시 실행되는 것을 방지하며, 이는 콜백 함수의 철학과 일치하지 않습니다. 함수 정의로 전달되면, 포함 된 함수의 어느 시점에서든 언제든지 실행할 수 있습니다. 또한 콜백 함수는 실제로 함수 내부에 배치되는 것처럼 행동하기 때문에 실제로 폐쇄입니다. 함수가 포함 된 변수 및 매개 변수에 액세스 할 수 있으며 전역 범위의 액세스 변수에도 액세스 할 수 있습니다. console.log() 콜백 함수는 기존 함수 (이전 예제에 표시된 것처럼) 또는 익명 함수 일 수 있습니다. fullName() 콜백 함수는 JavaScript 라이브러리에서 널리 사용되어 다양성과 재사용 성을 제공합니다. 라이브러리 방법의 쉽게 사용자 정의 및/또는 확장을 허용합니다. 또한이 코드는 유지 관리가 쉽고 간결하고 읽기 쉽습니다. 콜백 기능은 불필요한 중복 코드 패턴을보다 초록/일반 함수로 변환해야 할 때마다 편리합니다. greeting() 두 가지 기능이 필요하다고 가정합니다. 하나는 게시 된 기사 정보를 인쇄하고 다른 하나는 보낸 메시지 정보를 인쇄하는 다른 하나를 인쇄하는 것입니다. 우리는 그것들을 만들었지 만 논리의 일부가 두 기능 모두에서 반복된다는 것을 알았습니다. 우리는 한 곳에 동일한 코드를 갖는 것이 불필요하고 유지하기가 어렵다는 것을 알고 있습니다. 그렇다면 해결책은 무엇입니까? 다음 예에서 설명해 봅시다

function setLocation(city) {
  var country = "France";

  function printLocation() {
    console.log("You are in " + city + ", " + country);
  }

  printLocation();
}

setLocation("Paris"); // 输出：You are in Paris, France

여기서 우리가하는 일은 중복 코드 패턴 (<🎜 🎜> 및 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <🎜))을 보관하는 것입니다.이 기능은 이제 콜백 함수입니다. 이러한 방식으로 동일한 기능을 사용하여 메시지, 기사, 서적, 잡지 등 다양한 관련 정보에 대한 관련 정보를 인쇄 할 수 있습니다. 당신이해야 할 유일한 일은 각 유형에 대한 특수 콜백 함수를 만들고

함수에 인수로 전달하는 것입니다. console.log(item) <🎜 🎜> <<> 기능 표현식을 즉시 실행합니다 (iife) <🎜 var date = new Date() publish() 기능 표현식을 즉시 실행하거나 iife ( "ify"로 발음)는 생성 된 직후에 실행되는 함수 표현식 (명명 또는 익명)입니다. publish() 이 모드에는 두 개의 약간 다른 구문 변형이 있습니다.

정기적 인 기능을 iife로 변환하려면 두 단계를 수행해야합니다.

전체 기능을 괄호 안에 둘러싸고 있어야합니다. 이름에서 알 수 있듯이 iife는 함수 정의가 아니라 함수 표현식이어야합니다. 따라서 괄호를 둘러싼 목적은 함수 정의를 표현식으로 변환하는 것입니다. JavaScript에서 괄호 안의 모든 것이 표현으로 취급되기 때문입니다. 끝에 (변형 1) 또는 버팀대를 닫은 후 (변형 2)에 한 쌍의 괄호 한 쌍을 추가해야합니다.

기억해야 할 세 가지 더 : <🎜 🎜> <,> 우선, 변수에 함수를 할당하면 이미 표현식이기 때문에 전체 함수를 괄호 안에 동봉 할 필요가 없습니다.

두 번째로, iife는 세미콜론으로 끝납니다. 그렇지 않으면 코드가 제대로 작동하지 않을 수 있습니다.

셋째, 다음 예에서 볼 수 있듯이 매개 변수를 iife에 전달할 수 있습니다.