Notice
Recent Posts
Recent Comments
Link
«   2025/08   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags
more
Archives
Today
Total
관리 메뉴

코드로보시죠

[JavaScript-49] this키워드 본문

[JavaScript] 코드잇과 함께!

[JavaScript-49] this키워드

코드로 보시죠 2023. 10. 1. 13:57

이번 시간에는 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이 출력됩니다!