이 JavaScript:이것을 한 번만 이해하십시오

JavaScript 이해하기 이 키워드

프로그래머가 되고 싶다면 어떤 특정 분야를 선택하든 거의 확실하게 JavaScript를 다루어야 합니다. 그것은 겸손한 시작에서 진정한 강자로 진화했습니다. 이제 프론트 엔드, 백엔드, 모바일, 게임, 데스크톱 앱, 머신 러닝까지 다룹니다!

이제 JavaScript 마스터가 되어 분기하기 전에 기본 사항을 배워야 합니다. 이 키워드는 아마도 학습 목록에서 1위일 것입니다.

실제로 이것은 무엇입니까?

간단히 말해 이것 포인터는 JavaScript 코드에서 함수 또는 메서드라고 하는 객체를 참조하는 방법입니다. 일반 용어로 이 점의 왼쪽에 있는 것입니다.

이것은 두 가지 주요 용도가 있습니다. 몇 가지 예를 들어 살펴보겠습니다.

이것으로 객체 구성하기

function Book(title, author, genre) {
  this.title = title;
  this.author = author;
  this.genre = genre;
}
const book1 = new Book("Lord Of The Rings", "J.R.R. Tolkien", "Fantasy");
const book2 = new Book("Tools Of Titans", "Tim Ferriss", "Self-help");
 
console.log(book1);
console.log(book2);

위의 코드는 다음 출력을 생성합니다.

여기에서 제목, 저자 및 장르를 매개변수로 사용하는 책 개체를 만드는 생성자 함수를 정의했습니다.

생성자 함수는 주어진 이름의 객체를 생성할 수 있는 객체 "청사진" 함수입니다(이 경우 Book).

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

myBook이라는 객체를 만들고 필수 매개변수(함수를 정의할 때 매개변수가 아니라 함수를 호출하거나 호출할 때 인수라고 함)를 전달했습니다.

결국 우리는 myBook을 기록하고 해당 속성과 함께 객체를 되찾았습니다. 이런 식으로 우리가 만드는 각각의 새 책 개체는 전달된 값을 할당받습니다.

this로 속성 액세스 :

const girl = {
  name: "Sarah",
  age: 26,
  introduce() {
    console.log(
      "Hi! " + "I'm " + this.name + " and I'm " + this.age + " years old."
    );
  },
};

여기에서 name 및 age 속성과 소개 함수를 가진 개체를 보유하는 girl이라는 변수를 정의했습니다.

이 함수는 개체의 속성을 사용하여 소개 문장을 기록하고 this로 액세스합니다. .wanted_property.

이것 JavaScript의 범위

기본적으로 정의된 함수나 객체 내부가 아닌 전역 범위에서 사용되는 경우 이 전역 개체를 참조합니다. 브라우저에서 window는 전역 개체입니다.

JavaScript에서 일부 기본 데이터(문자열, 숫자, 부울...), 객체 또는 함수를 선언하면 모두 전역(창) 객체에 연결됩니다.

"열린 곳에서"라고 쓰는 것은 무엇이든 창문이 있는 것처럼 읽을 수 있습니다. 그 전에 쓰여졌습니다. 다음 코드 스니펫을 살펴보겠습니다.

function returnThis() {
  return this;
}

먼저 this 값을 반환하는 전역 범위에서 returnThis라는 함수를 정의합니다. . 그런 다음 returnThis()를 작성하여 호출합니다. .

전역 범위이므로 window.returnThis()로 볼 수 있습니다. , 점 왼쪽에 있는 것을 반환합니다.

객체 함수(메소드라고도 함)

이제 내부에 동일한 기능을 가진 새 객체(객체 메서드라고 함)를 정의하고 다시 한 번 호출하면 해당 객체(중괄호로 표시)가 반환됩니다.

const object = {
  returnThis() {
    return this;
  },
};
object.returnThis();

이것의 문제 세 가지 솔루션

함수가 객체에 직접 연결되지 않은 경우 이 함수 내부는 전역 객체를 참조합니다.

const weirdBehaviorObject = {
        directlyTiedFunction() {
          return this;
        },
        directlyTiedOuterFunction() {
          return function indirectNestedFunction() {
            return this;
          };
        },
      };

브라우저에서 이것을 실행하고 우리가 얻는 것을 봅시다:

this를 반환하는 하나의 함수로 객체를 정의했습니다. 다시, 내부 함수를 반환하는 또 다른 함수는 this를 반환합니다. .

indirectNestedFunction을 호출하려면 먼저 ()를 작성합니다. 내부를 반환하는 외부 함수를 한 번 호출합니다.

그런 다음 다른 ()로 내부를 호출합니다. 창을 반환합니다.

이것은 JavaScript의 불가사의한 동작 중 하나이며 예상치 못한 예기치 않은 놀라움에 자리를 내줍니다.

다행히도 이 문제를 해결할 수 있는 방법이 있습니다. 첫 번째는 클로저를 만드는 것인데, 이는 ES6 이전에 수행된 방식입니다. 두 번째 방법은 화살표 함수를 사용하는 방법이고 세 번째는 호출 및 적용 방법과 밀접한 관련이 있는 bind 방법을 사용하는 방법입니다.

#1 이것 해결 폐쇄

클로저는 영구 메모리 저장소입니다. 즉, 함수 실행이 완료될 때 변수가 사라지지 않습니다. 중첩 함수가 외부 함수에 정의된 변수를 참조할 때 JavaScript 엔진에 의해 생성되므로 외부 함수의 실행이 끝난 후에도 해당 변수에 액세스할 수 있습니다. 이것을 사용하면 다음과 같습니다. 예시:

const objectWithClosure = {
        closureFunction() {
          const self = this;
          return function enclosedFunction() {
            return self;
          };
        },
      };

우리는 this를 저장하기 위해 self라는 변수를 정의한 closureFunction으로 객체를 정의했습니다. 값. closureFunction은 포함하는 개체에 직접 연결되므로 this 값은 참조합니다. 이제 우리의 closedFunction에서 이것 일반적으로 창 개체를 참조합니다. 이에 액세스하기 위해 클로저를 사용했기 때문에 포함하는 함수에서 호출 개체를 값으로 유지할 수 있습니다.

#2 이것 해결 화살표 기능 포함

두 번째 솔루션은 ES6과 함께 제공되는 최고의 기능 중 하나인 화살표 기능을 사용하는 것입니다.

화살표 함수는 함수 작성을 위한 보다 간결한 구문을 나타냅니다. 그 외에도 이것을 찾기 위해 범위에서 한 단계 위를 찾습니다. 포함된 기능의 의미입니다.

따라서 다음과 같이 객체를 정의하면:

const arrowFunctionObject = {
        outerFunc() {
          return () => this;
        },
      };

화살표 함수가 창이 아닌 실제 객체를 반환하는 것을 볼 수 있습니다.

그 이유는 이 arrowFunctionObject를 참조합니다. 따라서 화살표 함수에는 일종의 내장 클로저가 있습니다.

중첩 화살표 기능

물론 이것은 JavaScript이므로 여기에 또 다른 문제가 있습니다. 기술 면접 외에는 절대 접하지 못할 것입니다. 하지만 그것만으로도 충분히 알 수 있습니다.

일반 함수 내부에 화살표 함수를 중첩하고 다른 함수 내부에 다시 ​​중첩하면 어떻게 될까요? 다음과 같습니다.

const arrowNestedInRegularFunctionObject = {
        outerFunction() {
          return function regularFunction() {
            return () => this;
          };
        },
      };

우리 객체에는 호출될 때 내부 regularFunction을 반환하는 outerFunction이 있습니다.

그런 다음 regularFunction을 호출하고 가장 안쪽 화살표 함수를 반환합니다.

이제 호출할 때 창 개체를 반환합니다.

화살표 기능은 만 조회합니다. 1레벨 범위까지. 이를 포함하는 regularFunction은 객체에 직접 연결되지 않으므로 대신 창이 반환됩니다.

그러나 화살표 함수 내부에 화살표 함수를 중첩하면 일반 함수 내부에 실제 포함 객체인 예상 결과를 얻을 수 있습니다.

const nestedArrowFunctionObject = {
        outerFunction() {
          return () => {
            return () => this;
          };
        },
      };

이 경우 내부 화살표 함수는 외부 화살표를 찾습니다. 바깥쪽도 화살표 기능이므로 한 단계 더 올려봅니다. 일반 outerFunction은 호출에 직접 연결됩니다.

객체이며 결과적으로 객체는 this로 반환됩니다. .

#3 이것 해결 bind 메소드 사용

마지막으로 세 번째 솔루션은 bind 메서드를 사용하는 것입니다. bind 메소드는 this가 무엇인지 명시적으로 선언하는 데 사용됩니다. 를 참조해야 합니다. 인수로 전달된 객체를 가져와서 함수의 this 에 바인딩합니다. 예어.

const arrowNestedInRegularFunctionObject = {
        outerFunction() {
          return function regularFunction() {
            return () => this;
          }.bind(arrowNestedInRegularFunctionObject);
        },
      };

이 예에서는 일반적으로 창 개체를 this로 반환하는 함수에 바인딩을 연결했습니다. <엠>. this로 참조하려는 개체를 전달합니다. 인수로 문제가 해결되었습니다.

이것 JavaScript를 이해하면 그렇게 어렵지 않습니다

휴! 그것은 굉장한 잠수이었다. 이제 이것이 왜 모든 번거로움과 혼란을 일으키는지 물으실 수 있습니다. ?

그 이유는 자바스크립트의 다른 모든 것과는 달리 이 동적으로 범위가 지정됩니다. 이는 JavaScript 엔진이 이것 코드가 실행될 때 런타임에 어디에서, 누가 그것을 호출하는지 확인하여 나타냅니다.

대조적으로 JavaScript의 다른 모든 것은 어휘 범위가 지정됩니다. 즉, 코드가 작성될 때 변수가 정의된 위치에 값이 정의됩니다.

이것 덕분에 , 객체 "청사진"을 한 번 생성하고 책 예제에서 본 것처럼 다른 속성 값을 가진 객체를 동적으로 생성할 수 있습니다.

this를 사용하여 객체의 속성을 노출하고 조작하는 메서드를 만들 수도 있습니다. .wanted_property.

우리는 JavaScript의 단점을 해결하고 자신 있게 동작을 명령하고 예상 결과를 생성할 수 있습니다.

이제 이 내용 을 이해하셨습니다. JavaScript 및 기타 몇 가지 기본 개념을 사용하여 JavaScript 숙달을 위한 단계를 더 자신 있게 실험하고 연습할 수 있습니다.

이것을 얻었습니다. !