강좌 & 팁
안녕하세요. 송기석입니다.
2013년 마지막 주입니다. 몇 일만 지나면
2013년이 가고 새로운 2014년이 옵니다. 한해 마무리 잘 하시고 새해에는 좋은 일이 많이 있기를 기원합니다.
저번 주에 호출을 설명하다 나온 this를 설명하다가 호출에 대한 내용을 다 하지 못했습니다. 저번 주의 호출에 대한 내용을 이어서 하겠습니다. 호출 패턴에는 메소드 호출 패턴, 함수 호출 패턴, 생성자 호출 패턴, apply 호출 패턴으로 4가지 패턴이 있습니다.
메소드 호출 패턴
var my_object = {
value: 0,
action: function(inc) {
this.value += (typeof inc === 'number' ? inc : 1);
}
};
my_object.action();
console.log(my_object.value); // 1
my_object.action(2);
console.log(my_object.value); // 3
이번에도 this가 나왔습니다. 9주차에 설명 했던 내용 중 정리9와 같은 방식인데 this가 가리키는 대상은 my_object가 됩니다.
action의 함수를 호출하기 위해 객체에 마침표나 []를 사용해서
호출하면 메소드 호출 패턴이 됩니다.
중간에 삼항연산자가 있습니다. 조건 ? A : B의 형태로 조건이 맞으면 A를 틀리면 B를 선택하게 됩니다.
함수 호출 패턴
함수가 객체의 속성이 아닌 경우에는 함수로서 호출 합니다.
var sum = add();
console.log(sum); // 7
this를 사용해 보겠습니다.
var temp = {
value: 0,
increment: function(inc) {
this.value += (typeof inc === 'number' ? inc : 1);
}
};
temp.increment();
console.log(temp.value); // 1
temp.increment(2);
console.log(temp.value); // 3
var add = function(a, b) {
console.log("add : "+a); // add : undefined
console.log("add : "+b); // add : undefined
return a + b;
};
temp.test = function () {
console.log('fun()');
var helper = function() {
this.value = add(this.value, this.value);
};
helper();
};
var sum = temp.test();
console.log(temp.value); // 3
this를 사용하여 함수 내부의 변수를 접근하고 싶었습니다. 하지만 함수를 이 패턴으로 호출하면 this는 전역 객체에 바인딩 됩니다. 원하는 결과는 6이 되어야 하지만 실제로 3이 나오므로 우리가 원하는 방식으로 this를 사용할 수 없습니다. 이를 해결하기 위해 다음과 같은 대안이 있습니다. that을 사용하는 것입니다.
var temp = {
value: 0,
increment: function(inc) {
this.value += (typeof inc === 'number' ? inc : 1);
}
};
temp.increment();
console.log(temp.value); // 1
temp.increment(2);
console.log(temp.value); // 3
var add = function(a, b) {
console.log("add : "+a); // add : undefined
console.log("add : "+b); // add : undefined
return a + b;
};
temp.test = function () {
var that = this;
var helper = function() {
that.value = add(that.value, that.value);
};
helper();
};
var sum = temp.test();
console.log(temp.value); // 6
핵심 포인트는 var that = this; 입니다. 원하는 결과가 나옵니다.
함수로 호출할 때 this를 사용하는 대안으로 that를 사용하면 됩니다.
