javascript 객체의 this 넌 무엇이냐,,

javascript
블로그 이미지

이챙(leechaeng)

﹒2020. 7. 13.


안녕하세요.

객체에서 this를 알아보려고 해요

아주 중요합니다 this..!!




object this


일반 객체에서 this 는 자신이 속한 객체를 가르킵니다.

주소 객체의 메소드에서 this를 사용하는데요

객체에서 왜 this를 사용해야 하는건지

예제를 통해 알아봅시다!


	

var ezam = {
	avg:function(math,science){
		return math + science
	}
}

console.log(ezam.avg(50,100))

exam이란 객체에 avg란 메소드를 만들어주었어요.

메소드에 math,science 매개변수를 넣고

콘솔에 메소드를 호출해줍니다


그럼 콘솔에 150이 찍히겠죠?

이럴경우엔 계속 메소드에 인자값을 넣어 호출해줘야 하는 불편함이 있죠.


그럼 math,science 매개변수를 객체의 프로퍼티로 넣어줘볼까요


	

var ezam = {
	math:50,
	science:100,
	avg:function(){
		return ezam.math + ezam.science
	}
}

console.log(ezam.avg())


인자값없이 메소드 내부에서

객체의 프로퍼티로 값을 계산해주니 코드가 간결해집니다.


그렇지만 여기서 또 문제가 있어요.

객체의 이름이 바뀐다면?

저 함수는 실행하지 않겠죠


그래서 우리는 this를 사용해줍니다.



	

var ezam = {
	math:50,
	science:100,
	avg:function(){
		return this.math + this.science
	}
}

console.log(ezam.avg())


this로 바꾸어주면 저 this는 

avg함수가 속한 객체를 가르키게 됩니다.

그럼 전에 사용한 코드랑 값이 똑같으면서

유동적인 코드가 되는거죠.



정리하자면 일반 객체에서 this는 

this가 속해 있는 메소드,

또 그 메소드가 속한 객체를 가르킨다.

이것을 잘 활용하자!


되게 기본적인건데 

저도 this를 안쓰는 경우가 많아 포스팅 해보았슴다 


이챙(leechaeng)
이챙(leechaeng)

프론트엔드 개발도 하고 뛰기도 하고

'javascript' 카테고리의 관련 글