"이것"을 만질 수 없다

'this'는 모든 실행 컨텍스트에 대해 생성되는 특수 변수입니다(즉, 실행 컨텍스트의 일부임).
'this' 키워드가 사용된 함수의 소유자 값을 사용합니다.

'this' 키워드는 정적 변수가 아닙니다. 실제로 어떤 유형의 실행 컨텍스트와 정의된 환경 변수 유형에 전적으로 의존합니다.

이제 '이'는 크게 네 가지 유형으로 나눌 수 있습니다.
1) 방법의 경우
2) 함수 선언 및 함수 표현식.
3) 화살표 기능
4) 이벤트 리스너

행동 양식

this= 메소드를 호출하는 객체

'use strict';

const duck = {
  name: 'donald',
  getName: function(){
    console.log(this);
  }
};

duck.getName();

산출:


이제 그다지 좋지 않습니다. this= Direct parent, 이 경우에는 duck Object입니다.

함수 선언 및 함수 표현식

엉성한 모드의 경우 this= window 객체
엄격 모드의 경우 this= undefined입니다.
하지만 우리가 콘솔에 기록하는 이 '이것'은 실제로 이 기능의 일부라는 것을 이해해야 합니다.
내 말은 실행 컨텍스트에 이 'this' 전용 메모리가 있다는 뜻입니다.
즉, 모든 함수 표현식과 함수 선언에는 자체 'this'가 있습니다.

const strict = function(){
  'use strict';
  console.log(this);
};

const sloppy = function(){
  console.log(this);
};


strict();
sloppy();

산출:

화살표 함수

화살표 함수에는 자체 'this' 키워드가 없으므로 호출될 때 직계 부모로부터 'this' 키워드의 값을 상속합니다.

'use strict';

const arrow = () =>{
  console.log(this);
};

arrow();

const duck = {
  name: 'donald',
  getName: function(){
    const arrow = () =>{
      console.log(this);
    };
    arrow();
  },
  gogetter: ()=>{
    console.log(this);
  }
};

duck.getName();
duck.gogetter(); // pay attention to this part

산출:


세 번째 출력을 보세요. 왜 그렇습니까?
앞에서 설명한 것처럼 'this'는 동적이며 화살표 함수의 경우 직계 부모의 값을 가리키므로 어휘 'this'라고 합니다.

이벤트 리스너:

this= 처리기가 연결된 DOM 요소입니다.

'use strict';

const body = document.querySelector('body');
body,addEventListener('click', function(){
  alert("Hello World!");
  console.log(this); 
});

이 코드를 콘솔에 붙여넣고 결과 확인을 클릭하십시오.


산출:



왜 창 객체입니까?
DOM 창에서 본문 요소의 직접적인 부모이기 때문입니다.

테이크 아웃

'this'에는 동적 값이 있습니다.

화살표 함수를 객체의 메서드로 사용하지 마십시오.
화살표 함수에는 'this'에 할당된 메모리가 없기 때문입니다.

항상 엄격 모드를 선호합니다. "개인 의견"

재미있는 사실:
JavaScript는 Brendan Eich가 단 10일 만에 개발했습니다.


이것이 당신에게 조금 도움이 되었기를 바랍니다.

의심이나 제안이 있으면 "이것"에 댓글을 달아주시겠습니까?

아름다운 하루 되세요.