JS에서의 this란 무엇일까?

MDN에서 function.prototype.apply()에 대해 공부하면서 폭풍 검색을 하던 중 this에 대해 공부하게 되었다.

 

this는 메소드를 호출한 객체를 담는 속성이다.

this를 함수의 이자로 넘기어 this의 값들을 사용하고, 변경할 수 있다는 것이다.

또한 메소드를 호출한 객체가 무엇이냐에 따라 value와 this.value가 같을 수도, 달라질 수도 있다.

 

this가 만들어지는 5가지의 경우를 통해 이해해보려고 한다.

 

1. 일반 함수에서의 this
2. 중첩 함수에서의 this
3. 이벤트에서의 this
4. 메소드에서의 this
5. 메소드 내부의 중첩 함수에서의 this

 

1. 일반 함수에서의 this

var value = 10;

function case1 () {
	this.value = 11;
    	value = 20;
}

// 다음의 순서로 값을 출력한다면 정답은?
// 1. value = ?
// 2. this.value = ?
// 3. window.value = ?

여기서 window는 전역 객체를 의미한다.

그렇다면 window.value는 무엇일까?

 

바로 전역 변수(global) value 값을 의미한다.

 

이제 답을 알아보자!

 

1번)

함수 내부에서 value 값을 할당하고 있다.

 

먼저 함수 내부에서 value이 선언되어있는지 확인한다.

하지만 함수 내부에서 선언된 value는 없기 때문에 전역 변수 value(맨 위의 value)에 20을 할당하게 된다.

 

따라서 정답은 20!

 

2번)

this의 객체인 case1에서 value가 선언되지 않았기 때문에  전역 변수 value값을 호출하게 된다.

 

맨 마지막에 value값을 20으로 할당하였으므로 정답은 20!

 

3번)

window는 전역 객체이므로 전역 변수인 value를 출력한다.

 

따라서 정답은 20!

 

2. 중첩 함수에서의 this

var value = 10;

function case2 () {
	function innerCase2 () {
		this.value = 11;
    		value = 20;
    }
}

// 다음의 순서로 값을 출력한다면 정답은?
// 1. value = ?
// 2. this.value = ?
// 3. window.value = ?

 

1번)

일반 함수에서의 경우와 같다.

 

정답은 20!

 

2번)

innerCase2 -> case2 -> 전역 순서로 value 값을 찾아나간다.

중첩 함수에 선언된 value 값이 존재하지 않으므로 전역 변수 value 값이 출력된다.

 

따라서 정답은 20!

 

3번)

window는 전역 객체이므로 전역 변수인 value를 출력한다.

 

3. 이벤트 리스너에서의 this

const myBtn = document.querySelector("button");

var value = 20;

function clicking (event) {
    event.preventDefault();

    this.value = 15;
    value = 40;

    console.log("1. value = " + value);
    console.log("2. this.value = " + this.value);
    console.log("3. window.value = " + window.value);
}

myBtn.addEventListener("click",clicking);

// 다음의 순서로 값을 출력한다면 정답은?
// 1. value = ?
// 2. this.value = ?
// 3. window.value = ?

 

1번)

선언한 value를 찾아가므로 전역 변수 value에 40이 할당된다.

 

정답은 40

 

2번)

click 이벤트를 받는 button이 this가 된다.

따라서 this.value는 전역변수 value가 아닌 button 객체의 value 값이 되므로,

 

정답은 15!

 

3번)

window = 전역 객체

 

정답은 40!

 

4. 메소드에서의 this

var value = 15;

function case4 () {
    this.value = 0;
}

case4.prototype.method1 = function () {
    this.value = 30;
    value = 60;

    console.log("1. value = " + value);
    console.log("2. this.value = " + this.value);
    console.log("3. window.value = " + window.value);
}

var test1 = new case4 ();
test1.method1();

// 다음의 순서로 값을 출력한다면 정답은?
// 1. value = ?
// 2. this.value = ?
// 3. window.value = ?

 

1번)

선언한 value를 찾아가므로 전역 변수 value에 60이 할당된다.

 

정답은 60!

 

2번)

test1에 새로운 case4 객체를 할당하였으므로,

따라서 test1.method1()을 실행하였을 때 메소드 method1의 객체는 test1이다.

 

정답은 30!

 

3번)

window = 전역 객체

 

정답은 60!

 

5. 메소드 내부의 중첩 함수에서의 this

var value = 15;

function case4 () {
    this.value = 0;
}

case4.prototype.method1 = function () {
    function inner () {
        this.value = 30;
        value = 60;

        console.log("1. value = " + value);
        console.log("2. this.value = " + this.value);
        console.log("3. window.value = " + window.value);
    }
    inner();
}

var test1 = new case4();
test1.method1();

// 다음의 순서로 값을 출력한다면 정답은?
// 1. value = ?
// 2. this.value = ?
// 3. window.value = ?

1번)

선언한 value를 찾아가므로 전역 변수 value에 60이 할당된다.

 

정답은 60!

 

2번)

메소드의 형태로 중첩 함수가 호출된다면,

this는 메소드를 호출한 객체가 된다.

 

하지만 함수의 형태로 중첩 함수가 호출된다면,

this는 전역 객체가 된다.

 

여기서 나는 test1.method1()의 메소드 형태로 호출하였는데 왜 this를 전역 객체로 인식했는지 헷갈렸다.

하지만 중첩 함수는 '함수 안의 함수'라는 의미이므로 method1 내부의 inner();로 인해 함수의 형태로 호출되었고,

따라서 inner 함수 내부의 this는 전역 객체가 된다는 것을 알았다.

 

따라서 정답은 60!

 

3번)

window = 전역 객체

 

정답은 60!

 

출처

 

https://beomy.tistory.com/6

[자바스크립트] this 객체의 정체

 

https://m.blog.naver.com/websearch/221712046699

JavaScript 중첩 함수는 호출자의 this 값을 상속하지 않는다.