JavaScript를 마스터하는 마지막 단계 '이'키워드

javaScript

키워드의 기본 사용법은 이전 기사에서 설명되었습니다. 포인팅의 열쇠는 런타임 컨텍스트입니다. 그러나 상황이 기대 이상으로 바뀌면 문제가 발생합니다. 이 기사는이 상황과 해결 방법에 중점을 둘 것입니다.

this 코어 포인트 this

javaScript의 키워드는 현재 실행 컨텍스트를 가리키며, 특히 객체 지향 프로그래밍 또는 에 크게 의존하는 프레임 워크 및 라이브러리를 사용하는 경우 개체를 조작하고 상호 작용하는 데 필수적입니다. 키워드

의 일반적인 문제에는 추출 된 방법, 콜백 함수 및 클로저에서의 사용이 포함됩니다. 이러한 문제는 메소드를 사용하여
• 키워드를 올바른 개체에 명시 적으로 바인딩하여 해결할 수 있습니다. this ecmAScript 6은 직접 동봉 범위에서 this
• 의 값은 함수가 호출되는 방식에 따라 다릅니다. 이 방법에서 는 정상적인 함수에서 this를 가리 킵니다. 이벤트 핸들러에서 새로 생성 된 객체를 가리 킵니다. bind() this
FAQ를 해결
• this 이 섹션에서는 키워드를 사용할 때 발생하는 가장 일반적인 문제 중 일부를 탐색하고이를 해결하는 방법을 배우게됩니다. this
1. 추출 방법에서 사용하십시오
• 의 가장 일반적인 실수 중 하나는 객체의 메소드를 변수에 할당하려고하고 this가 원래 객체를 가리키기를 기대하는 것입니다. 다음 예에서 볼 수 있듯이 이것은 작동하지 않습니다. this this new가 this에 대한 참조 인 것처럼 보이더라도 실제로는 this 자체에 대한 또 다른 참조 일뿐입니다. 우리는 이미 통화 위치가 컨텍스트를 결정한다는 것을 알고 있으며 여기서는 전화 위치가 call()이며 이는 간단한 기능 호출입니다. apply()가베이스가없는 함수를 가리키려면 (특정 객체에 바인딩되지 않은 함수) 코드 하단에 bind()를 추가하면 다음 출력이 표시됩니다. this.

  var car = {
    brand: "Nissan",
    getBrand: function() {
      console.log(this.brand);
    }
  };
  
  var getCarBrand = car.getBrand;
  
  getCarBrand(); // 输出：undefined

  <🎜 🎜> <<>에는 하나의 일반 함수 만 포함되어 있으며, 이는 더 이상 <🎜 객체의 멤버 메소드가 아닙니다. 따라서이 경우 는 실제로

  로 변환됩니다. 물론 정의되지 않았습니다. 객체에서 메소드를 추출하면 다시 정상적인 기능이됩니다. 물체와의 연결은 차단되며 더 이상 예상대로 작동하지 않습니다. 다시 말해, 추출 된 함수는 취한 객체에 바인딩되지 않습니다. 그래서 우리는 어떻게 그것을 해결합니까? 원래 객체에 대한 참조를 유지하려면 <🎜 🎜> 함수를 <🎜 🎜> 변수에 할당 할 때 getCarBrand 함수를 car 객체에 명시 적으로 바인딩해야합니다. <<> 방법을 사용하여 달성 할 수 있습니다. this.brand window.brand 이제 우리는 우리가 원하는 모습에 대한 컨텍스트를 성공적으로 재정의했기 때문에 올바른 출력을 얻습니다. getBrand() 콜백 함수에서 getCarBrand <<> 2 다음 문제는 콜백 함수로 메소드를 통과 할 때 발생합니다. 예를 들면 : getBrand() car 우리가 bind()를 사용하더라도 실제로 버튼 객체에 <🎜 🎜>가 첨부 된 함수 만 얻습니다. 매개 변수를 함수로 전달하는 것은 암시 적 할당이므로 여기서 발생하는 일은 이전 예제와 거의 동일합니다. 차이점은 이제 가 명시적인 할당이 아니라 암시 적 할당이라는 것입니다. 결과는 거의 동일합니다. 우리가 얻는 것은 버튼 객체에 바인딩되는 일반적인 기능입니다. 다시 말해서, 객체에서 메소드를 실행할 때, 객체는 원래 메소드를 정의한 객체와 다르며

  키워드는 더 이상 원래 오브젝트가 아니라 메소드를 불리는 객체를 가리킨다. 우리는 원래 정의 된 <🎜 🎜> 객체 대신 <🎜 (버튼 요소)에서

  function(){
    console.log(this.brand);
  }

  를 실행합니다. 그러므로 는 더 이상

  를 가리키지 않고 <🎜 🎜>를 가리 킵니다. 원래 객체에 대한 참조를 변경하지 않으려면 <🎜 object> 메소드를 사용하여 <🎜 🎜> 함수를

  객체에 명시 적으로 바인딩해야합니다.

  이제 모든 것이 예상대로 작동합니다. this <<> 3

  <🎜 🎜>의 컨텍스트가 잘못 될 수있는 또 다른 상황은 우리가 폐쇄 내에서

  를 사용한다는 것입니다. 다음 예를 고려하십시오 : this 여기서 출력은

  입니다. 클로저 함수 (내부 함수)가 외부 함수의 <🎜 🎜> 변수에 액세스 할 수 없기 때문입니다. 내부 함수에서

  var getCarBrand = car.getBrand.bind(car);
  getCarBrand(); // 输出：Nissan

  가 글로벌 오브젝트에 바인딩되기 때문에 최종 결과는 가

  와 동일하다는 것입니다. 이 문제를 해결하기 위해서는 car.getBrand를 <🎜 🎜> 함수에 바인딩해야합니다. getBrand() car.getBrand 이 결합은 this와 동일합니다. 클로저를 수정하는 또 다른 인기있는 방법은 <🎜 값을 다른 변수에 할당하여 예상치 못한 변경을 방지하는 것입니다. el

  var car = {
    brand: "Nissan",
    getBrand: function() {
      console.log(this.brand);
    }
  };
  
  var getCarBrand = car.getBrand;
  
  getCarBrand(); // 输出：undefined

  여기서 <🎜 값은 <🎜

  , this, _this, that, self에 할당 될 수 있습니다. , <🎜 🎜>, me, my, 대상의 가명 또는 귀하에게 적합한 다른 이름. 열쇠는 원래 객체에 대한 참조를 유지하는 것입니다. context

  <<> ecmascript의 구출 6

  이전의 예에서는 <🎜 값을 다른 변수에 할당 할 때 소위 "어휘 메소드 "를 볼 수 있습니다. ECMAScript 6에서는 유사하지만 더 우아한 기술을 사용하여 새로운 화살표 기능으로이를 달성 할 수 있습니다. 화살표 함수는

  키워드가 아니라 소위 "Fat Arrow"연산자 (<🎜 🎜>)에 의해 생성됩니다. 일반 함수와 달리 화살표 함수는 직접 밀폐 된 범위에서

  값을 얻습니다. 화살표 함수의 어휘 결합은 this 연산자를 사용하더라도 덮어 쓸 수 없습니다. 이제 화살표 함수를 사용하여 this 문을 대체하는 방법을 살펴 보겠습니다. function => this <<> 기억해야 할 사항 new <🎜 🎜> <<> 우리는 다른 메커니즘과 마찬가지로 var self = this; 키워드를보고 간단한 규칙을 따르고 이해하면 더 많은 자신감을 가지고 메커니즘을 사용할 수 있습니다. 그래서, 우리가 배운 내용 (이 기사와 이전 기사에서)을 간단히 살펴 보겠습니다.

  다음 경우

  function(){
    console.log(this.brand);
  }

  는 글로벌 대상을 가리 킵니다. 가장 바깥 쪽 컨텍스트에서 기능 블록 외부.

  객체 메소드가 아닌 함수에서. 객체 생성자가 아닌 함수에서 . this

  함수가 부모 객체의 속성으로 호출되면

  는 부모 객체를 가리 킵니다. this 함수가 또는 를 사용하여 호출되면이 메소드로 전달 된 첫 번째 매개 변수를 가리 킵니다. 첫 번째 매개 변수가

  이거나 객체가 아닌 경우
  • 는 전역 객체를 가리 킵니다. this
    연산자를 사용하여 함수를 호출 할 때 는 새로 생성 된 객체를 가리 킵니다.
    • 화살표 함수를 사용할 때 (ECMAScript 6에 소개 됨)
    는 어휘 스코프에 따라 다르며 부모 객체를 가리 킵니다.
    이러한 단순하고 명확한 규칙을 배우면
    • 가 무엇을 가리키는 지 쉽게 예측할 수 있으며, 그것이 원하는 것이 아닌 경우, 어떤 방법을 사용하여이를 수정할 수 있는지 알 수 있습니다.
    요약
  javaScript의
  • 키워드는 마스터하기 어려운 개념이지만 더 많은 연습으로 마스터 할 수 있습니다. 이 기사와 이전 기사가 귀하의 이해의 기초가되며 다음에 두통을 줄 때 귀중한 참조가되기를 바랍니다. this javaScript
  키워드 (FAQS)의 FAQ
  • (FAQ 부품은 너무 길고 이전 내용과 함께 복제되어 있기 때문에 여기서 생략됩니다. FAQS 부분은 더 일찍 자세히 설명되었습니다.)

위 내용은 JavaScript를 마스터하는 마지막 단계 '이'키워드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!