책 한 권을 읽어서 귀속과 호출 창고를 해석하다

귀속은 모든 프로그래밍 언어 중에서 가장 사람을 흥분시키는 원칙 중의 하나이다.
비귀속 함수 (과거에 사용한 함수) 는 호출할 때마다 한 번 실행되고 되돌아오는 문장을 통해 출력됩니다.
그러나 귀속 함수는 한 번 호출할 수 있으며, 모든 함수 호출의 출력을 되돌아오는 문장에 합치기 전에 자신의 호출 횟수가 확실하지 않습니다.
약간 이렇게.
정적 버전:

동적 버전:

하나의 함수는 한 문장을 통해 무한히 호출될 수 있다는 생각은 그것을 이렇게 흥분시킨다.
동시에 현실 세계의 상황이 이와 유사하다고 상상하기 어렵다.일단 우리가 창고를 호출하는 것에 대해 토론한다면, 그것은 매우 어려워질 것이다. 우리는 뒤에서 토론할 것이다.
일부 사람들은 일련의 무한 상자를 제기했다.
이미지 신뢰성: Grokking Algorithm
다른 사람들은'러시아 둥지 인형'의 이미지를 제시했다.

그러나 창고를 호출하는 것을 이해할 때 이것도 무익하다.
따라서 본 강좌에서 우리는 두 가지 유행하는 귀속 예시를 보여주고 함수와 호출 창고를 이해하기 위해 시각화된 언어를 구축할 것이다. 이것은 한 줄의 많은 함수 호출을 어떻게 이해하는지를 결정한다.
이 강좌를 계속 공부하기 전에 자바스크립트의 함수에 대해 깊이 있게 이해해야 합니다.Check out this guide to arrow functions 자세한 내용

예 1 - 계층 곱하기

계승은 귀속의 가장 흔히 볼 수 있는 예이다.
너는 대수 수업의 계승에 익숙할 것이다.
그들의 표현 방식은 다음과 같다. 3!
이 기호의 계산 결과는 3*2*1 또는 6이다.
우리는 이를 "for"순환으로 표시할 수 있으며, 순환 이외의 변수를 업데이트할 수 있습니다.

let factorial = 4;
let result = 1;

for (i=factorial; i>= 1; i--){
    result = result*i;
}

하지만, 이곳에서 우리는 귀속을 사용할 것이다.우리는 함수에 대해 반복적으로 n-1 호출을 할 수 있으며, 그 범위 밖의 변수를 순환적으로 업데이트하는 것이 아니라, 그 중에서 n은 우리가 찾고 싶은 계승이다.
나는 먼저 코드를 보여줄 것이다. 그리고 우리는 그것이 어떻게 작동하는지 평가할 수 있다.

let getFactorial = (num) => {
  if (num == 1)
    return 1;
  else
    return num * getFactorial(num-1);
}

getFactorial(4);
// 24

와!이것은 위의 코드 블록과 같은 일을 완성한다.
단, 다섯 번째 줄을 보면return 문장이 함수 자체에 대한 인용을 포함하는 것을 볼 수 있습니다.
그럼...이 함수는 언제 최종 값을 되돌려줍니까?우리는 어떻게 함수의 네 개의 호출을 한데 연결하여 24의 값을 되돌려줍니까?
이것이 바로 창고를 호출하여 유용하게 만드는 곳이다.이것은 이 함수 호출이 되돌아올 순서 규칙을 확정했다.
그러나 이제 우리는 두 가지 개념을 한데 쌓았다. 그것이 바로 귀속과 호출 창고이다.이것은 한 번에 매우 많다.
가시화 호출 창고를 위해 왼쪽에서 오른쪽으로 구축된 창고를 고려해 봅시다.블록을 추가할 때마다 스택의 왼쪽에 추가하고 다른 블록을 오른쪽으로 밀어냅니다.
따라서 이 귀속 함수를 반복할 때 다음과 같은 스택을 생성합니다.

전체 GIF 화면 하단에 스택을 호출합니다.마지막으로, 우리는 1*2*3*4만 남았고, 결과는 24였다.
호출 창고는 4개의 함수 호출로 구성되어 있으며, 함수가 1로 되돌아오기 전까지는 실행되지 않습니다.이 예에서는 마지막 값이 추가될 때까지 스택에 있습니다.
이것은 이전 3개의 호출 중 하나하나가 창고의 다음 호출에 대한 인용을 포함하기 때문입니다!
따라서num=4일 때 함수는 4*getFactorial(3)을 되돌려줍니다.물론 getFactorial (3) 의 값을 알기 전까지는 실제로 값을 되돌릴 수 없습니다.이것이 바로 우리가 호출 창고를 필요로 하는 이유다!
따라서 귀속 허용 함수는 한 줄에서 무한히 호출되고 호출 창고를 업데이트합니다. 이 창고는 최종 호출을 실행한 후에 값을 되돌려줍니다.
호출 창고는 왼쪽에서 오른쪽으로 업데이트되며, 모든 호출을 해석 순서에 따라 읽을 수 있습니다.최근의 선해결, 첫 번째 호출이 마지막에 해결됩니다.
그러나, 우리 위의 GIF는 모든 호출 간의 관계를 잘 표시하지 않았다.다음은 업데이트 버전입니다. 리턴 문장을 통해 모든 호출을 연결하는 방법을 보여 줍니다.

예 2 - 버스트 문자열

위의 예에서 우리는 대수 과목의 문제와 유사한 수학 예를 사용했다.
이것은 가능하지만, 수학을 뛰어넘는 귀착적인 예도 많다.이 예에서, 우리는 귀속 조작 문자열을 어떻게 사용하는지 보여줄 것이다.
도전은 문자열을 반전시키는 것이다.
다시 말하면 문자열을 되돌려줍니다. 문자열을 입력하는 자모의 순서가 반대입니다.
"for"순환을 사용해서 이 점을 실현할 수도 있지만, 이 예에서 우리는 귀속을 사용할 것입니다.
문자열'cat'을 어떻게 반전시켜야 할지 생각해 봅시다.
함수 호출을 실행할 때마다 문자열의 첫 번째 또는 마지막 자모를 분리한 다음 문자열에서 자모를 잘라내야 합니다.우리가 이 함수를 다시 실행할 때, 우리는 첫 번째 자모나 마지막 자모를 다시 잡아야 한다.
마지막으로 창고를 호출하면 알파벳을 정확한 순서로 되돌릴 수 있습니다.
코드는 다음과 같습니다.

let testStr = 'cat';

let revStr = (str) => {
  if (str.length == 0)
    return '';
  else
    return revStr(str.substr(1)) + str[0];
};

revStr(testStr);
// 'tac'

할 수 있다우리가 위에서 한 것처럼 깊이 연구합시다.

마찬가지로 위의 GIF는 간단해 보이지만 이 함수 호출을 진정으로 이해하려면 최종 반환 문장을 깊이 연구해야 한다.
위의 예와 비교하면 이 예는 더 중요한 차이가 있다. 우리는 곱셈 대신 문자열 연결을 하고 있다.
따라서 되돌아오는 문장의 문자열의 순서는 매우 중요하다. 왜냐하면 우리가 어떤 순서를 사용하여 직렬로 연결할지 결정하기 때문이다.
이것은 일련의 곱셈 문제가 아니기 때문에 창고를 호출하는 것이 더욱 이해하기 쉽다.이것은 하나의 시각입니다.

이것이 바로 문자열의 순서가 왜 이렇게 중요한가 하는 것이다. 우리가 위의 GIF에서 호출 창고를 구축할 때, 귀속 함수 호출과 문자열 부분 (str[0]) 에 특정한 순서가 있다.
창고에 있는 모든 호출을 실행할 때, 이 순서는 반대의 순서로 문자열을 재구성할 수 있습니다.

최신 강좌 가져오기

당신은 이 강좌를 좋아합니까?최신 비주얼 웹 개발 강좌를 얻기 위해 CodeAnalogies blog 보기.