blog/js/this

[giscus[bot]]

blog/js/this

JavaScript에서 this는 꽤 어렵고 헷갈리는 개념입니다. this에 대해 확실히 깨달을 수 있도록, this 바인딩에 대한 설명과 몇 가지 예시 문제를 작성한 포스트입니다.

https://www.timegambit.com/blog/js/this

[Lennon57]

의도하신대로 하시려면 5번에 for문 i++ => i-- 로 바꿔야할 것 같아요!

[jintak0401]

그러게요... 평소 코딩하던 습관대로 막 써버렸네요... 감사합니다!

[guesung]

우선순위 부분에서 'new 바인딩이 명시적 바인딩보다 우선순위가 높다'기보다는, 'new 바인딩이 bind 메서드를 통한 명시적 바인딩보다 우선순위가 높다'가 더 정확한 표현일 것 같습니다.

다음은 예외 예시입니다.

function func(name) {
  this.name = name;
  this.sayName = function () {
    console.log(this.name);
  };
}

const obj = {
  name: 'guesung',
};

const obj2 = new func('timegambit');
obj2.sayName.apply(obj); // guesung

obj2.sayName.bind(obj);
obj2.sayName(); // timegambit

첫 번째 예시에서는 생성자 함수로 생성한 obj2 인스턴스의 sayName 메서드에 apply를 사용하니 obj가 바인딩되었습니다. 이는 apply가 즉시 함수를 실행하면서 this를 바인딩하기 때문입니다.

두 번째 예시에서는 bind를 사용했지만, obj가 바인딩되지 않은 것을 확인할 수 있었습니다. 이는 bind가 새로운 함수를 반환할 뿐, 원본 함수를 변경하지 않기 때문입니다. 따라서 obj2.sayName()을 호출할 때 여전히 원래의 this(obj2)가 사용됩니다.