왜 나는'이것'에 관한 블로그를 쓰기로 결정했는가?

저는 Syntax.fm과Wes Bos의Scott Tolinski 팟캐스트를 매우 좋아합니다. 에피소드를 들은 적이 있습니다. 웨이스는 개발자가 자바스크립트this 키워드를 둘러싸고 사이트를 만들어야 한다고 말했습니다. 왜냐하면 개발자들이 다양한 환경에서 그것을 사용해 볼 때 신비로운 출력을 얻기 때문입니다.
물론, 이 주제에 관한 문서가 너무 많아서, 나는 그 어떤 문서도 뛰어넘을 생각은 없다. (나는 확실히 MDN 웹 문서를 좋아한다.)반면 본 시리즈의 블로그와 제 사이트usethis.dev는 글과 문서의 집중화를 실현하고 개발자에게 토론의 내용을 자체 테스트할 수 있는 기회를 제공할 것입니다.
그래서 더 이상 소개할 게 없으니 시작합시다!

이 시리즈에서 학습할 내용은 다음과 같습니다.

JavaScriptthis 키워드의 다양한 컨텍스트에 대한 기본 지식, 바인딩, 창 객체, 블록과 함수 범위의 사용, 일반 함수와 화살표 함수 간의 차이점this 키워드에 대한 영향)을 배울 것입니다.

우리는 이 문장에서 다음과 같은 것을 배울 것이다.

오늘 우리는 전역 window 대상, 블록, 함수 범위, 자바스크립트 데이터 형식에 대해 토론하고 this 주어진 환경에서의 출력에 대해 대체적으로 이해할 것이다.

이 점이 작용하고 있다

다음은 MDN 웹 문서에서 this 주제에 대한 간략한 개요입니다.

In most cases, the value of this is determined by how a function is called (runtime binding).

-- MDN

단순해 보이지만 this 키워드는 JavaScript의 다른 키워드와 다릅니다.그것은 완전히 그것의 이름에 달려 있다.예를 들어 아래 코드에서 우리는 함수this를 사용하지 않고 간단한 HTML 스크립트 표시줄에서만 사용한다.

<script>
  console.log(this) // Window { window: Window, self: Window, document, name: "..."} etc.
</script>

모든 브라우저에서 개발자 도구를 열고 콘솔 탭에 들어가서 Chrome에 this를 입력하면 다음과 같은 결과를 얻을 수 있습니다.

다음 출력 뒤에 있는 이유는 다른 대상이 없기 때문입니다. (이 관건적인 용어를 기억하고 나중에 사용하십시오.) 봉인 this 키워드는 이 환경을 가정합니다.창 대상만 this 키워드를 봉인했습니다.
이 점을 한층 더 설명하기 위해 다른 몇 가지 예를 살펴보자.

예.

// Example 1
const wrapperFunction = function () {
  console.log(this)
}

// Example 2
const wrapperObjectWithFunction = {
  key: function () {
    console.log(this)
  },
}

너는 이것들이 어떤 결과를 가져올 것이라고 생각하니?아래로 스크롤해서 답을 보기 전에 시간이 좀 걸립니다.
무슨
예.
이것
답안
가다
대상
예.
여기서?

결실

// Example 1
const wrapperFunction = function () {
  console.log(this) // Window { window: Window, self: Window, document, name: "..."} etc.
}

// Example 2
const wrapperObject = {
  log: function () {
    console.log(this) // {log: ƒ}
  },
}

첫 번째 예에서 로그아웃한 대상이 window 대상이라는 것을 놀라실 수도 있습니다.왜?
먼저 JavaScript 변수가 표현식을 포함할 수 있음을 이해해야 합니다.간단하지만 무의미한 표현은 아마도

const sum = 1 + 1 // 2

많은 프로그래머들이 은유에서 흔히 볼 수 있는 오해 중 하나는 변수를 하나의 값을 수용하는 상자(즉 총 수용 2의 값)로 보는 것이다.
반대로 변수는 지침을 충당한다.변수는 원어 (즉 문자열, 숫자, 볼 값,bigint, 기호, 정의되지 않았거나 null), 함수 또는 대상을 가리킨다.(10000피트의 시야를 얻지 않고 이 주제를 더 깊이 이해하고 싶다면 반드시 수업을 봐야 한다Just JavaScript)
따라서 우리가 한 함수에 this를 기록했을 때, 우리는 사실상 이 함수에 분배된 변수를 취소하지 않았다.이것은 약간 모순된다. 왜냐하면 변수는 표현식의 값을 구하기 때문이다.간단하게 말하면 함수는 사실상 특정 임무를 수행하는 표현식일 뿐이다.따라서 우리가 첫 번째 예에서 얻은 window 대상은 의미가 있다. 왜냐하면 변수는 전역적으로 정의되기 때문이다.
우리가 말한 변수가 원어, 함수 또는 대상을 가리키는 지침인 것을 기억하십니까?같은 속성은 대상의 관건을 대표한다.두 번째 예에서 log 키는 사용console.log 방법의 함수를 가리킨다.유일한 차이점은 객체가 자체 블록 범위를 작성하여 값을 변경하는 것입니다this.이 예에서 이 함수는 ObjectWrapper 변수가 가리키는 대상에 정의된 로그 키가 가리키는 함수입니다.따라서 함수는 전역 창 대상에 귀속되지 않고 로컬로 정의된 대상에 귀속됩니다. 이것이 바로 키를 포함하는 대상을 취소하는 이유입니다. {log: f}다음 글에서 우리는 this 키워드가 화살표 함수에서의 차이와 블록 범위가 서로 다른 변수에 대한 영향을 더욱 연구할 것이다.