강지윤 @eeeyooon

이예솔 @lulla-by

이성령 @sryung1225

이에스더 @Stilllee

채하은 @chaehaeun

코딩 마을 방범대 : 3장. this

질문과 답변

1. 함수 내부의 this 바인딩을 변경하는 방법

함수 내부의 this 바인딩을 변경하는 방법

var a = "global!";
var obj = {
  a: "object!",
  b: function() {
    console.log(this.a); // object!

    function c() {
      console.log(this.a); // global!
    }
    c();
  }
}
obj.b();

위 코드에서 메서드 b의 this는 obj객체를 가리킵니다. 그러나 b메서드 내부에 정의된 c함수는 일반 함수로 호출되므로, this가 전역 객체를 가리키게 됩니다.

만약, c의 this가 전역객체가 아닌 obj를 바라보게 하려면 어떻게 해야할까요?

여러 방법 중 한 가지를 선택하고 예시코드와 함께 설명해주세요.

var a = "global!";
var obj = {
  a: "object!",
  b: function() {
    console.log(this.a);

    const c = () => {
      console.log(this.a);
    }
    c();
  }
}
obj.b();

var a = "global!";
var obj = {
  a: "object!",
  b: function() {
    console.log(this.a); // object!

    var c = function() {
      console.log(this.a); // object!
    }.bind(this);

    c();
  }
}
obj.b();

var a = "global!";
var obj = {
  a: "object!",
  b: function() {
    console.log(this.a); // object!

    var self = this;

    function c() {
      console.log(self.a); // object!
    }
    c();
  }
}
obj.b();

출제자 : Stilllee

1. 변수명을 이용한 우회
this를 다른 변수에 할당하고 내부 함수에서 이 변수를 사용하는 방식으로, this의 값이 함수가 선언될 때 결정되는 것을 활용합니다. 일반적으로는 self, that, _this, _ 등의 변수명을 사용합니다.

var a = "global!";
var obj = {
  a: "object!",
  b: function() {
    var self = this;
    console.log(this.a); // object!

    function c() {
      console.log(self.a); // object!
    }
    c();
  }
}
obj.b();

2. 화살표 함수
ES6에서 도입된 화살표 함수는 자체적인 this바인딩을 갖지 않고, 상위 스코프의 this를 그대로 사용합니다.

var a = "global!";
var obj = {
  a: "object!",
  b: function() {
    console.log(this.a); // object!

    const c = () => {
      console.log(this.a); // object!
    }
    c();
  }
}
obj.b();

3. call / apply 메서드
call 또는 apply 메서드를 사용하여 함수를 호출하면서 this 값을 명시적으로 바인딩 할 수 있습니다.

var a = "global!";
var obj = {
  a: "object!",
  b: function() {
    console.log(this.a); // object!

    function c() {
      console.log(this.a); // object!
    }
    c.call(this);
  }
}
obj.b();

4. bind 메서드
bind메서드를 사용하여 함수의 this를 고정시킬 수 있습니다. 이렇게 하면 함수가 어디에서 호출되더라도 this는 bind에 전달된 객체를 가리킵니다.

var a = "global!";
var obj = {
  a: "object!",
  b: function() {
    console.log(this.a); // object!

    function c() {
      console.log(this.a); // object!
    }.bind(this);
    c();
  }
}
obj.b();

2. 메서드의 this와 메서드 내부의 콜백 함수의 this

메서드의 this와 메서드 내부 콜백 함수의 this 불일치 문제를 해결 후 설명해주세요.

const myObj = {
  myProperty: 'Hello, world!',
  outerFunc: function() {
    console.log(this.myProperty); // 'Hello, world!'
    setTimeout(function innerFunc() {
      console.log(this.myProperty); // undefined
    }, 1000);
  }
};

myObj.outerFunc();

현재 innerFunc 함수 내부에서의 this.myProperty는 undefined를 출력합니다. 이는 innerFunc가 myObj 객체의 컨텍스트를 this로 가지지 않기 때문입니다.

innerFunc 내에서 this.myProperty가 myObj.myProperty를 정확히 참조하도록 하려면 코드를 어떻게 수정해야 할까요?

코드를 수정한 후 (1)innerFunc가 왜 undefined를 출력했는지와 (2)이 문제를 해결한 방법, 두 가지에 대해 설명해주세요.

const myObj = {
  myProperty: 'Hello, world!',
  outerFunc: function() {
    console.log(this.myProperty); // 'Hello, world!'
    setTimeout(() => { //
      console.log(this.myProperty); // 'Hello, world!'
    }, 1000);
  }
};

myObj.outerFunc();

const myObj = {
  myProperty: "Hello, world!",
  outerFunc: function () {
    console.log(this.myProperty);
    setTimeout(
      function innerFunc() {
        console.log(this.myProperty);
      }.bind(this),
      1000
    );
  },
};

myObj.outerFunc();

const myObj = {
  myProperty: 'Hello, world!',
  outerFunc: function() {
    console.log(this.myProperty); // 'Hello, world!'
    setTimeout(function innerFunc() {
      console.log(this.myProperty); // 'Hello, world!'
    }.apply(this), 1000);
  }
};

myObj.outerFunc();

출제자 : chaehaeun

const myObj = {
  myProperty: 'Hello, world!',
  outerFunc: function() {
    console.log(this.myProperty); // 'Hello, world!'
    setTimeout((function innerFunc() {
      console.log(this.myProperty); // 'Hello, world!'
    }).bind(this), 1000);
  }
};

myObj.outerFunc();

1. innerFunc가 undefined를 출력한 이유:
setTimeout 내부에서 호출되는 함수는 기본적으로 전역 컨텍스트에서 실행됩니다. 따라서 this는 전역 객체를 가리키게 되고, myObj와는 무관한 컨텍스트가 되기 때문에 this.myProperty는 undefined를 반환합니다.

2. 이 문제를 해결한 방법
bind를 사용하여 innerFunc 함수의 this를 outerFunc의 this에 명시적으로 바인딩했습니다. .bind(this)는 outerFunc가 호출될 때의 this, 즉 myObj를 innerFunc의 this에 고정시킵니다. 이렇게 하면 setTimeout 내부에서 실행되더라도 innerFunc의 this가 myObj를 정확히 가리키게 되어 this.myProperty가 정상적으로 'Hello, world!'를 출력하게 됩니다.

3. this

다음에서 제시하는 this 관련 단답형 문제에 대해 간단한 답변을 작성해주세요. 책 내용을 바탕으로 간단하게 작성해주세요.

1. this는 언제 결정되나요?
2. 프로그래밍 언어에서 함수와 메서드는 미리 정의한 동작을 수행하는 코드 뭉치입니다. 이 둘을 구분하는 유일한 차이는 무엇일까요? 또한, "함수로서의 호출"과 "메서드로서 호출"을 어떻게 구분하는지 말씀해주세요.
3. 생성자(클래스)와 인스턴스는 무엇인가요?
4. 화살표 함수의 this는 어떤 특징을 가지고 있나요?

출제자 : eeeyooon

1. this는 언제 결정되나요?
기본적으로 실행 컨텍스트가 생성될 때 함께 결정됩니다. 실행컨텍스트는 함수를 호출할 때 생성되므로, 바꿔말하면 this는 함수를 호출할 때 결정된다고 할 수 있습니다.

2. 프로그래밍 언어에서 함수와 메서드는 미리 정의한 동작을 수행하는 코드 뭉치입니다. 이 둘을 구분하는 유일한 차이는 무엇일까요? 또한 "함수로서의 호출"과 "메서드로서 호출"을 어떻게 구분하는지 말씀해주세요.
독립성. 함수는 그 자체로 독립적인 기능을 수행하는 반면, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행합니다. 자바스크립트는 상황 별로 this 키워드에 다른 값을 부여하게 함으로써 이를 구현했습니다.

‘함수로서 호출’과 ‘메서드로서 호출’을 점(.)의 유무로 구별할 수 있습니다. 앞에 점이 없으면 함수로서 호출한 것(func(1);)이고, 앞에 점이 있으면 메서드로서 호출한 것(obj.method(2);)입니다. 덧붙여, 대괄호 표기법에 따른 경우(obj[’method’](2))도 메서드로서 호출한 것입니다.

정리하자면, 점 표기법이든 대괄호 표기법이든 어떤 함수를 호출할 때 그 함수 이름(프로퍼티명) 앞에 객체가 명시되어 있는 경우에는 메서드로 호출한 것이고, 그렇지 않은 모든 경우는 함수로 호출한 것입니다."

3. 생성자(클래스)와 인스턴스는 무엇인가요?
클래스를 통해 만든 객체를 인스턴스라고 합니다. 생성자는 구체적인 인스턴스를 만들기 위한 일종의 틀입니다. 이 틀에는 해당 클래스의 공통 속성들이 미리 준비되어있고, 여기에 구체적인 인스턴스의 개성을 더해 개별 인스턴스를 만들 수 있습니다.

• 생성자 = 기본 붕어빵 반죽, 굽기에 알맞은 온도와 시간이 설정된 붕어빵 틀
• 인스턴스의 개성 = 피자치즈, 슈크림, 팥
• 개별 인스턴스 = 슈붕, 팥붕, 피붕

4. 화살표 함수의 this는 어떤 특징을 가지고 있나요?
화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 빠지게 되어, 상위 스코프의 this를 그대로 활용할 수 있습니다. (ES5 환경에서는 화살표 함수를 사용할 수 X)