JavaScript 함수 호출
- 이전 페이지 JS 함수 매개변수
- 다음 페이지 JS 함수 Call
JavaScript 함수 내의 코드는 '언제든지' 호출하는 '것'에 의해 실행됩니다.
JavaScript 함수 호출
함수가정의할 때, 함수 내의 코드는 실행되지 않습니다.
함수가호출할 때, 함수 내의 코드가 실행됩니다.
함수 호출은 또한 '함수 시작' 또는 '함수 실행'라고도 합니다.
이 튜토리얼에서, 우리는 "호출”。
함수를 함수로 호출합니다
인스턴스
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // 20을 반환합니다
위 함수는 어떤 객체에도 속하지 않습니다. 하지만 JavaScript에서는 항상 기본 전역 객체가 존재합니다.
HTML에서, 기본 전역 객체는 HTML 페이지 자체입니다. 위의 모든 함수는 HTML 페이지에 '속합니다'.
브라우저에서, 이 페이지 객체는 브라우저 창입니다. 위의 함수는 자동으로 창 함수가 됩니다.
myFunction()과 window.myFunction()은 동일한 함수입니다：
인스턴스
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // 반환된 값도 20입니다
함수 호출의 일반적인 방법입니다만, 좋은 습관이 아닙니다.
전역 변수, 메서드 또는 함수는 전역 객체에서 명명 충돌과 취약점을 쉽게 발생시킬 수 있습니다.
this 키워드
JavaScript에서 this 의 것을 가리킵니다. 현재 코드를 "소유" 하는 객체를 가리킵니다.
this 의 값은 함수에서 사용될 때, "소유" 함수의 객체입니다.
주의하세요 this 변수가 아닙니다. 키워드입니다. 변경할 수 없습니다 this 의 값입니다.
전역 객체
소유자 객체 없이 객체를 호출할 때this 의 값이 전역 객체가 됩니다.
웹 브라우저에서 전역 객체는 브라우저 객체입니다.
이 예제는 this 의 값은 다음과 같이 반환된 window 객체입니다：
인스턴스
var x = myFunction(); // x는 window 객체가 됩니다
function myFunction() {
return this;
}
함수를 전역 함수로 호출하면 this 의 값이 전역 객체가 됩니다.
window 객체를 변수로 사용하면 프로그램이 고장날 수 있습니다.
함수를 메서드로 호출합니다
JavaScript에서는 함수를 객체 메서드로 정의할 수 있습니다.
다음 예제는 객체(myObject)를 생성하여 두 가지 속성(firstName, lastName)과 하나의 메서드(fullName)을 가지고 있습니다：
인스턴스
var myObject = {
firstName: "Bill",
lastName: "Gates",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 반환된 값은 "Bill Gates"입니다
fullName 메서드는 함수입니다. 이 함수는 객체에 속합니다. myObject는 함수의 소유자입니다.
라고 불립니다 this 의 것은 "소유" 이코드의 객체입니다. 이 예제에서는،this 의 값은 myObject입니다.
테스트해 보세요! fullName 메서드를 수정하여 반환할 this 의 값은：
인스턴스
var myObject = {
firstName: "Bill",
lastName: "Gates",
fullName: function () {
return this;
}
}
myObject.fullName(); // 반환된 값은 [object Object] (소유자 객체)입니다
객체 메서드로 함수를 호출하면 this 의 값이 객체 본체가 됩니다。
함수 생성자를 통해 함수를 호출하는 방법
함수 호출의 앞에 new 키워드가 있으면 이는 생성자 호출입니다。
이는 새로운 함수를 생성하는 것처럼 보이지만, JavaScript 함수는 객체이므로 실제로 새로운 객체를 생성합니다：
인스턴스
// 이는 함수 생성자입니다：
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// 새로운 객체를 생성했습니다：
var x = new myFunction("Bill", "Gates");
x.firstName; // "Bill"을 반환합니다"
생성자 호출은 새로운 객체를 생성합니다. 새로운 객체는 생성자에서 상속받은 속성과 메서드를 가집니다。
생성자 내부 this 키워드 값이 없습니다。
this 의 값이 함수 호출 시 생성되는 새로운 객체가 됩니다。
- 이전 페이지 JS 함수 매개변수
- 다음 페이지 JS 함수 Call
