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

는 세 가지 매개 변수를 허용합니다. 그런 다음 문 후에는 실제 콜백 함수 () 기능을 트리거하는 함수 호출을 배치합니다. 마지막으로, 를 호출합니다. 여기서 우리는 가 변수로 전달됩니다 ( - 우리는 즉시 실행되기를 원하지 않지만 나중에 . 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에 전달할 수 있습니다.

객체를 사용하지 않고 함수 내부에 액세스하는 일반적인 패턴으로, 코드를 브라우저 환경과 독립적으로 만듭니다. 다음 코드는 변수

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

를 생성하여 사용중인 플랫폼에 관계없이 전역 객체를 참조합니다.

이 코드는 브라우저 (글로벌 오브젝트는

) 또는 node.js 환경에서 작동합니다 (우리는 전역 객체를 참조하기 위해 특수 변수

를 사용합니다).
1. iife의 가장 큰 이점 중 하나는 그것을 사용할 때 전 세계 공간을 임시 변수로 오염시키는 것에 대해 걱정할 필요가 없다는 것입니다. 내부에서 정의하는 모든 변수는 로컬로됩니다. 확인해 봅시다 :
2. 이 예에서는 첫 번째
문장이 잘 작동하지만, 두 번째 문장은 및

가 iife로 인해 로컬 변수가되기 때문에 실패합니다.

우리는 클로저가 외부 변수에 대한 참조를 유지한다는 것을 이미 알고 있으므로 최신/업데이트 된 값을 반환합니다. 그렇다면 다음 예제의 출력은 무엇이라고 생각하십니까?

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

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

  printLocation();
}

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

당신은 과일의 이름이 몇 초 간격으로 하나씩 인쇄 될 것으로 기대할 수 있습니다. 그러나 실제로 출력은 "정의되지 않은"4 배입니다. 그렇다면 문제는 무엇입니까?

문제는

명령문에서

의 값이 루프의 각 반복 당 4와 같다는 것입니다. 그리고 배열의 인덱싱 4에 아무것도 없기 때문에 출력은 "정의되지 않은"것입니다. (JavaScript에서 배열의 인덱스는 0에서 시작합니다.) console.log()가 4와 같으면 루프가 종료됩니다. i 이 문제를 해결하려면 루프가 생성 한 각 함수에 대한 새로운 범위를 제공해야합니다. 이는 변수의 현재 상태를 캡처합니다. 우리는 iife의 fruits 메소드를 끄고 현재 i의 현재 사본을 보유하기 위해 개인 변수를 정의함으로써이를 수행합니다.

우리는 또한 동일한 작업을 수행하는 다음 변형을 사용할 수 있습니다. i iife는 일반적으로 모듈을 캡슐화하기 위해 스코프를 만드는 데 사용됩니다. 모듈에는 우발적 인 수정을 방지하는 자체 포함 된 개인 범위가 있습니다. 이 기술을 모듈 패턴이라고하며 클로저 관리 스코프를 사용하는 강력한 예입니다.이 기술은 jQuery 및 밑줄과 같은 많은 최신 JavaScript 라이브러리에서 널리 사용됩니다. setTimeout() 결론 i

이 튜토리얼의 목적은 이러한 기본 개념을 가능한 한 명확하고 간결하게 소개하는 것입니다. 그것들을 잘 이해하는 것이 성공적이고 효율적인 JavaScript 개발자가되는 열쇠입니다.

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

Kyle Simpson의 "You No No Mone JS : Scopes and Closures"를 읽는 것이 좋습니다.

(후속 내용, 즉 FAQ 부분은 기사의 길이로 인해 생략되었습니다. 필요한 경우 구체적인 질문을하십시오.)

위 내용은 JavaScript 폐쇄, 콜백 및 iifes를 탈취합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!