선언식 함수와 화살표 함수에서의 this

브라우저에서 this는 Window 객체를 가르킨다.

그리고 Node에서 this는 global 객체를 가르킨다. (정확히는 최상위에서 호출 시 module.exports / exports를 가르키고, 함수 내부에서 호출 시 global 객체를 가르킨다)

 

이렇게 this는 환경에 따라서 다른 객체를 가르킨다.

 

선언식 함수

이는 function 선언식에서도 다르지 않는데,

this는 함수의 호출, 실행 단계에서 동적으로 결정된다.

// 브라우저

function test1() {
    return function consoleA() {
        console.log(this);
    }
}

const test3 = test1();
test3(); // Window 객체

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

test2(); // Window 객체

일단 기본적으로 함수 선언식의 내부 this는 무조건 Window 객체를 가르킨다.

함수 선언식으로 생성된 함수는 window객체 내부에 할당되기 때문이다.

const user = {
    name: "park",
    callName: function() {
        console.log(this);
    }
}

user.callName(); // {name: 'park', callName: ƒ}

객체 내부에 선언식 함수가 들어가면, 이때 this는 user 객체를 가르킨다.

const user = {
    name: "park",
    callName: function() {
        return function () {
            console.log(this);
        }
    }
}

const test = user.callName();
test(); // Window

만약 클로저 함수를 만들어 this를 출력하면, 다시 window 객체를 가지는 것을 확인할 수 있다.

this의 위치는 객체 내부 함수에 있지만, 호출되는 위치를 기반으로 this의 참조가 결정되었다.

 

선언되는 위치는 this의 값과 관계가 없다.

누가 호출했냐에 따라서 this의 값은 변경될 수 있다.

function sayHello() {
  console.log('Hello ' + this.name);
}

const person = {
  name: 'Alice',
  greet: sayHello,
};

person.greet(); // Hello Alice

 

선언식 함수에서 this를 원하는 곳에 연결시키기 위해서는 bind 메서드를 사용한다.

🍈 bind는 ECMAScript 5에서 추가된 문법이다.

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

const user = {
    name: "park",
}

callThis(); // Window
callThis.bind(user)(); // user 객체

 

화살표 함수

이렇게 선언식 함수에서 this는 동적으로 결정된다.

반면에, 화살표 함수는 this의 바인딩이 정적으로 결정되어 항상 상위 스코프를 가르키게 된다.

const user = {
    name: "park",
    callName: () => {
        console.log(this);
    }
}

user.callName(); // Window

위의 화살표 함수의 this는 Window 객체를 반환한다. 선언식 함수에서는 user 객체를 출력한 것과는 대조적이다.

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

this - JavaScript | MDN