JAvascript-thisの操作方法feat.call, bind, apply



クリップ、
▼▼▼▼▼▼▼▼▼
this4가지 동작 :
this의 첫번째 동작 방식은, this가 전역 객체(window)를 context 객체로 갖는 것

this의 두번째 동작 방식 - 암시적 바인딩 :
어떤 객체를 통해 함수가 호출된다면 그 객체가 바로 this의 context 객체가 됨
결론적으로 this를 그냥 사용하면 암시적으로 전역 객체에 바인딩이 되는 것 입니다.

this의 세번째 동작 방식 - 명시적 바인딩
함수(함수 객체)는 call, apply, bind 메소드를 가지고 있는데, 첫번째 인자로 
넘겨주는 것이 this context 객체가 됩니다.
이를 명시적 바인딩이라고 합니다.

this의 네번째 동작 방식 - new 바인딩 :
1. 새 객체가 만들어짐 
2. 새로 생성된 객체의 Prototype 체인이 호출 함수의 프로토타입과 연결됨 
3. 1에서 생성된 객체를 this context 객체로 사용(명시적으로)하여 함수가 실행됨
4. 이 함수가 객체를 반환하지 않는 한 1에서 생성된객체가 반환됨

js의 new 키워드는 클래스의 인스턴스 화가 아니라 그와 유사하게 동작하도록 되어있다는 부분을
짚고 넘어가기 위함
  • ex)矢印関数、call、bind、apply等
  • arrow function : 
    1. function 키워드 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있고, 항상 익명이다.
    2. 일반 함수와의 차이점은 this에 있다.
    3. 일반함수가 전역 컨텍스트에서 실행될 때 this가 정의합니다.
    4. 화살표함수는 this를 정의하지 않습니다.
    5. 함수의 내부함수, 콜백함수에 사용되는 this는 window입니다.
    
    call : 
    1. call 메소드는 다른 객체 대신 메소드를 호출하는데 사용됩니다. 
    2. 이 메서드를 사용하여 함수의 this 객체를 원래 컨텍스트에서 thisObj로 
       지정된 새객체로 변경할 수 있습니다. (this 객체를 다른객체로 변경)
    
    apply : 
    'call' 메소드와 동일 하나, call 메소드는 인자 하나 하나를, 
    'apply' 는 인자 리스트를 전달합니다
    
    bind : 거의 동일하게 활용이 가능하지만 함수를 실행하지 않고, 함수를 생성한 후 
    반환하는 점에서 call(), apply()와의 차이점입니다
    Ref .
    JavaScript thisの4つの操作方法
    矢印関数
    [JavaScript]API-call,apply関数
    JavaScript関数でbindメソッドを使用する