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를 이용하여 Person의 name 값에 접근하여 그 값을 출력하고 있다.
외부 함수를 메소드로 지정하고 각각 객체의 값에 접근
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에 할당이 되어 사용이 된다.
'JavaScript > JavaScript_지식_정리' 카테고리의 다른 글
Javascript를 이용해 HTML에 동적으로 태그 추가 (3) | 2021.08.06 |
---|---|
객체의 프로퍼티 값으로 함수가 들어가는 '메소드(Method)' (0) | 2021.08.01 |
Javascript의 자료형 중 하나인 '객체(Object)' (0) | 2021.08.01 |
Javascript에서 랜덤한 값 생성(난수 생성) (0) | 2021.07.31 |