this

자바스크립트 this

this 는 일반적으로 메서드를 호출한 객체가 저장되어 있는 속성

콘솔 찍어보기 전까지 예상하기 어려운 녀석이네요.

코딩을 하면서 조금씩 움찔움찔 합니다. 어... 이게 이걸 가르키나 하구요.

일반 함수에서의 this

function a() {
    console.log(this);
}

a 함수를 호출하기 전에 this가 무엇인지 생각해 봅시다.

.

.

.

.

.

예상하신게 이 다음 적을 결과와 같다면 아마 this를 이미 잘 아시는 분이실꺼 같습니다.

저는 자바스크립트 에서의 this 는 많이 공부해야 하지만 얕게 알고있는 내용이라도 몇자 남겨 보겠습니다.

자바스크립트의 this만 하더라도 책한권의 분량이 나온다고 하니 많이 공부가 필요할듯싶습니다.

이 글에서 전달하고자 하는 부분이 잘못되어 있으면 지적 부탁드립니다.

후에 명확한 내용을 전달할 수 있을때 다시 포스팅 하겠습니다.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

결과

일반 함수에서의 this 는 window 객체를 가르키고 있습니다.

여기서 알 수 있는 사실은

- this 는 무조건 '객체' 입니다.

그리고 좀 더 명확하게 알기 위해서는 '함수를 호출한 시점'을 알아야 합니다.

윗 사진에 있는 window 객체를 펼쳐보면 a 라는 함수가 보입니다.

이렇다는건 다음과 같은 코드로도 a 라는 함수를 호출할 수 있습니다.

window.a();

같은 결과가 나오고 있네요.

두번째로 알 수 있는건 이렇게 호출한 시점의 '객체' 가 this 가 됩니다.

예제 1)

var num = 0;
function a() {
    this.num = 99;
    num = 70;
 
    console.log(num);
    console.log(this.num);
    console.log(window.num);
}

- 3번 코드에 의해 전역변수 num 에 99가 할당.

- 4번 코드의 num 은 지역변수 num을 일단 찾고 없으면 전역에서 변수 num을 찾음 전역변수 num 이 있으므로 전역변수 num 에 70을 할당.

- 6,7,8번 코드 모두 전역변수 num을 가르키므로 셋다 70이 출력

그럼 예제의 3번 코드와 4번 코드 사이에

지역변수 num 을 넣어보겠습니다.

예제 2)

var num = 0;
function a() {
    this.num = 99;
    var num = 25;
    num = 70;
 
    console.log(num);
    console.log(this.num);
    console.log(window.num);
}

- 3번 코드에 의해 전역변수 num 에 99 가 할당

- 4번 코드 에 의해 a 함수 안에 지역변수 num 이 25 라는 값을 가짐

- 5번 코드에 의해 a 함수 안의 지역변수 num 에 70 라는 값이 담김

- 7번 에서의 num 은 함수 내부의 지역변수를 num을 찾음 // 70

- 8번 에서의 this.num 은 a라는 함수를 호출한 window 객체의 num(전역변수) 을 찾음 // 99

- 9번 에서의 window.num 은 전역변수 num 을 가르킴. // 99

일반 중첩 함수에서의 this

다음의 코드를 한번 예상해 봅시다.

예제 3)

function a() {
    function b() {
        console.log(this);
    }
    b();
}

이 예제도 this 가 무엇을 가르키는지 맞추셨다면 this 를 이미 잘 아시는 분이실듯 합니다.

.

.

.

자바스크립트를 이제 막 접하신 분들이라면 위의 예제를 해보고 난 뒤 b 함수가 호출되는 시점을 찾았을 것이라 생각됩니다.

b 함수는 a 함수 안에서 실행이 되니깐 아마 예상하기론 a 함수가 찍혀있지 않을까 예상실꺼 같다고 생각이 듭니다.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

일단 b 함수를 호출해 보기 위해 첫번째 시도를 하겠습니다.

이 사진에서 보시다시피 b 함수는 a 라는 함수 내부에 있기 때문에 그냥 b 함수를 호출 못시킴니다.

따라서 a라는 함수를 호출해야지 a 함수 내부의 동작을 수행하면서 b 함수가 호출이 됩니다.

그런데 잘 보시면 a 함수가 콘솔로 찍혀 있을 줄 알았지만 예상과는 다르게 window 객체가 찍혀져 있었네요.

이 예제에서는 중첩함수 내부에 있는 this 는 window 객체를 의미합니다.

※ 그럼 함수는 객체인가요?

함수도 객체 입니다. 1급 객체

함수도 객체처럼 프로퍼티를 가질 수 있기 때문.

(이 포스팅 에서는 this 를 다루고 있기 때문에 함수는 다음에 포스팅 하겠습니다.)