this에 대해서 간간히 혼동하는데, this를 잘 정리해놓은 글을 공유합니다.

JavaScript
1

https://perfectacle.github.io/2017/02/15/es-this/

잘 정리해놨는데, 왜 봐도 이해는 잘 안되는걸까요…

아 어렵다, this… 너란…

2개의 좋아요
2

앗… 제가 작성중이던 글이 올라간줄 알았습니다.ㅎㅎ
저도 이거에 대해서 간단히 적어뒀던 글이 있는데 그냥 공유합니다.

this와 잘못된 사용

자바스크립트를 이해하지 못하는 복병중의 하나가 바로 this 입니다.
이것 때문에 생기는 실수는 다들 한번씩은 경험 했을 겁니다.

과연 this는 무엇인고 이로인한 흔한 실수를 간단히 적어봅니다.

this??

여러가지 설명들이 있지만 제가 좋아하는 설명은 바로.

현재 context를 실행하는 주체

context는 함수 call에 의해 생성되므로 쉽게 말해 **“함수를 실행하는 주체”**라고 할 수 있습니다.

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

foo(); 
// 여기서 foo는 window가 실행합니다. window.foo() 실행과 같음. 
// 그래서 여기서 this는 window입니다.

var obj = {
  foo : function(){
    console.log(this);
  }
};

obj.foo(); 
// foo를 실행하는 주체가 obj입니다. (obj.foo)()
// 그래서 여기서 this는 obj

var bar = obj.foo;
bar();
// 전역변수인 bar를 호출하는 bar()는 window.bar()와 동일
// obj의 foo를 꺼내서 bar에 담은 거죠. bar를 바로 실행한겁니다.
// 그래서 여기서 this는 window
// 여기서 bar와 obj.foo는 완전히 같습니다만 (bar === obj.foo)
// 실행시 context에 따라 봐뀌는 this가
// 호출하는 방법의 차이로 실행시 다른 값을 갖게 됩니다.

실수

그래서 흔히 하는 실수가 바로 다음과 같은 경우

var obj = {
  foo : function(){
    this.doSomething('foo');
  },
  bar : function(){
    this.doSomething('bar');
  },
  doSomething : function (args) {
    console.log(args);
  }
};

var condition = true;

obj[condition?'foo':'bar'](); // 정상 작동
(condition?obj.foo():obj.bar()) // 정상작동

(condition?obj.foo:obj.bar)() // this.doSomething 이 undefined로 에러
//여기서 ? 조건문을 거치면서 var a = obj.foo; a()와 동일한 결과가 됩니다.
2개의 좋아요
3

설명이 적절합니다.~