코드로보시죠
[JavaScript-49] this키워드 본문
이번 시간에는 this에 대해 배워볼게요!
결론부터 말하면, this는 함수를 호출한 객체를 가리키게 만들어줍니다.
예를 들어, 함수를 하나 만들어두고,
그 함수를 여러 객체에서 접근할 수 있게 하되, 함수의 세부적인 내용은 각 객체의 내용으로 채우게 하는거죠.
네네, 말로만 설명하자니 저라도 무슨 말인지 하나도 모를 것 같은데요.
코딩을 누가 말로 배웁니까!
바로 코드로 보시죠
const printer = () => {console.log(this.name);};
//객체 생성
const lee = {
name: 'lee boram',
age: 20,
//메소드(객체 안에 정의된 함수)
//printer라는 이름을 가진 메소드는 printer라는 함수를 값으로 가짐
printer: printer
};
const kim = {
name: 'kim minsu',
age: 27,
//메소드(객체 안에 정의된 함수)
printer: printer
};
//테스트
console.log(lee.printer);
console.log(kim.printer);
각 객체 안에 printer라는 메소드가 정의된 것, 보이시죠?
printer라는 메소드는 printer라는 함수를 값으로 갖네요.
그럼, 마지막 두 줄에서 console.log(lee.printer)라는 명령어로 lee객체의 printer 프로퍼티에 접근하면,
맨 위에 선언된 printer함수가 실행되겠죠?
그런데, printer함수의 실행 내용은 this.name을 출력하라는 것이네요.
this는 앞서 제가 함수를 호출한 객체라 했으니,
지금 this는 lee가 됩니다.
그럼, this.name은 lee.name이니까?
네, lee boram이 출력됩니다!
'[JavaScript] 코드잇과 함께!' 카테고리의 다른 글
[JavaScript-51] 배열 spread (0) | 2023.10.01 |
---|---|
[JavaScript-50] if를 사용하지 않고 조건식 쓰기(삼항연산자) (0) | 2023.10.01 |
[JavaScript-48] arrow function (화살표함수) (2) | 2023.10.01 |
[JavaScript-47] ...args뜻 (REST파라미터) (0) | 2023.10.01 |
[JavaScript-46] 함수를 변수에 할당해 사용하기 (함수표현식) (0) | 2023.10.01 |