진정하세요, JS `this`는 정말 쉽습니다.

개념을 알면 똑같이 말할 것입니다. 예. this 주변에 여러 경우가 있습니다. 따라서 모든 시나리오를 알면 클리어됩니다. 우리는 일반적으로 상상을 두려워합니다. 상상만 하지 말고 연습을 해보자.

따라서 this를 이상적으로 사용해야 하는 시나리오와 다양한 예를 통해 해당 범위에서 그 중요성을 살펴보겠습니다.

그렇다면 기본적으로 this는 Javascript에서 실제로 무엇을 의미합니까?

자바스크립트에서 object를 의미합니다. this의 사용법에 따라 해당 참조가 변경됩니다. 따라서 모든 참조를 얻으면 완료된 것입니다.

이 소개가 괜찮기를 바랍니다. 확인. 이제 this를 해독해 봅시다.

설명에 들어가기 전에 여기에 요약을 제공하고 싶습니다.



S.No.
대본
'이것'은 다음을 가리킨다.


1.
내부 개체
상위 개체만 참조

2.
내부 브라우저 창
창 개체를 참조합니다.

삼.
브라우저 창의 엄격 모드
창 개체를 참조합니다.

4.
내부 기능
창 개체를 참조합니다.

5.
엄격 모드: 함수 내부
정의되지 않은 반환

6.
이벤트 핸들러에서
HTML 요소 참조

7.
call(), bind() 및 apply()와 함께 사용
인수로 전송된 개체를 참조합니다.

8.
내부 JS 클래스
현재 개체를 참조합니다.

9.
화살표 함수에서
창 개체를 참조합니다.

1. 객체 내부

상위 개체만 참조합니다.

예시:

const testObj = {
    firstName: 'John',
    lastName: 'Carter',
    name: function name() {
        return this.firstName + " " + this.lastName; // Here this refers to `testObj`
    }
}

console.log(testObj.name());
> John Carter

2. 혼자 사용하기

1. 브라우저 창 내부

창 개체를 참조합니다.

따라서 alert, atob, blur 등과 같은 창 메서드는 이것을 사용하여 액세스됩니다.

예시:



이를 이용하여 window 객체의 alert 함수에 접근합니다.

예시:

2. 브라우저 창의 엄격 모드

또한 this는 창 개체를 나타냅니다.

예시:

3. 내부 기능

또한 this는 창 객체를 나타냅니다.

예시:



엄격 모드를 사용하면 undefined가 반환됩니다.

function thisInsideFunction() {
    'use strict'; // see strict mode
    return this;
  }

 console.log(thisInsideFunction());
> undefined

4. 이벤트 핸들러에서

사용자는 브라우저에서 HTML의 다양한 양식 요소에 대한 클릭, 입력, 키다운 이벤트를 트리거할 수 있습니다. 이러한 이벤트를 처리하는 동안 일반적으로 해당 이벤트 핸들러를 함수와 바인딩합니다. 핸들러에서 이것을 전달하면 해당 객체HTML element를 참조합니다.

예시:

<button onclick="buttonClick(this)">Submit</button>

// this refers to button HTMLElement here.

5. call(), bind() 및 apply() 메서드와 함께 사용

이들은 자바 스크립트 내장 메소드입니다. call() & apply()는 다른 객체를 인수로 사용하여 다른 객체의 객체 메서드를 호출하는 데 사용됩니다.

이러한 방법에 대한 전체 기사는 here입니다.

반면 바인드는 다른 객체의 객체 메소드를 차용하여 함께 새로운 객체를 생성합니다.

기본적으로 이 세 가지 모두 비슷한 종류의 작업을 수행합니다.

이제 this이 이러한 방법에서 참조하는 것입니다. 인수로 전송된 개체를 참조합니다.

예시

const testObj = {
    firstName: 'John',
    lastName: 'Carter',
    name: function name() {
        return this.firstName + " " + this.lastName;
    }
}

const anotherObj = {
   firstName: 'new john',
   lastName: 'Carter'
}

console.log(testObj.name.apply(anotherObj)); // this refers to anotherObj
> new john Carter

호출 및 바인드의 경우에도 마찬가지입니다.

6. JS 클래스 내부

this는 현재 개체를 나타냅니다.

예시

class TestThis {
    a;
    b;

    normalFunction() {
        console.log('normal function');
        console.log(this);
    }

    static staticFunction() {
        console.log('Static function');
    }
}

const test = new TestThis();
test.normalFunction();

정적 속성은 this 의 일부가 아닙니다.

7. this in 화살표 기능

창 개체를 참조합니다.



inside object 메서드는 상위 obj를 참조합니다.

let testObj = {
    test: 10,
    bar: function() {
      let x = (() => this);
      return x;
    }
  };

 console.log(testObj.bar()());

나는 이것의 가능한 대부분의 경우를 다루었습니다. 새로운 시나리오를 발견하면 댓글로 알려주세요.

또한 시나리오를 이해하지 못하는 경우 의견을 말하십시오.