함수 호출

4가지 방식이 있음.

1) 함수로 호출

2) 메서드로 호출

3) 생성자로 호출

4) apply, call 로 호출

함수에 암묵적으로 전달되는 매개변수 중 this 가 있음. this는 함수를 호출한 객체를 가리키며, 함수 context라고 함.

함수 호출 방식에 따라 this 가 다름

1) 함수로 호출

호출 예	this
function trip() {}; trip(); var tour = function(){}; tour();	window (전역 context)

2) 메서드로 호출

호출 예	this
var city = {    trip : function () { return this;} } city.trip();  var city = {};  city.trip = function() {return this;} city.trip();	메서드를 소유하고 있는 객체

3) 생성자로 호출

- 작동방식은 메서드로 호출과 동일. 그러나 반복해서 객체에 메서드 property를 만들고, 메서드 property 에 함수를 지정하는 것을 피하게 만든다.

- 생성자 함수 앞에 new 로 시작함

- 빈 객체 생성 -> 생성자 함수 내 this 에 생성된 객체 설정 -> 객체의 property 설정 -> (명시적 return이 없다면,) 객체 return

- 생성자 함수는 대문자로 시작, 명사

호출 예	this
function City() {  this.tour = function() {return this;}  }  var city1 = new City();  var city2 = new City();	새롭게 생성된 객체 인스턴스

4) 함수 context 강제 지정한 후 호출

- 언제 필요한가?

event handler 함수의 함수 context 는 event 가 binding 된 객체.

ex) button element 의 onclick event 에 event handler 함수 설정 시, event handler 함수의 함수 context 는 button. button이 아닌 다른 객체를 함수 context로 지정하고 싶을 수 있다.

방식	parameter
apply	객체, 인자 배열
call	객체, 인자 목록

예시1)

function move() { var result = 0; for (var n=0; n<arguments.length; n++) { result += arguments[n]; } this.result = result; } var tour1 = {}; var tour2 = {}; move.apply(tour1, [1,2,3,4]); move.call(tour2, 5,6,7,8); console.log(tour1.result); console.log(tour2.result);

예시2 - event handler 의 this를 event 를 호출한 객체가 아닌 event handler 를 가지고 있는 객체로 설정)

function bind(context, name) { return function() { context[name].apply(context, arguments); } } var button = { clicked : false, click : function() { this.clicked = true; console.log(this.clicked); } } $("#box").on("click", bind(button, "click"));