JavaScript 함수 내 this와 메서드 내 this 차이

면접 단골 질문
"this"

---

면접 단골 질문 중 하나인 "함수 내 `this`와 메서드 내 `this`의 차이"에 대해 설명하면서 JS에서 `this` 바인딩 방식에 대해 조금 더 깊이 살펴보겠다.

 

자바스크립트 함수는 크게 일반 함수와 화살표 함수로 나눌 수 있으며, 이 둘은 `this` 바인딩 방식에서 큰 차이가 있다.

일반 함수는 함수로도 사용될 수 있고, 메서드로도 사용될 수 있다.

---

일반 함수 표현식 내 `this`: 동적 바인딩 (Dynamic  Scope)

일반 함수의 `this`는 함수가 호출될 때의 컨텍스트에 따라 결정된다.

즉, 동적 바인딩이 이루어지며 함수가 호출된 객체에 따라 `this`가 달라진다.

 

함수: 전역에서 호출된 함수 내 `this` → 무지성 window(global)

function Constructor() { // 호출지: Constructor 객체
	this.filed = 0;      // (위와 동일) Constructor 객체 내 this.filed = 0
    function inner() {   // 호출지: 전역 객체 (객체화 혹은 초기화 되지 않음)
    	console.log(this.field); // (위와 동일) this. filed = undefined (전역객체에 var 선언)
        }
        inner();
}
var object = new Constructor();

• `inner`는 객체화 되지 않았기 때문에 `inner()` 함수 내 this는 무지성 `window/global`

function Constructor() {                 // 호출지 : Constructor 객체
  this.field = 0;                        // (위와 동일) Constructor 객체 내 this.field = 0
  setInterval(function inner() {         // 호출지 : 전역객체 (객체화 혹은 초기화 되지 않음)
    console.log(this.field);             // (위와 동일) this.field = undefined (전역객체에 var 선언)
	}, 1000);
}
var object = new Constructor();

• 여전히 `inner`는 객체화되지 않았다. → `inner()` 함수 내 this는 `window/global`

• 객체화 혹은 초기화가 안됐으면 그냥 밖으로 나가면 된다. 그리고 Global Object(전역객체)를 만나서 없으니 `var` 새로 생성
• `this.field = 0;`은 `new Constructor()` 객체화 때문에 객체 내 갇힘. `inner()` 함수는 객체화 되지 않아 밖으로 나감.

함수는 객체화가 되는 순간 객체가 된다. → 해당 함수 내에 this는 전역객체가 아닌 함수 내 객체로 바뀐다.

function Constructor1() {               // 호출지 : Constructor1 객체
    this.field = 0;                     // (위와 동일) Constructor1 객체 내 this.field = 0
    console.log(this.field)             // (위와 동일) Constructor1 객체 내 this.field = 0
    function doublewrapper() {          // 호출지 : 전역객체 (객체화 혹은 초기화 되지 않음)
        this.field = 1;                 // (위와 동일) 전역객체 내 this.field = 1
        console.log(this.field);        // (위와 동일) 전역객체 내 this.field = 1

        function Constructor2(){        // 호출지 : Constructor2 객체
            console.log(this.field)     // (위와 동일) Constructor2 객체 내 this.field = undefined
        }
        new Constructor2()
    }
    doublewrapper()
}
new Constructor1();
console.log(field);

• `Constructor1()`의 `this` → `Constructor1` 객체 (닫힘)
• `doublewrapper()`의 `this` → 전역 객체(안 닫힘)
• `Constructor2()`의 `this` → `Constructor2` 객체 (닫힘)

메서드: 메서드로 사용된 함수에서의 `this`: 동적 바인딩  = 동적 스코프(Dynamic Scope)

• 일반 함수가 객체의 메서드로 사용되면, `this`는 해당 객체를 참조한다. 즉, `this`는 메서드가 속한 객체를 참조하게 된다.
  • 객체를 찾을 필요 없이, 메서드 정의 자체로 인해 메서드가 속한 객체가 `this`

const Object = {
	field: 0,
    method() {
    	console.log(this.field); // this는 Object 객체 참조
        }
};

Object.method(); // 0 출력

• `Object.method()`가 호출되었을 때, `this`는 Object 객체를 참조한다.
• 따라서 `this.field`는 `Object`객체의 `field`를 참조하여 `0`이 출력된다.

화살표 함수 표현식 내 `this`: 정적 바인딩 = 정적 스코프 (Static, Lexical Scope)

• 화살표 함수가 어떤 함수에서 선언되었는지가 기준이 된다.

function Constructor() {
	this.field = 0;
    setInterval(() => {
    	console.log(this.field); // this는 Constructor 객체의 field 참조
        }, 1000);
}

var object = new Constructor(); // 0 출력

• 화살표 함수는 상위 스코프의 `this`를 참조한다. 이 경우, 상위 스코프는 `Constructor` 함수 이므로, `this`는 `Constructor` 객체를 가르킨다.
• 따라서 `this.field`는 `Constructor`객체의 `field`를 참조하여 `0`이 출력된다.

• 왼쪽: 일반함수 / 오른쪽: 화살표 함수 | 우리가 앞서 배웠던 Lexical Scope를 그대로 적용 → `Constructor` 함수를 바라본다.

일반 함수와 메서드에서의 `this` 차이

일반 함수에서의 `this`:

• 동적 바인딩: 일반 함수는 호출되는 컨텍스트에 따라 `this`가 바뀐다.
• 전역에서 호출되면 `this`는 전역 객체 (`window/global`)를 참조
• 메서드로 호출되면 `this`는 해당 메서드를 호출한 객체를 참조

메서드에서의 `this`:

• 메서드 내부의 `this`는 메서드가 속한 객체를 참조한다.
• 메서드를 호출한 객체에 따라 `this`가 달라진다.

---

명시적 바인딩 (Explict Binding): `call`, `apply`, `bind`

• 암시적 바인딩(Implicit Binding)은 일반 함수 표현식이 객체 내 메서드로 정의 되었을 때 `this` = 객체 → 일시적이다.
• 명시적 바인딩(Explict Binding)은 해당 함수가 어떤 객체에서 호출되었는지 기준을 직접 설명해주는 것
  • 방법은 `call`, `apply`, `bind`를 통해 가능하다.

Explict Binding 명시적 바인딩이 `this`를 사용하는 함수에 명시적으로 객체를 할당해주면 메서드가 된다.

 

`call`과 `apply`를 통한 `this`바인딩

function createObject() {
	//this.foo = 21
    console.log('Inside `createdObject`:', this.foo);
    return {
    	foo: 42,
        bar:() { console.log('Inside `bar`:', this.foo); }
    };
}

createObject.call({ foo: 21 }).bar(); // 21 출력

• `createdObject.call({ foo: 21 })`는 `createObject` 함수의 `this`를 `{ foo: 21 }` 로 설정하고 호출한다.
• 따라서 `this.foo`는 `21`이 출력
• 내부의 `bar`메서드에서 `this`는 createObject에서 반환된 객체를 참조하므로 `42`가 출력된다.

화살표 함수에서의 `this`와 명시적 바인딩

function createObject() {
	// this.foo = 21
    console.log('Inside `createObject`:', this.foo);
    return {
    	foo: 42,
        bar: () => console.log('Inside `bar`:', this.foo),
    };
}

createObject.call({ foo: 21 }).bar(); // 21 출력

• 화살표 함수 `bar`는 상위 스코프의 `this`를 참조하므로, `call`로 설정한 `this`가 아닌, `createObject` 함수의 `this`를 참조하게 된다.
• 따라서 `this.foo`는 `21`이 출력된다.
• 화살표 함수는 `this`가 고정되어 있어, `call`이나 `apply`로 바인딩을 변경할 수 없다.

---

ℹ️참고

[ASAC 6기 강의자료]