홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

JS 커스텀 함수 선언 및 호출에 대한 심층 분석

저자：Eve Cole 업데이트 시간：2022-08-04 09:02:18
함수는 특정 작업을 수행하는(특정 기능이 있는) 재사용 가능한 코드 블록 세트입니다. 내장 함수를 사용하는 것 외에도 자체 함수(사용자 정의 함수)를 생성한 다음 필요할 때 이 함수를 호출할 수도 있습니다. 이렇게 하면 반복되는 코드 작성을 피할 수 있을 뿐만 아니라 나중에 코드를 쉽게 유지 관리할 수도 있습니다.

1: 함수를 선언하는 여러 가지 방법

JavaScript에서 사용자 정의 함수를 선언하는 방법에는 세 가지가 있습니다. 즉, 함수 명령문 사용, Function() 생성자 사용, 함수 리터럴 정의입니다.

1. 함수문

자바스크립트에서는 함수문을 사용해 함수를 선언할 수 있습니다. 구체적인 사용법은 다음과 같습니다:

function funName([args]) {
    진술
}

funName은 변수 이름과 마찬가지로 유효한 JavaScript 식별자여야 하는 함수 이름입니다. 함수 이름 뒤에는 괄호로 묶이고 쉼표로 구분된 매개변수 목록이 있습니다. 매개변수는 선택사항이며 개수에는 제한이 없습니다.

식별자로서 매개변수는 함수 본문 내에서만 액세스됩니다. 매개변수는 함수 범위의 비공개 멤버입니다. 함수를 호출할 때 함수에 값을 전달한 다음 매개변수를 사용하여 외부에서 전달된 값을 얻고 함수 본문 내에서 함수 실행에 개입합니다.

괄호 뒤에는 중괄호가 있고, 중괄호 안에 포함된 명령문이 함수 본문 구조의 주요 내용입니다. 함수 본문에서 중괄호는 필수입니다. 중괄호가 없으면 JavaScript는 구문 오류를 발생시킵니다.

예제

함수 문에는 함수 이름, 괄호, 중괄호가 포함되어야 하며 다른 코드는 생략될 수 있으므로 가장 간단한 함수 본문은 빈 함수입니다.

function funName() {} //빈 함수

익명 함수를 사용하는 경우 함수 이름을 생략할 수 있습니다.

function () {} //익명의 빈 함수

var 문과 function 문은 모두 선언문이며, 이들이 선언하는 변수와 함수는 JavaScript가 미리 컴파일될 때 구문 분석됩니다. 이를 변수 승격 및 함수 승격이라고도 합니다. 사전 컴파일 기간 동안 JavaScript 엔진은 각 함수에 대한 컨텍스트를 생성하고, 변수 개체를 정의하고, 함수의 모든 형식 매개변수, 전용 변수 및 중첩 함수를 변수 개체의 속성으로 등록합니다.

2. Function() 생성자

Function() 생성자를 사용하면 함수를 빠르게 생성할 수 있습니다. 구체적인 사용법은 다음과 같습니다.

var funName = new Function(p1, p2, ..., pn, body);

Function()의 매개변수 유형은 모두 문자열입니다. p1~pn은 생성된 함수의 매개변수 이름 목록을 나타냅니다. body는 생성된 함수의 함수 구조 명령문을 나타내며 본문 문 사이에 세미콜론으로 구분됩니다.

예제 1에서는

모든 매개변수를 생략하고 함수 본문을 나타내는 문자열만 전달할 수 있습니다.

var f = new Function ("a", "b", "return a+b"); //생성자를 통해 함수 구조를 복제합니다.

위 코드에서 f는 생성된 함수의 이름입니다. 동일한 함수를 정의하고, 동일한 구조의 함수를 function문을 이용하여 설계할 수 있습니다.

function f(a, b) { //함수 구문을 사용하여 함수 구조를 정의합니다. return a + b;
}

예제 2에서는

Function() 생성자를 사용하여 매개변수를 지정하지 않고 빈 함수 구조를 만듭니다.

var f = new Function(); //

Function() 생성자를 사용하여 함수 문에 의해 미리 선언된 함수 본문으로 사용자를 제한하지 않습니다. Function() 생성자를 사용하면 함수를 구조가 아닌 표현식으로 사용할 수 있으므로 더 유연하게 사용할 수 있습니다. 단점은 Function() 생성자가 실행 중에 컴파일되고 실행 효율성이 매우 낮으며 일반적으로 사용이 권장되지 않는다는 것입니다.

3. 익명 함수(함수 리터럴)

함수 리터럴은 익명 함수라고도 합니다. 즉, 함수에는 함수 이름이 없고 함수 키워드, 매개변수 및 함수 본문만 포함됩니다. 구체적인 사용법은 다음과 같습니다:

function ([args]) {
    진술
}

예제 1

다음 코드는 함수 리터럴을 정의합니다.

function (a, b) { //함수 리터럴 return a + b;
}

위 코드에서 함수 리터럴은 기본적으로 함수 구문을 사용하여 함수 구조를 정의하는 것과 동일하며 해당 구조는 고정되어 있습니다. 그러나 함수 리터럴은 함수 이름을 지정하지 않고 function 키워드를 직접 사용하여 함수의 구조를 나타냅니다.

예제 2

익명 함수는 함수 구조의 명령문이 아닌 표현식, 즉 함수 표현식입니다. 다음으로 익명 함수를 변수 f에 값으로 할당합니다.

//함수를 변수 f에 직접 값으로 할당
var f = 함수 (a, b) {
    a + b를 반환합니다.
};

함수 구조가 변수에 값으로 할당되면 변수는 함수로 호출될 수 있으며 변수는 익명 함수를 가리킵니다.

console.log(f(1,2)); //반환값 3

1.png

예시 3

익명 함수는 값 역할을 하며 보다 복잡한 표현식 작업에 참여할 수 있습니다. 위의 예에서는 다음 코드를 사용하여 함수 정의 및 호출의 통합 작업을 완료할 수 있습니다.

console.log( //함수를 피연산자로 호출합니다(function (a,b) {
        a + b를 반환합니다.
    })(1, 2)); //반환값 3

2.png

2: 함수 호출

함수가 정의되면 현재 문서의 어느 곳에서나 호출할 수 있습니다. 함수를 호출하는 것은 매우 간단합니다. 함수 이름 뒤에 경고(), 쓰기()와 같이 대괄호를 추가하기만 하면 됩니다. 함수를 정의할 때 함수 이름 뒤 괄호 안에 매개변수를 지정했다면, 함수 호출 시 해당 매개변수를 괄호 안에 넣어야 한다는 점에 유의하세요.

샘플 코드는 다음과 같습니다.

function sayHello(name){
    document.write("안녕하세요 " + 이름);
}
//sayHello() 함수 호출 sayHello('PHP 중국어 웹사이트');

3.png

팁: JavaScript는 대소문자를 구분하므로 함수를 정의할 때 function 키워드는 소문자여야 하며 함수는 선언할 때와 동일한 대소문자로 호출되어야 합니다.

위 내용은 JS 사용자 정의 함수의 선언 및 호출에 대한 심층 분석입니다. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 참고하세요!
관련 기사