JS에서의 this

1.  JS에서의 this는 현재 호출중인 메서드를 보유한 객체를 가리킴 (default)

var obj = { result: 0 };
obj.add = function(x,y) {
this.result = x+y;
}
obj.add(3,4)
console.log(obj)// { result: 7 }

 

2.  그러나 아래 코드 처럼 호출될 때 add2() 메서드를 보유한 객체가 없으므로 Global (전역) 객체가 this가 됨.

var obj = { result: 0 };
obj.add = function (x, y) {
this.result = x + y;
};
var add2 = obj.add;
console.log(add2 === obj.add); //true
add2(3, 4) // 전역 변수 result에 7이 할당됨
console.log(obj); // { result: 0 }
console.log(result); //7

 

3.  this가 바인딩되는 시점은 메서드를 호출할 때마다 this가 바인딩됨.

3.1  메서드를 호출할 때 직접 this를 지정할 수 있음(apply, call 메서드)

var add function(x,y) {
this.result x+y:
}
var obj = {};
// add 함수에 obj를 직접 this 로 지정하여 호출함
add.apply(obj, [4,5])
//add.call(obj, 3,4)

3.2  또한 this가 미리 바인딩된 새로운 함수를 리턴할 수 있음 (bind)

var add = function(x,y) {
this.result = x+y;
}
var obj = {};
//add 함수에 obj들 직접 this 로 연결한 새로운 함수를 리턴함.
add add.bind(obj);

 

4.  전통적인 함수가 중첩되었을 때의 문제점

var obj= { result:0};
obj.add function(x,y) {
  console.log(this);
  function inner() {
    this.result = x+y;
  }
  inner():
}
obj.add(4,5)

- add() 메서드 내부에 inner 함수가 정의되어 있음
- 바깥쪽 함수 바로 안쪽 영역의 this? --> obj를 참조함.
- inner() 함수 내부의 this가 obj를 참조할 것인가?
  - 그렇지 않다. inner() 와 같이 호출했기 때문에 inner() 내부의 this는 전역객체를 참조함.
    즉 전역변수 result에 덧셈한 결과가 저장될 것이다.

 

4.1  위와 같은 문제를 해결하려면?

var obj = {result: 0};
obj.add = function (x, y) {
	const inner = () => {
	this.result = x + y;
	};
	inner();
};
obj.add(3, 4);
console.log(obj); // { result: 7 }

- apply(), call(), bind()를 이용
- 화살표 함수를 이용한다