JavaScript 함수 호출

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

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

이 키워드

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

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

JavaScript 함수 호출

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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()은 동일합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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의 값은 창 개체입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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>

함수는 전역 개체로 호출되어 this의 값이 전역 개체가 됩니다.
창 개체를 변수로 사용하면 프로그램이 쉽게 중단될 수 있습니다.

메소드로 함수 호출

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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>

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

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

함수 메서드로 함수 호출

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

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

Instance

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

Instance

function myFunction(a, b) {
    return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);   // 返回 20

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

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

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

call() 또는 apply() 메소드를 사용하면 이 값을 설정하고 기존 객체의 새 메소드로 호출할 수 있습니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </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>

제출하다 코드 재설정

자동운전