S06. advanced2

1 분 소요

Advanced 2 (this, Closure)

  • this는 함수를 어떻게 실행하느냐에 따라 바뀐다.

  • 일반함수(non-strict) : window (실무에선 this를 window로 사용하는 건 버그다. 차리리 window로 선언해라)
      var name = 'ken';
      function log() {
         console.log(this.name); => window.name
      }
      log(); // ken
    
  • 일반함수(strict 모드) : undefined

  • 점 방식 : 함수명 앞 객체

  • foo.call(ken) : call 내 문자열이 this ( foo(), foo.call() 은 동일한 의미)
    foo.apply(ken)도 동일하게 동작

  • foo.call(ken, 1, 2, 3, 4, 5) : ken이 this, 1~5는 foo의 매개변수로 들어감

  • foo.apply(ken, [1, 2, 3, 4, 5]) : apply는 2번째 인자를 배열로 받고, 배열의 요소가 하나하나 매개변수로 들어간다.

  • foo.bind(ken) : ken이 this인 foo함수의 리턴값을 반환
    var bar = foo.bind(ken), foo.bind(ken)만으론 실행 X
    bar(1, 2, 3, 4, 5); 가능

  • new로 선언된 함수 내에서 this는 빈 객체
    new로 선언한 함수는 return this; 를 자동으로 한다. (return {} 만 강제할 수 있다.)

  • var ken = new Person('ken', 34, 'm');
    여기서 ken을 instance라 한다. (생성자 함수를 리턴하는 값을 담는 변수) Person을 생성자함수(constructor)라 한다. console.log(ken instanceof Person); 부모, 자식간 관계 확인, true or false 반환

  • Closure
    함수 생성 시 주변 스코프를 기억하는 성격을 클로져라 한다.

  function say () {
    var a = 2;

    function log () {
      console.log(a);
    }

    return log;
  }
  
  // 'log' function was just returned and assigned to variable 'a'. 
  var a = say();

  // we are invoking 'log' function here. but it can still access the variable 'a' and log successfully.
  a();
  // Example #4 
  // 클로져는 선언뿐만 아니라 계속 변수의 변경 값도 계속 주시하고 있다.
  var foo;

  function doSomething () {
    var a = 1;

    function something () {
      a++;
      console.log(a);
    }

    foo = something;
  }

  function say () {
    foo();
  }

  doSomething();
  say(); // 2
  say(); // 3
  say(); // 4

======================

You Don’t Know JS

this 확정 규칙

  • new로 함수를 호출(new 바인딩) 했는가? 맞으면 새로 생성된 객체가 this다.
    var bar = new foo();
    
  • call과 apply로 함수를 호출(명시적 바인딩), 이를테면 bind 하드 바인딩 내부에 숨겨진 형태로 호출됐는가? 명식적으로 지정된 객체가 this다.
    var bar = foo.call(obj2);
    
  • 함수를 콘텍스트(암시적 바인딩), 즉 객체를 소유 또는 포함하는 형태로 호출했는가? 바로 이 콘텍스트 객체가 this다.
    var bar = obj1.foo();
    
  • 그 외에 경우엔 this는 기본값으로 세팅된다.
    var bar = foo(); // 엄격모드는 undefined, 비엄격모드는 전역객체
    

업데이트: