JS에서 함수의 중요성

이번에는 JS에서 함수의 중요성과 JS에서 함수를 사용할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

object이므로 다음을 수행할 수 있습니다.

1. 리터럴을 통해 생성

2. 변수, 배열 요소 및 properties(속성)

   에 할당

3. 은 함수

4. 에는

5. 동적으로 생성 및 할당할 수 있는 속성이 포함되어 있습니다. 위의 개체는 함수가 다른 개체와 다릅니다. 개체를 호출할 수 있습니다.

JS에는 변수 호이스팅(variable hoisting)이 있습니다. 변수가 var로 선언되면 즉시 현재 범위의 맨 위로 승격됩니다(let 및 const로 선언된 변수는 그렇지 않음). 예:

1 function a() {2     console.log(b);3     var b = 10;4 }5 a();  //undefined

위 코드의 실행 결과는 정의되지 않았습니다. 그 이유는 var를 통해 b 변수가 선언되면 변수 승격이 발생하고 즉시 현재 범위의 최상위로 승격되기 때문입니다 (b가 아직 정의되지 않은 경우 선언 직후 승격이 발생한다는 점에 유의하세요!)

, this 시간의 "현재 범위"는 함수 a의 범위입니다. 따라서 위의 코드는 실제로는 다음과 같습니다.

1 function a() {2     var b;  //变量的声明被提升至当前作用域顶部3     console.log(b);4     b = 10;5 }6 a();

변수 b의 선언은 두 번째 줄로 승격되고(선언만 승격됨) 이때 b에는 값이 할당되지 않으므로 코드는 계속해서 콘솔의 세 번째 줄까지 실행합니다. log(b)이면 undefound가 출력됩니다.

JS에는 변수 승격 외에도 "기능 승격"도 있습니다. 같은 방식으로 함수도 승격되지만 해당 기능은 단순히 선언된 승격이 아니라 "전체 승격"입니다. 아래 코드를 봐주세요.

1 function a() {2     b();3     function b() {4         console.log("yes!");5     }6 }7 a();  //yes!

이 시점에서는 b 함수가 정상적으로 실행될 수 있습니다. 이는 바로 함수가 승격되어 "전체적으로 승격"되어 b()가 정상적으로 실행될 수 있기 때문입니다. 이 코드는 실제로 다음과 같습니다.

1 function a() {2     function b() {3         console.log("yes!");4     }5     b();6 }7 a();  //yes!

일반 형식으로 선언된 함수만 승격될 수 있다는 점에 유의하세요!

예:

1 function a() {2     b();3     var b = function() {        //字面量声明的函数4         console.log("yes!");5     }6 }7 a();  //报错

여기의 익명 함수는 리터럴을 통해 선언되므로 함수 승격이 없으며 오류가 보고됩니다.

그런데 변수와 함수를 동시에 선언하면 누가 우선권을 갖게 될까요?

JS에서 함수를 "일급 시민"이라고 부르는 이유 중 하나는 승격이 발생하면 해당 함수가 범위의 최상위로 승격된다는 것입니다! 예:

1 function a() {2     var b = 10;3     function b () {4         console.log("yes！");5     }6     console.log(b);7     console.log(typeof b);8 }9 a();    //10  number

이 코드에서 변수 b의 선언은 호이스팅되지만 "일급 시민"인 함수는 변수 b의 선언 위에 호이스팅됩니다. 코드 실행 단계에서는 b에 10이 할당되므로 출력 결과는 b가 10이고 유형이 숫자가 됩니다. 이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

WeChat 미니 프로그램에서 양방향 데이터 바인딩을 구현하는 방법

JavaScript에 최적화된 DOM

Webpack 모듈 사용

위 내용은 JS에서 함수의 중요성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!