-
[javascript] 51. 함수 호출(function invocation) - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:34
JavaScript Function Invocation
자바스크립트 함수는 4가지 방식으로 호출될 수 있습니다.
1. The this Keyword
자바스크립트에서, 하나의 것을 this라 부르는 이것을 현재 코드에서 자기자신을 지칭하는 객체입니다.
(In JavaScript, the thing called this, is the object that "owns" the current code.)
함수에서 사용할 때, this의 값은 함수 자신의 객체 입니다.
2. Invoking a JavaScript Function
함수의 코드는 함수가 선언 될 때 실행되는 것이 아닙니다. 함수가 호출 될 때, 실행되는 것입니다.
3. Invoking a Function as a Function
1234function myFunction(a, b) {return a * b;}myFunction(10, 2); // myFunction(10, 2) will return 20cs 위 함수는 어떤 객체에도 속해있지 않습니다.
HTML에서 가장 기본적인 전역 객체는 HTML 페이지 자신입니다. 그러므로 위의 함수는 HTML 페이지에 속하게 됩니다.
브라우저에서, 페이지 객체는 브라우저 윈도우 입니다. 위의 함수는 자동적으로 윈도우 함수가 됩니다.
myFunction()과 window.myFunction()은 같은 함수 입니다.
1234function myFunction(a, b) {return a * b;}window.myFunction(10, 2); // window.myFunction(10, 2) will also return 20cs 4. The Global Object
자신만의 객체없이 함수가 호출 될 때, this의 값은 전역 객체가 됩니다.
웹 브라우저에서 전역 객체는 브라우저 윈도우 입니다.
아래 예제는 this의 값으로 윈도우 객체를 반환합니다:
1234567891011121314151617181920<!DOCTYPE html><html><body><p>In HTML the value of <b>this</b>, in a global function, is the window object.</p><p id="demo"></p><script>function myFunction() {return this;}document.getElementById("demo").innerHTML = myFunction();</script></body></html>cs 5. Invoking a Function as a Method
함수 선언을 객체 메소드로 선언 할수 있습니다.
아래 예제는 객체(myObject)를 만들고, 두개의 속성(firstName과 lastName)과 메소드(fullName)을 포함합니다:
123456789var myObject = {firstName:"John",lastName: "Doe",fullName: function () {return this.firstName + " " + this.lastName;}}myObject.fullName(); // Will return "John Doe"cs fullName 메소드는 함수입니다. 함수는 객체에 속해 있습니다.
myObject가 함수의 주인입니다.
위 예제에서의 this 값은 my Object가 됩니다.
12345678var myObject = {firstName:"John",lastName: "Doe",fullName: function () {return this;}}myObject.fullName(); // Will return [object Object] (the owner object)cs 6. Invoking a Function with a Function Constructor
함수 호출이 new 키워드가 앞에 나오게 되서 호출 되면, 생성자 호출 입니다.
이것은 새로운 함수를 생성하는 것처럼 보입니다, 그러나 사실상 새로운 객체를 생성한 것입니다:
123456789// This is a function constructor:function myFunction(arg1, arg2) {this.firstName = arg1;this.lastName = arg2;}// This creates a new objectvar x = new myFunction("John","Doe");x.firstName; // Will return "John"cs 생성자 호출은 새로운 객체를 생성합니다. 새로운 객체는 생성자의 속성과 메소드를 상속 받습니다.
7. Invoking a Function with a Function Method
자바스크립트에서, 함수는 객체입니다. 함수는 속성과 메소드를 갖습니다.
call()과 apply()는 미리 선언된 자바스크립트 함수 메소드입니다.
두 메소드는 함수 호출 시 사용되어 지고, 첫 매개변수로 주인 객체(owner object)를 갖습니다.
1234function myFunction(a, b) {return a * b;}myFunction.call(myObject, 10, 2); // Will return 20cs 12345function myFunction(a, b) {return a * b;}myArray = [10,2];myFunction.apply(myObject, myArray); // Will also return 20cs 두 메소드의 차이점은 call()은 함수 인자를 각각 넘겨 받고, apply()는 배열로 인자를 넘겨 받습니다.
'Web > JavaScript' 카테고리의 다른 글
[javascript] 54. DOM 메소드(DOM method) - 자바스크립트 강좌 (0) 2015.06.13 [javascript] 53. HTML DOM - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 52. closure - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 50. 함수 매개변수(function parameters) - 자바스크립트 강좌 (0) 2015.06.13 [javascript] 49. 함수 선언(function definitions) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 48. 객체 프로토타입(Object prototype) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13
