자바스크립트의 this 마스터 하기

자바스크립트에서 this가 가리키는 객체는 상황에 따라 조금씩 다르기 때문에

확실히 정리하지 않으면 디버깅의 늪에서 헤어나올 수 없다.

 

1. 함수와 메소드

 

자바스크립트에서 function은 함수와 메소드로 구분한다.

어떤 객체에도 포함되지 않은 function을 함수라 하고

전역 객체가 아닌 객체에 포함된 function을 메소드라 한다.

 

함수 안에서의 this는 전역 객체(window)를 가리키고

 

function func() {

    console.log(this);

}

func(); // this = window

 

메소드 안에서의 this는 부모 객체를 가리킨다.

 

var obj = {

    method() {

        console.log(this);

    }

}

obj.method(); // this = obj;

 

다음과 같은 경우 때문에 많이 헷갈린다.

 

var obj = {

    method() {

        [1, 2, 3].forEach(function(number) {

            console.log(number, this);

        })

    }

}

obj.method(); // this = window

 

언뜻보면 this가 obj를 가리킨다고 생각할 수 있지만

앞서 언급한 함수와 메소드의 차이를 생각하면

forEach 안에 함수가 있고 함수 안에 this가 있기 때문에 this는 window가 된다.

 

만약 this가 obj를 가리키게 하고 싶다면

this가 없는 함수인 화살표 함수를 사용할 수 있다.

일반 함수와 달리 화살표 함수 안에서는 this가 없기 때문에

화살표 함수 안에서 this를 부르면 부모(method)의 this를 가져오게 된다.

이는 scope 법칙이다.

 

var obj = {

    method() {

        [1, 2, 3].forEach((number) => {

            console.log(number, this);

        })

    }

}

obj.method(); // this = obj

 

2. 생성자 함수

 

자바스크립트에서는 함수를 호출할 때 new 키워드를 이용해서 객체를 생성할 수 있다.

 

var Func = function (name) {

    this.name = name;

    console.log(this);

    // return this;

}

var func = new Func('socratone'); // this = func

 

new 키워드가 붙으면 빈 객체를 만들고 // {}

생성자 함수가 호출될 때 this가 이 빈 객체를 가리키게 된다.

그리하여 this 안에 name과 같은 속성을 넣다가

자동으로 this를 리턴하게 되어

func가 this를 받고 func를 통해서 this가 끌어왔던 속성들을 쓸 수 있게 된다.

 

func.name; // 'socratone'

 

참고 : www.youtube.com/watch?v=gvicrj31JOM