함수와 클래스에서 this

1. 함수에서 this

함수에서 this는 함수를 실행시키는 주체를 말한다. 아래 예시를 보자.

this가 출력되는 show 함수를 정의한다. 그리고 fn 객체의 아이템으로 show 함수를 참조하게 한다.

function show() {
    console.log(this)
}

var fn = {
    show
}

fn 객체의 show 함수에 접근해보자 fn.show 구문으로 접근하면 결과는 show는 show() 함수를 참조하고 있다고 알려 준다.

fn.show

// 출력되는 결과 
ƒ show() {
    console.log(this)
}

그러면 이번엔 함수를 실행 시켜보자. 아래 출력된 결과는 this이다. 즉, 현재 show() 함수를 실행시킨 주체가 fn 객체가 출력된다.

fn.show()

// {show: ƒ}

아래의 구문이 사실 이해가 잘 안됐다. 그래서 fn.show == fn.show()가 성립되는 줄 알았다. 하지만 절대 아니다. fn.show == show 와 같은 것이다.

{show: ƒ}

하지만 위의 구문을 보기 쉽게 적어보면 아래와 같다.

var fn = {
    show: function() {
        console.log(this)
    }
}

console.log(fn) // {show: ƒ}

이번에는 조금 더 알기 쉽게 fn 객체에 name 속성을 추가해보자.

var fn = {
    name: '함수',
    show
}

console.log(fn) // {name: "함수", show: ƒ}

그리고 fn.show() 함수를 실행시켜 보자 과연 this가 어떻게 출력될 것인가?

fn.show() 

// 출력되는 값 
// {name: "함수", show: ƒ}

방금 위에서 fn을 출력했을 때 값과 같다.

이번엔 실행 주체를 다르게 해서 알아보자.

아래 구문에서 this는 window이다.

window.show()
// Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}

show()
// Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}

call()메서드를 사용해서 this를 document로 바꿔보자. 출력되는 this의 값은 document이다.

show.call(document)
// #document

이번엔 시간차를 두고 콜백 함수에서 show() 함수를 실행시켜 보자.

window.setTimeout(() => {
    console.log(this)
})

// window 객체가 출력된다. ( 함수 실행 주체이기 때문이다. )
// Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}

window.setTimeout(() => {
    fn.show()
})

// fn 객체가 출력된다. ( 함수 실행 주체이기 때문이다. )
// {name: "함수", show: ƒ}

window.setTimeout(() => {
    console.log(fn.show)
})

// show 함수가 출력된다. 함수 참조이다. 
// ƒ show() {
//     console.log(this)
// }

1.1 중간 정리

const show = function() {
    console.log(this)
}

var fn = {
    show
} 

fn.show // 함수 참조 
fn.show() // 함수 실행

1.2 단순호출과 엄격 모드

1.2.1 단순 호출

함수를 실행 주체 없이 실행하면 window가 this로 출력된다. 사실 실행되는 주체가 설정되어 있지 않기 때문에 undefined로 출력 되야 하지만 것이 맞다. 하지만 이는 자바 스크립트의 기억해야 하는 특징 중에 하나이다.

function show() {
    console.log(this)
}

show()
// Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}

1.2.2 엄격 모드

'use strict'를 사용하면 엄격하게 관리가 가능하다. 이를 사용하면 원래 함수의 실행 주체가 없으면 undefined로 나온다.

// IIFE 패턴 사용 
(function showValue() {
    'use strict'
    function show() {
        console.log(this)
    }
    return show() 
})()

// undefined

// 일반 함수 사용 
function show() {
    'use strict'
    console.log(this)
}

show() // undefined

2. 클래스에서 this

객체 지향 클래스에서 this는 인스턴스를 가리킨다.

class Text {
    method() {
        this?.wow() 
    }
    wow() {
        console.log('wow')
    }
}


const t = new Text()

t.method() // wow

3. 이벤트 핸들링에서 this

아래 예시와 모든 설명은 클래스 컴포넌트를 기준으로 이벤트 핸들링을 설명한 내용이다.

3.1 일반 함수

React의 이벤트 핸들링에서 화살표 함수가 아닌 일반 함수를 사용하면 어떤 일이 일어나는지 보자.

일반 함수를 이벤트 요소에 바인딩 했을 때 this를 출력해보니 undefined가 나온다. 왜? 먼저 clickMethod 함수식을 보고 this를 예측해보자. this는 무엇이 나올까? 그렇다. undefined가 나온다. 함수를 실행시키는 주체가 없기 때문이다.

자 그럼 다음 단계로 button 요소에 바인딩된 형태를 보자. 함수식이 참조 되어 있다. 그렇기 때문에 이벤트가 실행 되었을 때 clickMethod가 실행 되었을 때 출력되는 this의 값인 undefined가 그대로 나오는 것이다. 즉, 함수가 실행되는 주체를 찾을 수 없다. 아니 더 정확하게 말하면 찾을 수 없다기 보다 아예 없다.

3.1.1 setTimeout() 사용

첫 번째 출력된 값은 setTimeout()을 실행시키는 주체인 window가 출력되었다. 두 번째 출력된 값은 왜 아래 이미지와 같은 에러 메세지가 뜰까? 첫 번째 출력 값에서 알 수 있듯이 this는 window이다. 하지만 clickMethod()는 window 객체가 갖고 있는 메서드가 아니다. 그렇기 때문에 아래와 같이 함수가 아니라고 경고 메세지가 뜬다.

3.2 화살표 함수

이번엔 화살표 함수를 보자. 화살표 함수에서 this는 상위 컨텍스트의 this를 가리킨다. 아래 이미지의 표시된 상위 컨텍스트의 this는 무엇인가? 그렇다. App Element이다.

3.2.1 setTimeout() 사용

setTimeout()에 화살표 함수를 사용했다. 이는 this가 상위 컨텍스트를 가리킨다는 것이다. 그렇기 때문에 아래와 같이 상위 컨텍스트의 this인 App이 출력되는 것이다.

3.3 render() 안의 this

render() 안의 this는 무엇일까? this는 App이 나온다. 왜냐하면 render()메서드는 인스턴스 객체인 App 컴포넌트의 멤버이자 메서드이기 때문이다.

import React from "react";
import "./style.css";

export default class App extends React.Component {

  render() {
    console.log(this);

    return ( ** );
  }
}

Previous개발 도구 확장 NextJSX

Last updated 3 years ago