본문 바로가기

JavaScript/JavaScript_지식_정리

메소드에서 자신이 포함된 객체를 불러오는 'this'

this

메소드 내부에서 this를 이용해 자신이 포함된 객체를 불러 올 수 있다.

메소드에서 자신이 포함된 객체의 어떤 값을 필요로 할 떄 유용하게 사용할 수 있다.

 

this 사용법

메소드에서 자신이 포함된 객체를 호출
let Person = {
	name: "Carl",
	age: 25,
	Obj: function(){
		console.log(this)
	}
}

Person.Obj(); // { name: 'Carl', age: 25, Obj: [Function: Obj] }

 

 

메소드 내부에서 this를 이용해 자신의 객체에 접근할 수 있다.

위의 코드에서 Person 객체에 Obj 메소드가 this를 이용해 자신이 포함되어 있는 객체를 출력하고 있다.

메소드에서 자신이 포함된 객체의 값 접근
let Person = {
	name: "Carl",
	age: 25,
	Greeting: function(){
		console.log(`${this.name} said, Hello Everyone`);
	}
}

Person.Greeting(); // 'Carl said, Hello Everyone'

 

객체에서 프로퍼티 이름을 이용해 접근하는것 처럼 this에 점 표기법을 이용하여 다른 값에 접근할 수 있다.

객체일 경우                       객체.프로퍼티 이름

this를 이용할 경우               this.프로퍼티 이름

위의 코드처럼 Person 객체에 Greeting 메소드는 this를 이용하여 Personname 값에 접근하여 그 값을 출력하고 있다.

외부 함수를 메소드로 지정하고 각각 객체의 값에 접근
let Carl = {
	name: "Carl",
	age: 25,
}
let John = {
	name: "John",
	age: 30,
}

function Greeting(){
	console.log(`${this.name} said, Hello Everyone`);
}

Carl.Greeting = Greeting;
John.Greeting = Greeting;

Greeting(); // 'undefined said, Hello Everyone'
Carl.Greeting(); // 'Carl said, Hello Everyone'
John.Greeting(); // 'John said, Hello Everyone'

 

 

여러 객체에서 같은 동작을 하는 메소드를 사용해야 하는 경우, 객체 내부에 일일히 메소드의 코드를 작성하지 않고, 외부 함수로 만들어서 그 함수를 각각의 객체의 메소드로 사용할 수 있다.

this를 외부함수에서 쓸 경우 this에는 값이 할당되지 않는다(undefined)

하지만, Carl 객체와 John 객체의 메소드로 할당되고 메소드가 호출 되는 시점에서는 Carl 객체와 John 객체가 this에 할당이 되어 사용이 된다.