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

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

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

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

1. 함수문

JavaScript에서는 함수문을 사용하여 함수를 선언할 수 있습니다. 구체적인 사용법은 다음과 같습니다.

function funName([args]) {
    statements
}

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는 생성된 함수의 함수 구조 문을 나타내며, body 문은 다음과 같습니다. 세미콜론으로 구분됩니다.

예제 1

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

var f = new Function ("a", "b", "return a+b");  //通过构造函数来克隆函数结构

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

function f(a, b) {  //使用function语句定义函数结构
    return a + b;
}

예제 2

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

var f = new Function();  //定义空函数

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

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

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

function ([args]) {
    statements
}

예제 1

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

function (a, b) {  //函数直接量
    return a + b;
}

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

예제 2

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

//把函数作为一个值直接赋值给变量 f
var f = function (a, b) {
    return a + b;
};

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

console.log(f(1,2));  //返回值3

예제 3

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

console.log(  //把函数作为一个操作数进行调用
    (function (a,b) {
        return a + b;
    })(1, 2));  //返回数值3

4. 화살표 함수

화살표 함수는 es6의 함수의 약어입니다. 화살표 함수에는 자체 this가 없으며, 값이 결정됩니다. 이것은 이전 레이어의 것입니다.

//箭头函数
const sayName = ()=>{
    console.log("箭头函数")
}

二：调用函数

一旦定义好了一个函数，我们就可以在当前文档的任意位置来调用它。调用函数非常简单，只需要函数名后面加上一个括号即可，例如 alert()、write()。注意，如果在定义函数时函数名后面的括号中指定了参数，那么在调用函数时也需要在括号中提供对应的参数。

示例代码如下：

function sayHello(name){
    document.write("Hello " + name);
}
// 调用 sayHello() 函数
sayHello('PHP中文网');

提示：JavaScript 对于大小写敏感，所以在定义函数时 function 关键字一定要使用小写，而且调用函数时必须使用与声明时相同的大小写来调用函数。

【相关推荐：javascript学习教程】

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