JavaScript 함수 정의

JavaScript는 함수를 정의하기 위해 키워드 function을 사용합니다.

함수는 선언으로 정의할 수도 있고 표현식일 수도 있습니다.

함수 선언

이전 튜토리얼에서 함수 선언의 구문을 배웠습니다.

function functionName(parameters) {
실행된 코드
}

함수 선언 후에는 즉시 실행되지는 않으며 필요할 때 호출됩니다.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
    function myFunction(a,b){
        return a*b;
    }
    document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</body>
</html>

프로그램을 실행해서 사용해 보세요

Tips: 세미콜론은 실행 가능한 JavaScript 문을 구분하는 데 사용됩니다. 함수 선언은 실행 가능한 문이 아니기 때문에 세미콜론으로 끝나지 않습니다. .

함수 표현식

JavaScript 함수는 표현식으로 정의할 수 있습니다.

함수 표현식을 변수에 저장할 수 있습니다:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可以存储在变量中:</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

프로그램을 실행하여 사용해 보세요

함수 표현식을 변수에 저장한 후 변수를 함수로 사용할 수도 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数存储在变量后，变量可作为函数使用：</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>

프로그램을 실행하여 사용해 보세요. it

위 함수는 사실 익명 함수입니다(함수에는 이름이 없습니다).

함수는 변수에 저장되며 함수 이름이 필요하지 않으며 일반적으로 변수 이름을 통해 호출됩니다.

Tip: 위 함수는 실행문이기 때문에 세미콜론으로 끝납니다.

Function() 생성자

위의 예에서 함수는 function 키워드를 통해 정의된다는 것을 배웠습니다.

함수는 내장된 JavaScript 함수 생성자(Function())를 통해 정의할 수도 있습니다.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>JavaScrip 内置构造函数。</p>
<p id="demo"></p>
<script>
var myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>

프로그램을 실행하고 사용해 보세요

Tip: JavaScript에서는 new 키워드를 사용하지 말아야 할 경우가 많습니다.

실제로 생성자를 사용할 필요는 없습니다. 위의 예는 다음과 같이 작성할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>

프로그램을 실행하고 사용해 보세요

함수 호이스팅(Hoisting)

이전 튜토리얼에서 우리는 이미 "호이스팅(hoisting)"에 대해 배웠습니다.

호이스팅은 현재 범위를 앞으로 끌어올리는 JavaScript의 기본 동작입니다.

호이스팅은 변수 선언과 함수 선언에 적용됩니다.

따라서 함수는 선언되기 전에 호출될 수 있습니다.

myFunction(5);

function myFunction(y) {
Return y * y;
}

함수를 사용하여 함수를 정의할 때는 호이스트할 수 없습니다. 표현.

자체 호출 함수

함수 표현식은 "자체 호출"이 가능합니다.

자기 호출 표현이 자동으로 호출됩니다.

표현식 뒤에 ()가 오면 자동으로 호출됩니다.

선언된 함수를 직접 호출할 수 없습니다.

괄호를 추가하여 함수 표현식임을 나타냅니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可以自动调用：</p>
<p id="demo"></p>
<script>
(function () {
    document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>
</body>
</html>

프로그램을 실행하여 사용해 보세요

위 함수는 실제로 익명의 자체 호출 함수입니다(함수 이름 없음).

함수를 값으로 사용할 수 있음

JavaScript 함수를 값으로 사용할 수 있음:

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可作为一个值：</p>
<p>x = myFunction(4,3) 或 x = 12</p>
<p>两种情况下，x 的值都为 12。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

프로그램을 실행하여 사용해 보세요.

JavaScript 함수는

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可作为一个表达式使用。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

프로그램을 실행하고 사용해 보세요

Function은 객체입니다

JavaScript에서 typeof 연산자를 사용하여 함수 유형을 결정하면 "function"이 반환됩니다.

하지만 JavaScript 함수는 객체로 더 정확하게 설명됩니다.

JavaScript 함수에는 속성과 메서드가 있습니다.

arguments.length 속성은 함수 호출 중에 받은 매개변수 수를 반환합니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p> arguments.length 属性返回函数接收到参数的个数：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>

프로그램을 실행하고 사용해 보세요.

toString() 메서드는 함수를 문자열로 반환합니다. :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p> toString() 将函数作为一个字符串返回：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>

프로그램을 실행하고 한번 시도해 보세요

Tips: 객체의 속성으로 정의된 함수를 객체 메서드라고 합니다. 해당 함수를 사용하여 새 객체를 생성하는 경우 이를 생성자라고 합니다. 물체.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>本例调用的函数会执行一个计算，然后返回结果：</p> <p id="demo"></p> <script> function myFunction(a,b){ return a*b; } document.getElementById("demo").innerHTML=myFunction(4,3); </script> </body> </html>

제출하다 코드 재설정

자동운전