JAvascript-thisの操作方法feat.call, bind, apply
5088 ワード
クリップ、
▼▼▼▼▼▼▼▼▼
this 의 4가지 동작 :
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 키워드는 클래스의 인스턴스 화가 아니라 그와 유사하게 동작하도록 되어있다는 부분을
짚고 넘어가기 위함
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メソッドを使用する
Reference
この問題について(JAvascript-thisの操作方法feat.call, bind, apply), 我々は、より多くの情報をここで見つけました https://velog.io/@coil/javascript-this-의-동작방식テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol