E.D.I.N 개념으로'this'를 이해하세요.

이것은 자바스크립트에서 무엇입니까?

this 키워드는 자바스크립트 코드의 현재 부분을 실행하는 대상을 가리킨다.

왜 이해가 이렇게 복잡합니까?

우리는 서로 다른 상하문을 제공함으로써 조종할 수 있는 방법이 많기 때문에 당황스러울 수도 있다this.this 귀속은 함수의 성명 위치와 무관하지만 함수의 호출 방식과 관련이 있다.
우리는 네 가지 주요 규칙을 이용하여 코드 중this이 대표하는 내용을 확정할 수 있다.
E, D.I.N - 현식 바인딩, 기본 바인딩, 은식 바인딩 및 새 바인딩을 나타냅니다.
(EDIN 개념이 없는 것은 단지 내가 이 개념들을 기억하는 방식일 뿐이다)

규칙 1.암시적 바인딩:

위아래 문장을 사용하여 실행된 함수를 호출할 때 은밀한 귀속을 실현합니다.
예:

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

obj.getName(); // Dev

obj。getName（）

여기서 우리는 getName() 상하문으로 대상obj의 obj 함수를 호출한다.

obj속성이 있기 때문에namedev를 출력합니다.

만약 당신의 함수가 대상에 박혀 있다면?

예:

const obj = {
    name: 'Dev Child',
    getName : function() {
        console.log(this.name);
    }
}

const parentObj = {
    childObj: obj,
    name: 'Dev Parent'
};

parentObj.childObj.getName(); // Dev Child

모든 함수가 호출되기 전의 마지막 부급은 이 함수의 상하문이다.

우리의 예에서 this.name 는 obj 의 this for getName() 함수이다.

Fat Arrow 함수 catch:

var name = 'Global Dev';
const obj = {
    name: 'Local Dev',
    getName : () => {
        console.log(this.name);
    }
};

obj.getName() // Global Dev 😈 😈 😈

여기서 문제는 this이 getNamearrow 함수에 귀속되었고 어휘this를 사용했는데 이 예에서 Gloabl입니다.

따라서 IMPICT를 사용하여 호출 함수의 우선 순위가 Arrow 함수보다 낮습니다.

2. 기본 바인딩:

기본 귀속은 상하문이 없는 상황에서 함수를 호출하는 것입니다.this 컨텍스트가 포함된 객체에서 함수를 재구성하는 동안 자주 발생하는 오류가 발생합니다.

var name = 'Global Dev';

const obj = {
    name: 'Local Dev',
    getName : function() {
        console.log(this.name);
    }
};

const { getName } = obj;
getName(); // Global Dev  🤔🤔🤔

여기서 우리는 대상getName에서 obj 함수를 해구했다.

그러면 우리는 어떠한 상하문도 없다고 부른다

이것은 이곳의 함수 집행이 전체 상하문에서 이루어졌다는 것을 의미한다.

따라서 실행할 때 코드에서 this 을 만났을 때 창 대상을 검사하여 값을 해석하려고 시도합니다.

우리는 name 대상에서 window에'전역 편차'값을 분배했기 때문에 this.name 는 window.name, 즉'전역 편차'로 해석된다.

주의: undefined 모드에서 strict 로 돌아갑니다.

어떻게 이 문제를 극복합니까?
명시적 바인딩 사용

3. 명확한 구속:

현식 귀속은 함수를 호출할 때 this 대상을 지정하는 과정입니다.이것은 보통 유명한 Js삼중주call, apply, bind의 도움으로 완성된다.

var name = 'Global Dev';
const obj = {
    name: 'Local Dev',
    getName: function() {
        console.log(this.name);
    };
};

const { getName } = obj;
const newContext = {
  name: 'New Dev'
};
// Explicit binding takes priority over Default binding 
getName.call(newContext); // New Dev 

// Explicit binding takes priority over Implicit binding 
obj.getName.call(newContext); // New Dev 

위에서 똑똑히 볼 수 있듯이 현식 귀속은 은식 또는 기본 귀속보다 우선합니다.
그러나 우선 순위가 Arrow 함수의 this 귀속보다 높은지 여부입니다.
아니오

var name = 'Global Dev';
const obj = {
    name: 'Local Dev',
    getName: () => {
        console.log(this.name);
    }
};

const newContext = {
  name: 'New Dev'
};

//Arrow function's bind took priority over Explicit binding.
obj.getName.call(newContext); // Global Dev 

우선 순위 정렬:

화살표 함수 > 명시적 바인딩 > 암시적 바인딩 > 기본 바인딩

4, 새 제본:

접두사에서 new 연산자를 사용하여 함수를 호출하면 새 구조의 대상은 여기 this 참조입니다.

  function MyName() {
    this.name = "Local Dev";
  }

  MyName.prototype.getName = function() {
    console.log(this.name);
  }

  // `new` binding
  const name_instance = new MyName();
  console.log(name_instance.name);    // Local Dev
  // Implicit Binding
  name_instance.getName();            // Local Dev

여기서 우리는 실례 변수name_instance를 정의했는데 이것은 new 조작 공장 함수MyName의 연산자에 의해 형성된 것이다.

this 함수에서 MyName에 대한 모든 인용은 새로 만든 대상 실례를 가리킨다name_instance

1부터 3까지의 모든 규칙이 이 인스턴스에 적용됩니다(name_instance.

  // Default Binding
    var name = "Global Dev"
    const {getName} = name_instance;
    getName();                                      // Global Dev

  // Implicit Binding
    name_instance.getName();                        // Local Dev

  // Explicit Binding
    name_instance.getName.call({ name: 'New Dev'}); // New Dev

  // Arrow Binding
    MyName.prototype.get_Arrow_Name = () => {
      console.log(this.name);
    }
    name_instance.get_Arrow_Name();                  // Global Dev

반응 클래스:

  class App extends React.Component {
    constructor() {
      this.handle_three = this.handle_three.bind(this);
    }

    handle_one() {
      console.log(this);
    }

    handle_two = () => {
      console.log(this);
    }

    handle_three() {
      console.log(this);
    }

    render() {
      return (
        <React.Fragment>
          {/* Default binding */}
          <div onClick={this.handle_one}></div> 
          {/* Arrow Function */}
          <div onClick={this.handle_two}></div>
          {/* Expicit Binding at constructor*/}
          <div onClick={this.handle_three}></div>
        </React.Fragment>
      )
    }
  }

JSX 요소의 프로세서는 선언된 함수를 호출합니다.

handle_one 첨부 파일은 상하문이 없는 상황에서 함수를 호출합니다 (기본 귀속).이로 인해 undefined React가 기본 귀속 결과가 전역 귀속이 아닌 undefined 임을 확인했기 때문입니다.

handle_two 첨부 파일은 새로 만든 Intsance(현재 응용 프로그램 클래스의 실례) 상하문 호출 함수를 사용합니다.

handle_three 부속품은 구조 함수에서 this 값을 제공하기 위해 현식 귀속을 초래한다.

우리 지금 축하합시다!

이 글을 좋아해 주셨으면 좋겠어요.😄
참고 문헌: Kyle Simpsonthis & Object Prototypes
MyWebsite 및
이게 다야!!!