객체지향 프로그래밍 this

핵심 요약

this는 가지고 있는 메소드가 속해있는 객체를 가리키도록 만든 예약어라 할 수 있다.
this는 객체 명의 변경에 관계없이 항상 메소드가 속해있는 객체를 바라본다.

this

객체란 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인것이라 정의했다. 사람에게는 자기 자신을 가리키는 말로(나) 영어로는 this is 하고 할텐데. 그래서 나를 지칭하는 걸로 this라고 부르며 사용한다.

//1
const lee = {
	name: 'lee',
	first: 10,
	second: 20,
	sum: function (f, s){
    	return f + s;
    }
}
console.log("lee.sum : ", lee.sum(lee.first, lee.second) );
//결과
//lee.sum: 30

위 예제를 보면,
변수 lee라는 이름의 객체와 속성을 만들고, sum이라는 합계를 수행하는 코드이다.
첫번째, console.log의 결과는 30으로 정상적으로 작동. 하지만, 위의 코드는 문제가 없이 작동하지만 무언가 개선할 여지가 있어 보인다.

.

다름으로 넘어가기전에, 위의 lee.sum(lee.first, lee.second)코드에서, lee.first, lee.second 속성은, 이미 lee의 객체의 내부 속성이라는것을 알수 있다.
다음과 같이 코드를 수정해보자.

//2
const lee = {
	name: 'lee',
	first: 50,
	second: 20,
	sum: function (f, s){
    	return lee.first + lee.second;
    }
}
console.log("lee.sum : ", lee.sum() );
//결과
//lee.sum: 70

위의 예제에서, return 값을 lee.first + lee.second로 변경해보았다.문제 없이 작동하긴 하지만 만약 lee라는 객체명이 변경이 되었을 경우, return값의 lee라는 객체명도 변경해야하는 불편함이 생기게 된다.
다음 예제에서는 이런 불편함을 좀더 개선해보자.

//3
const kim = {
	name: 'kim',
	first: 30,
	second: 20,
	sum: function (f, s){
    	return this.first + this.second;
    }
}
console.log("kim.sum : ", kim.sum() );
//결과
//kim.sum: 50

2번과같이 이러한 불편함을 개선하고자 자바스크립트 내부에서는 객체 내부 메소드(sum)에서 객체(lee)는 자기 자신을 자리키는 this를 사용할 수 있도록 만들어 놓았다.

this는 rhis를 가지고 있는 메소드가 속해있는, 객체를 가리키도록 약속된 특수한 예약어라 할 수 있다.

this는 객체명의 변경에 상관없이 항상 메소드가 속해있는 객체를 바라본다.
this를 통해, 객체가 내부가 갖고 있는 first와 second 속성을 sum이라는 메소드에서 참조 할 수 있기 때문에, 함수의 이름 kim.sum()을 호출하는 것을 통해, 더욱 편리하게 코드를 작성할 수 있데 된다고 한다.

출처: 윤대디