자 바스 크 립 트 리 셋 함수 에 대한 깊 은 이해

머리말
자 바스 크 립 트 리 셋 함 수 는 성공 한 자 바스 크 립 트 개발 자가 되 기 위해 반드시 알 아야 할 중요 한 개념 이다.그러나 나 는 본문 을 읽 은 후에 네가 이전에 리 셋 방법 을 사용 하여 겪 었 던 모든 장 애 를 극복 할 수 있 을 것 이 라 고 믿는다.
시작 하기 전에 먼저 우리 가 함수 에 대한 이해 가 탄탄 하 다 는 것 을 확보 해 야 한다.
빠 른 회고:JavaScript 함수
함수 가 무엇 입 니까?
함 수 는 특정 작업 을 수행 하기 위해 코드 가 있 는 논리 적 구성 요소 입 니 다.실제로 디 버 깅 과 유지 보 수 를 위해 함 수 는 더욱 조직 적 인 방식 으로 코드 를 작성 할 수 있 습 니 다.함수 에 서 는 코드 재 활용 도 허용 합 니 다.
함 수 를 한 번 만 정의 하고 필요 할 때 호출 하 십시오.같은 코드 를 한 번 또 한 번 만 들 필요 가 없습니다.
함수 설명
이제 자 바스 크 립 트 에서 함 수 를 어떻게 설명 하 는 지 봅 시다.
4.567917.함 수 를 사용 하 는 구조 함수:이런 방법 에서 함 수 는'함수'의 구조 함수 의 도움 을 받 아 만 든 것 이다.기술적 으로 이런 방법 은 함수 표현 식 문법 과 함수 성명 문 문법 을 사용 하여 함 수 를 설명 하 는 방법 보다 효율 이 낮다4.567917.함수 표현 식 사용:보통 이런 방법 은 변수 배분 과 같 습 니 다.쉽게 말 하면 함수 주 체 는 표현 식 으로 간주 되 고 이 표현 식 은 변수 에 분 배 됩 니 다.이 문법 정 의 를 사용 하 는 함 수 는 명명 함수 나 익명 함수 일 수 있 습 니 다.
이름 이 없 는 함 수 는 익명 함수 라 고 합 니 다.익명 함 수 는 자동 으로 호출 됩 니 다.이것 은 자동 으로 자신 을 호출 한 다 는 것 을 의미 합 니 다.이 행 위 는 즉시 호출 되 는 함수 표현 식(IIFE)이 라 고도 합 니 다4.567917.함수 성명 을 사용 합 니 다.이런 방법 은 자 바스 크 립 트 에서 자주 사용 하 는 구식 방법 입 니 다.키워드'function'이후 함수 의 이름 을 지정 해 야 합 니 다.그 다음 에 함수 가 여러 개의 매개 변수 나 파 라 메 터 를 받 아들 이면 언급 해 야 합 니 다.이 부분 은 충분히 선택 할 수 있 지만..함수 체 에서 함 수 는 호출 자 에 게 값 을 되 돌려 주어 야 합 니 다.return 문 구 를 만나면 이 함 수 는 실행 을 중단 합 니 다.함수 내부 에서 매개 변 수 는 국부 변 수 를 충당 할 것 이다.
마찬가지 로 함수 내부 에서 설명 하 는 변 수 는 이 함수 의 부분 변수 입 니 다.부분 변 수 는 이 함수 에서 만 접근 할 수 있 기 때문에 같은 이름 을 가 진 변 수 는 서로 다른 함수 에 쉽게 사용 할 수 있 습 니 다.
함수 호출
다음 의 어떤 경우 에 도 이전에 설명 한 함 수 를 호출 합 니 다.
4.567917.이벤트 가 발생 했 을 때 예 를 들 어 사용자 가 단 추 를 누 르 거나 드 롭 다운 목록 에서 일부 옵션 을 선택 하 는 등

자바 script 코드 에서 이 함 수 를 호출 할 때..

4.567917.이 함 수 는 자동 으로 호출 할 수 있 습 니 다.우 리 는 익명 함수 표현 식 에서 토론 을 했 습 니 다()연산 자 는 이 함 수 를 호출 합 니 다.
무엇이 반전 함수 입 니까?
MDN 의 설명 에 따 르 면 리 셋 함 수 는 매개 변수 로 다른 함수 에 전 달 된 함수 이 고 외부 함수 내부 에서 이 리 셋 함 수 를 호출 하여 특정한 조작 을 완성 합 니 다.
리 턴 함 수 는 하나의 함수 로 다른 함수 가 실 행 된 후에 바로 실 행 될 것 이 라 고 사람 말로 설명 하 겠 습 니 다.리 셋 함 수 는 매개 변수 로 다른 자 바스 크 립 트 함수 에 전달 되 는 함수 입 니 다.이 반전 함 수 는 전 달 된 함수 내부 에서 실 행 될 것 이다.
자 바스 크 립 트 에서 함 수 는 하나의 대상 으로 간주 된다.하나의 대상 에 대해 우리 의 뜻 은 숫자,함수 또는 변 수 는 언어의 다른 실체 와 같 을 수 있다 는 것 을 말한다.하나의 대상 으로서 함 수 를 변수 로 다른 함수 에 전달 할 수도 있 고 다른 함수 에서 이 함수 들 을 되 돌려 줄 수도 있다.
이런 조작 을 수행 할 수 있 는 함 수 는 고급 함수 라 고 불 린 다.리 턴 함 수 는 사실상 패턴 입 니 다."모델 이라는 단 어 는 소프트웨어 개발 에서 흔히 볼 수 있 는 문 제 를 해결 하 는 효과 적 인 방법 을 나타 낸다.리 셋 함 수 를 리 셋 모드 로 사용 하 는 것 이 좋 습 니 다.
왜 우 리 는 반전 이 필요 합 니까?
클 라 이언 트 자 바스 크 립 트 가 브 라 우 저 에서 실행 되 고 브 라 우 저의 주 프로 세 스 는 단일 스 레 드 이벤트 순환 입 니 다.단일 스 레 드 이벤트 순환 에서 장시간 실행 되 는 작업 을 시도 하면 이 과정 을 막 을 수 있 습 니 다.기술적 으로 이것 은 좋 지 않다.왜냐하면 과정 은 조작 이 끝 날 때 다른 사건 의 처 리 를 멈 추기 때문이다.
예 를 들 어 alert 문 구 는 브 라 우 저 에서 자바 script 의 차단 코드 중 하나 로 여 겨 집 니 다.alert 를 실행 하면 alert 대화 상자 창 을 닫 기 전에 브 라 우 저 에서 대화 할 수 없습니다.장시간 운행 하 는 것 을 막 기 위해 서 우 리 는 리 셋 을 사용 했다.
우 리 는 당신 이 어떤 상황 에서 리 셋 을 사용 하 는 지 정확하게 이해 할 수 있 도록 깊이 연구 합 시다.

메시지 가 져 오기 및 표시 함수
위의 코드 세 션 에서 getMessage()함 수 를 먼저 실행 한 다음 displayMessage()를 실행 합 니 다.둘 다 브 라 우 저의 콘 솔 창 에 메 시 지 를 표시 하고 즉시 실행 합 니 다.
어떤 경우 에는 일부 코드 가 즉시 실행 되 지 않 는 다.예 를 들 어 getMessage()함수 가 API 호출 을 한다 고 가정 하면 서버 에 요청 을 보 내 고 응답 을 기 다 려 야 합 니 다.이때 우 리 는 어떻게 처리 해 야 합 니까?
어떻게 반전 함 수 를 사용 합 니까?
나 는 너 에 게 자 바스 크 립 트 리 셋 함수 의 문법 을 알려 주 는 것 보다 앞의 예 에서 리 셋 함 수 를 실현 하 는 것 이 더 좋다 고 생각한다.수 정 된 코드 세그먼트 가 아래 캡 처 에 표 시 됩 니 다.

반전 함수 로 메 시 지 를 표시 합 니 다.
리 셋 함 수 를 사용 하기 위해 서 는 결 과 를 즉시 표시 할 수 없 는 작업 을 수행 해 야 합 니 다.이러한 행 위 를 모 의 하기 위해 서,우 리 는 자 바스 크 립 트 의 setTimeout()함 수 를 사용 합 니 다.이 함 수 는 2 초 간 멈 추고 콘 솔 창 에'Hi,there'메 시 지 를 표시 합 니 다.
'표 시 된 메시지'는 브 라 우 저의 콘 솔 창 에 표 시 됩 니 다.이런 상황 에서 우선 getMessage()함 수 를 기 다 려 야 합 니 다.이 함 수 를 성공 적 으로 실행 한 후 displayMessage()함 수 를 실행 합 니 다.
리 턴 방식
앞의 예 가 막후 에서 발생 한 일 을 설명 하 겠 습 니 다.
이전 예 에서 볼 수 있 듯 이 getMessage()함수 에서 우 리 는 두 개의 인 자 를 전달 했다.첫 번 째 매개 변 수 는 msg 변수 입 니 다.이 변 수 는 브 라 우 저의 콘 솔 창 에 표시 되 고 두 번 째 매개 변 수 는 리 셋 함수 입 니 다.
지금,당신 은 왜 리 셋 함 수 를 매개 변수 로 전달 하 는 지 알 고 싶 을 것 입 니 다.리 셋 함 수 를 실현 하려 면,우 리 는 반드시 하나의 함 수 를 매개 변수 로 다른 함수 에 전달 해 야 합 니 다.
getMessage()가 작업 을 완성 한 후에 우 리 는 리 셋 함 수 를 호출 할 것 입 니 다.그 다음 에 getMessage()함 수 를 호출 할 때 인용 을 displayMessage()함수 에 전달 합 니 다.이 함 수 는 리 셋 함수 입 니 다.
getMessage()함 수 를 호출 할 때 이 인용 을 display Message()함수 에 만 전달 합 니 다.이것 이 바로 당신 이 그 옆에서 함수 호출 연산 자,즉()기 호 를 보지 못 하 는 이유 입 니 다.
자 바스 크 립 트 리 셋 은 비동기 인가요?
자 바스 크 립 트 는 단일 스 크 립 트 언어 로 여 겨 집 니 다.단일 스 레 드 는 자바 스 크 립 트 가 코드 블록 을 한 번 에 실행 하 는 것 을 말한다.자 바스 크 립 트 가 블록 을 실행 하 느 라 바 쁠 때 다음 블록 으로 이동 할 수 없습니다.
다시 말 하면 자 바스 크 립 트 코드 는 본질 적 으로 항상 막힌다 고 볼 수 있다.그러나 이러한 차단 성 은 우리 로 하여 금 어떤 상황 에서 코드 를 작성 할 수 없 게 한다.왜냐하면 이러한 상황 에서 우 리 는 특정한 임 무 를 수행 한 후에 바로 결 과 를 얻 을 수 없 기 때문이다.
내 가 이야기 하 는 임 무 는 다음 과 같은 상황 을 포함한다.
4.567917.일부 점 에 대해 API 호출 을 통 해 데 이 터 를 얻 을 수 있 습 니 다4.567917.네트워크 요청 을 통 해 원 격 서버 에서 자원 을 가 져 옵 니 다(예 를 들 어 텍스트 파일,이미지 파일,바 이 너 리 파일 등).
이러한 상황 을 처리 하기 위해 서 는 비동기 코드 를 작성 해 야 하 며,반전 함 수 는 이러한 상황 을 처리 하 는 방법 이다.그래서 본질 적 으로 리 턴 함 수 는 비동기 적 이다.
자 바스 크 립 트 지옥 복귀
여러 비동기 함수 가 하나씩 실 행 될 때 지옥 으로 돌아간다.그것 도 액운 의 피라미드 라 고 불 린 다.
모든 Github 사용자 의 목록 을 가 져 오 려 면그리고 사용자 중에서 자 바스 크 립 트 라 이브 러 리 의 주요 공헌 자 를 검색 합 니 다.그리고 사용자 에 게 John 이라는 이름 을 가 진 사람의 자세 한 정 보 를 얻 으 려 고 합 니 다.
리 셋 의 도움 을 받 아 이 기능 을 실현 하기 위해 코드 는 다음 과 같 아야 합 니 다.

http.get('https://api.github.com/users', function(users) {
  /* Display all users */
  console.log(users);
  http.get('https://api.github.com/repos/javascript/contributors?q=contributions&order=desc', function(contributors) {
  /* Display all top contributors */
    console.log(contributors);
    http.get('https://api.github.com/users/Jhon', function(userData) {
    /* Display user with username 'Jhon' */
      console.log(userData);
    });
  });
});

위의 코드 세 션 에서 코드 가 더욱 이해 하기 어렵 고 유지 하기 어렵 고 수정 하기 어 려 운 것 을 볼 수 있 습 니 다.이것 은 반전 함수 의 내장 으로 인해 발생 한 것 이다.
어떻게 지옥 으로 되 돌아 가 는 것 을 피 합 니까?
지옥 으로 돌아 가 는 것 을 피하 기 위해 다양한 기술 을 사용 할 수 있다.다음 과 같다.
사용 promiseasync-await 의 도움 을 받다.
async.js 라 이브 러 리 사용
Async.js 라 이브 러 리 사용 하기
async.js 라 이브 러 리 로 지옥 으로 돌아 가 는 것 을 피 하 는 방법 에 대해 이야기 합 시다.
async.js 공식 사이트 의 설명 에 따 르 면 Async 는 도구 모듈 로 직접적 이 고 강력 한 함 수 를 제공 하여 비동기 자 바스 크 립 트 를 사용 합 니 다.
Async.js 는 모두 약 70 개의 함 수 를 제공 합 니 다.이제 우 리 는 그 중 두 가지,즉 async.waterfall()과 async.series()만 토론 할 것 이다.
async.waterfall()
당신 이 어떤 임 무 를 하나씩 실행 하고 결 과 를 이전 임무 에서 다음 임무 로 전달 하려 고 할 때,이 함 수 는 매우 유용 합 니 다.함수'퀘 스 트'배열 과 최종'리 셋'함수 가 필요 합 니 다.'퀘 스 트'배열 의 모든 함수 가 완 료 된 후에 오류 대상 으로'리 셋'을 호출 한 후에 호출 됩 니 다.

var async = require('async');
async.waterfall([
    function(callback) {
      /*  
        Here, the first argument value is null, it indicates that
        the next function will be executed from the array of functions.
        If the value was true or any string then final callback function
        will be executed, other remaining functions in the array 
        will not be executed.
      */
        callback(null, 'one', 'two');
    },
    function(param1, param2, callback) {
        // param1 now equals 'one' and param2 now equals 'two'
        callback(null, 'three');
    },
    function(param1, callback) {
        // param1 now equals 'three'
        callback(null, 'done');
    }
], function (err, result) {
    /*
      This is the final callback function.
      result now equals 'done'
    */
});

async.series()
함 수 를 실행 하고 모든 함수 가 성공 적 으로 실 행 된 후에 결 과 를 가 져 와 야 할 때 유용 합 니 다.async.waterfall()과 async.series()간 의 주요 차이 점 은 async.series()가 한 함수 에서 다른 함수 로 데 이 터 를 전달 하지 않 는 다 는 것 이다.

async.series([
    function(callback) {
        // do some stuff ...
        callback(null, 'one');
    },
    function(callback) {
        // do some more stuff ...
        callback(null, 'two');
    }
],
// optional callback
function(err, results) {
    // results is now equal to ['one', 'two']
});

자 바스 크 립 트 리 셋 및 패키지 닫 기
폐쇄 하 다
기술 용어 로 볼 때 패 키 지 는 한데 묶 인 함수 의 조합 으로 그 주위 의 상 태 를 인용 했다.
쉽게 말 하면 패 킷 을 닫 으 면 내부 함수 에서 외부 함수 의 역할 영역 에 접근 할 수 있 습 니 다.
패 킷 을 사용 하려 면 한 함수 내부 에서 다른 함 수 를 정의 해 야 합 니 다.그런 후에 우 리 는 그것 을 다른 함수 에 되 돌려 주거 나 전달 해 야 한다.
리 턴
개념 적 으로 리 셋 은 폐쇄 와 유사 하 다.리 셋 은 기본적으로 하나의 함 수 를 다른 함수 로 하 는 용법 이다.
마지막 말
본 고 는 자 바스 크 립 트 리 셋 함수 에 대한 모든 의문 을 없 앨 수 있 기 를 바 랍 니 다.이 글 이 도움 이 된다 고 생각한다 면 다른 사람과 공유 하 세 요.
자 바스 크 립 트 리 셋 함수 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.자 바스 크 립 트 리 셋 함수 에 관 한 더 많은 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!