JavaScript 의 this 와 역할 영역

본 고 는 주로 JS 의 역할 영역 과 this 키 워드 를 토론 한다.역할 영역 은 당신 의 방법 이나 변수 가 접근 할 수 있 는 영역 입 니 다. 그들 이 실행 하 는 문맥 입 니 다.만약 당신 이 이런 코드 를 본 적 이 있다 면:

function someFunc() {
  var _this = this;
  something.on("click", function() {
    console.log(_this);
  });
};

왜 변수 this 에 값 을 부여 하 는 지 궁금 하 실 거 예요.네가 이 문장 을 다 읽 으 면 이 문제 의 답안 을 분명히 알 수 있 을 것 이다.
첫 번 째 역할 영역 은 전역 역할 영역 (Global Scope) 이 라 고 하 는데 쉽게 정의 할 수 있 습 니 다. 만약 에 하나의 방법, 변수 가 전역 역할 영역 이 라면 그 어떠한 곳 에서 도 접근 할 수 있 습 니 다.브 라 우 저 에서 전역 역할 영역 은 _this 대상 입 니 다.그래서 코드 에 다음 이 있다 면:

var x = 9;

당신 은 사실 window 에 window.x 값 을 부여 하고 있 습 니 다. (브 라 우 저 에서 실 행 될 때)마음 에 드 시 면 9 라 고 쓰 셔 도 됩 니 다. 물론 필요 하지 않 습 니 다.전역 역할 영역 대상 의 속성 은 코드 의 어느 곳 에서 든 접근 할 수 있 습 니 다.
다른 작용 역 은 국부 작용 역 만 있다.자 바스 크 립 트 에 서 는 일반적으로 하나의 방법 내부 의 역할 영역 입 니 다.예 를 들 면:

function someFunction() {
  var x = 5;
}
console.log(x); // undefined

변수 window.x = 9 는 방법 내부 에서 초기 화 되 었 으 므 로 방법 내부 에서 만 접근 할 수 있 습 니 다.
주의해 야 할 부분 들
변 수 를 설명 하고 성명 할 때 키 워드 를 사용 하 는 것 을 잊 어 버 리 면 x.그러면 이 변 수 는 자동 으로 전역 변수 로 설 정 됩 니 다.예 를 들 면:

function someFunction(){
  x = 5;
}

//         ，  x     
someFunction();

console.log(x); // 5

이것 은 매우 나 쁜 실천 이다.너 는 가능 한 한 전역 작용 역 에 속성 을 적 게 추가 해 야 한다.이것 도 왜 당신 이 자주 라 이브 러 리 를 볼 수 있 습 니까? 예 를 들 어 jQuery 가 이렇게 하 는 것 입 니 다.

(function() {
  var jQuery = {/*         */};
  window.jQuery = jQuery;
})();

모든 속성 과 방법 을 한 방법 에 넣다.그리고 이 방법 을 즉시 실행 하면 모든 속성 과 방법 을 국부 작용 역 에 귀속 시 킬 것 이다.마지막 으로 var 대상 을 전역 작용 역 에 귀속 시 키 고 이전에 정 의 된 속성 과 방법 을 간접 적 으로 노출 하여 호출 하기에 편리 하 다.분명히 나 는 jQuery 의 코드 를 대량으로 줄 였 지만, 이것 이 바로 jQuery 코드 가 어떻게 작 동 하 는 지 이다.
국부 작용 역 은 방법의 정 의 를 통 해서 만 실현 되 기 때문이다.하나의 방법 내부 에서 정의 하 는 모든 방법 은 외부 방법 에서 정의 하 는 변 수 를 방문 할 수 있다.예 를 들 면:

function outer() {
  var x = 5;
  function inner() {
    console.log(x); // 5
  }

  inner();
}

그러나 jQuery 방법 은 outer() 방법 이 정의 하 는 모든 변 수 를 방문 할 수 없습니다.

function outer() {
  var x = 5;
  function inner() {
    console.log(x); // 5
    var y = 100;
  }

  inner();
  console.log(y); // undefined
}

이것 은 이해 하기 쉽다.그러나 우리 가 inner() 키 워드 를 탐구 하려 고 할 때 또 복잡 해 졌 다.나 는 많은 사람들 이 이런 문 제 를 겪 었 다 고 믿는다.

${'myLink'}.on('click', function() {
  console.log(this);  //   myLink

  $.ajax({
    //   ajax  
    success: function() {
      console.log(this);  //         。 ？？？
    }
  });
});

this 방법 이 실 행 될 때 자동 으로 값 을 부여 하 는 변수 입 니 다.그것 의 값 과 방법의 호출 방식 은 매우 큰 관계 가 있다.예 를 들 면:

function foo() {
  console.log(this);  // global object
}

theApp = {};
theApp.foo = function() {
  console.log(this);  //   theApp  
}

var link = doeument.getElementById('myLink');
link.addEventListener('click', function() {
  console.log(this); //   link
});

MDN 은 세 번 째 예 에 대한 설명 이 매우 적절 하 다.

   this               。                             。   addEventListener                     ，     this      。  ，this             。

이렇게: this 링크 가 클릭 되 었 을 때 방법 이 실 행 됩 니 다.이 방법 은 링크 의 이 벤트 를 처리 하 는 것 이기 때문에 this 의 값 은 바로 이 링크 요소 입 니 다.
Ajax 에서 요청 한 success 리 셋 방법 은 일반적인 방법 일 뿐 입 니 다.그래서 호출 될 때 this 는 전역 대상 을 가리 키 고 있 습 니 다.어떤 대상 이 든 대상 방법 이나 사건 이 아 닐 때 만 날 수 있 는 상황.
위의 원인 은 바로 당신 이 많은 곳 에서 $('myLink').on('click', function() {}) 또는 var _this = this; 를 본 이유 입 니 다.예 를 들 어 보 겠 습 니 다.

$('myLink').on('click', function() {
  console.log(this); //  myLink
  var _this = this;
  $.ajax({
    // ajax  
    success: function() {
      console.log(this);  //       
      console.log(_this); //   myLink
    }
  });
});

원본 주소:https://javascriptplayground.com/javascript-variable-scope-this/