JavaScript 함수 호출

JavaScript 함수에는 4가지 호출 방법이 있습니다.

각 방법의 차이점은 초기화에 있습니다.

이 키워드

일반적으로 Javascript에서 함수가 실행될 때 현재 개체를 가리킵니다.

Note: 이것은 예약된 키워드이므로 이 값을 수정할 수 없습니다.

JavaScript 함수 호출

이전 장에서 우리는 함수를 만드는 방법을 배웠습니다.

함수 내부의 코드는 함수가 호출된 후에 실행됩니다.

함수로 호출하기

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>
全局函数 (myFunction) 返回参数参数相乘的结果：
</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>
</body>
</html>

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

위 함수는 어떤 객체에도 속하지 않습니다. 그러나 JavaScript에서는 항상 기본 전역 객체입니다.

HTML의 기본 전역 개체는 HTML 페이지 자체이므로 해당 기능은 HTML 페이지에 속합니다.

브라우저의 페이지 개체는 브라우저 창(창 개체)입니다. 위의 함수는 자동으로 창 개체의 함수가 됩니다.

myFunction() 및 window.myFunction()은 동일합니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>全局函数 myFunction() 会自动成为 window 对象的方法。</p>
<p>myFunction() 类似于 window.myFunction()。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10, 2); 
</script>
</body>
</html>

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

팁: 이는 JavaScript 함수를 호출하는 일반적인 방법이지만 좋은 프로그래밍 습관, 전역 변수, 메소드 또는 함수로 인해 이름 충돌 버그가 쉽게 발생할 수 있습니다.

전역 객체

함수가 자체 객체에 의해 호출되지 않으면 this의 값이 전역 객체가 됩니다.

웹 브라우저에서 전역 개체는 브라우저 창(창 개체)입니다.

이 인스턴스에서 반환된 this 값은 창 개체입니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>在 HTML 中 <b>this</b> 的值, 在全局函数是一个 window 对象。</p>
<p id="demo"></p>
<script>
function myFunction() {
return this;
}
document.getElementById("demo").innerHTML = myFunction(); 
</script>
</body>
</html>

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

참고: 함수가 전역 개체로 호출되면 이것이 전역 객체가 됩니다. 창 개체를 변수로 사용하면 프로그램이 쉽게 중단될 수 있습니다.

메서드로서의 함수 호출

JavaScript에서는 함수를 객체의 메서드로 정의할 수 있습니다.

다음 예에서는 두 개의 속성(firstName 및 lastName)과 메서드(fullName)가 있는 개체(myObject)를 만듭니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>myObject.fullName() 返回 John Doe:</p>
<p id="demo"></p>
<script>
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function() {
return this.firstName + " " + this.lastName;
    }
}
document.getElementById("demo").innerHTML = myObject.fullName(); 
</script>
</body>
</html>

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

fullName 메서드는 함수입니다. 함수는 객체에 속합니다. myObject는 함수의 소유자입니다.

이 개체에는 JavaScript 코드가 포함되어 있습니다. 인스턴스에서 이 값은 myObject 개체입니다.

아래에서 테스트해보세요! fullName 메서드를 수정하고 이 값을 반환합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>在一个对象方法中 ，<b>this</b> 的值是对象本身。</p>
<p id="demo"></p>
<script>
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function() {
return this;
    }
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>

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

Tips: 함수가 개체 메서드로 호출되면 this의 값이 개체 자체가 됩니다.

생성자를 사용하여 함수 호출

함수 호출 전에 new 키워드를 사용하면 생성자가 호출됩니다.

새 함수가 생성된 것처럼 보이지만 실제로는 JavaScript 함수가 객체를 다시 생성한 것입니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>该实例中， myFunction 是函数构造函数:</p>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
this.firstName = arg1;
    this.lastName  = arg2;
}
var x = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = x.firstName; 
</script>
</body>
</html>

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

생성자를 호출하면 새 객체가 생성됩니다. 새 객체는 생성자의 속성과 메서드를 상속합니다.

Tips: 생성자의 this 키워드에는 값이 없습니다. this의 값은 함수가 호출될 때 객체(새 객체)가 인스턴스화될 때 생성됩니다.

함수 메서드로 함수 호출하기

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

call() 및 apply()는 미리 정의된 함수 메서드입니다. 두 가지 메서드를 사용하여 함수를 호출할 수 있으며, 두 메서드 모두의 첫 번째 매개 변수는 개체 자체여야 합니다.

function myFunction(a, b) {
return a * b;
}
myFunction.call(myObject, 10, 2); // Return 20

function myFunction(a, b) {
return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray); // 20을 반환합니다

두 방법 모두 개체 자체를 첫 번째 매개변수로 사용합니다. 둘 사이의 차이점은 두 번째 매개변수에 있습니다. Apply는 매개변수 배열로 전달됩니다. 즉, 여러 매개변수가 하나의 배열로 결합되어 전달되는 반면, call은 호출의 매개변수로 전달됩니다(두 번째 매개변수부터 시작).

JavaScript 엄격 모드에서는 매개변수가 객체가 아니더라도 함수를 호출할 때 첫 번째 매개변수가 this의 값이 됩니다.

JavaScript 비엄격 모드에서는 첫 번째 매개변수의 값이 null이거나 정의되지 않은 경우 전역 개체를 대신 사용합니다.

Tips: call() 또는 apply() 메서드를 통해 이 값을 설정하고 기존 개체의 새 메서드로 호출할 수 있습니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> 全局函数 (myFunction) 返回参数参数相乘的结果： </p> <p id="demo"></p> <script> function myFunction(a, b) { return a * b; } document.getElementById("demo").innerHTML = myFunction(10, 2); </script> </body> </html>

제출하다 코드 재설정

자동운전