JavaScript의 this 지향 문제 자세히 보기

글을 쓰다

JS의 this 지향은 초보자들을 골치 아프게 하는 문제였다.오늘, 우리는this가 쓰러진 것이 어떻게 된 일인지 함께 살펴보고,this지향원칙을 상세히 말하며, 이제부터this지향을 위해 더 이상 걱정하지 않는다.

개편

우선 우리는this가 Javascript 언어의 키워드라는 것을 알고 있다.
이것은 함수가 실행될 때, 자동으로 생성된 내부 대상을 대표하며, 함수 내부에서만 사용할 수 있다.함수 사용 장소에 따라this의 값이 변화합니다.그러나 전체적인 원칙이 하나 있다. 바로this의 지향은 함수가 정의될 때 확정할 수 없다. 함수가 실행될 때만this가 누구를 가리키는지 확정할 수 있다. 실제this의 최종 지향은 그 함수를 호출하는 대상이다.그럼 우리 한 걸음 한 걸음 이 문제를 탐색해 봅시다.

탐색 1

function a() {
  var user = " ";
  console.log(this.name); //undefined
  console.log(this); //Window
 }
 a();
 window.a();// 

위에서 말한 바와 같이this의 최종 지향은 그것이 있는 함수를 호출하는 대상입니다. 여기 a는 사실 윈도우즈 대상에서 나온 것입니다.

탐색2

var obj = {
  name: ' ',
  f1: function () {
   console.log(this.name);// 
  }
 };
 obj.f1();

다시 한 번 강조하자면this의 지향은 함수가 정의될 때 확정할 수 없고 함수가 실행될 때만this가 누구를 가리키는지 확정할 수 있다.이 예는this가 있는 f1 함수는obj 대상에서 호출되기 때문에 여기의this는obj 대상을 가리킨다.

탐색 3

만약에this를 철저히 이해하려면 다음 몇 가지 예를 봐야 돼요.

var obj = {
  a: 5,
  b: {
   a: 10,
   fn: function () {
    console.log(this.a); //10
   }
  }
 };
 obj.b.fn();

this의 최종 지향은 그 함수를 호출하는 대상이라고 하지 않았습니까?여기는 왜 obj 대상을 가리키지 않습니까?
여기에 세 가지를 보충해야 한다.

함수에 this가 있지만 이전 단계의 대상에 호출되지 않으면,this가 가리키는 것은 윈도우입니다.

만약에 하나의 함수에 this가 있다면 이 함수는 상급의 대상에 의해 호출된다면this는 상급의 대상을 가리킨다.

만약에 한 함수에this가 있다면 이 함수에는 여러 개의 대상이 포함되어 있다. 비록 이 함수는 가장 바깥쪽의 대상에 의해 호출되었지만,this가 가리키는 것은 그 상급의 대상일 뿐이다.

이것을 보면 여러분이this지향의 원칙을 기본적으로 파악했다고 믿으시죠. 다시 한 번 깨우쳐 읽겠습니다:this지향은 함수가 정의될 때 확정할 수 없습니다. 함수가 실행될 때만this가 누구를 가리키는지 확정할 수 있습니다. 사실this의 최종 지향은 그 함수를 호출하는 대상입니다.

다음에this의 몇 가지 다른 사용 상황을 소개해 드리겠습니다.

구조 함수 (new 키워드) 상황

function Student() {
  this.name = ' ';
 }
 var s1 = new Student();
 console.log(s1.name);//  

여기서 대상 s1이 함수 Student에 있는name을 눌렀을 수 있는 이유는 new 키워드가this의 지향을 바꿀 수 있기 때문입니다. 이this를 대상 s1을 가리킵니다.

// new  
 1.  .
 2.  this .
 3.  this .
 4.  .

타이머의this가 상황을 가리키다

var num = 0;
 function Obj() {
  this.num = 1;
  this.getNum1 = function () {
   console.log(this.num);
  };
  this.getNum2 = function () {
   setInterval(function () {
    console.log(this.num);
   }, 1000);
  };
 }
 var o = new Obj();
 o.getNum1();//1  (o.num)
 o.getNum2();//0 (window.num)

o.getNum2()값이 0인 이유는 바로 여기this지향window이다. 우리의this지향원칙을 꺼내서 설명한다. this지향은 함수가 정의될 때 확정할 수 없고 함수가 실행될 때만 확정할 수 있다. this도대체 누구를 가리키는지, 실제this의 최종 지향은 그 함수를 호출하는 대상이다.
해: this.num이 있는 함수는 타이머setInterval 내의 function () { console.log(this.num);}로,this지향원칙에 따라 이 함수가 실행되면,this지향은 그의 상급 대상을 가리킨다.setInterval, 또setInterval는window점을 찍었기 때문에this가리킨다window.call, apply, bind 방향 변경

var num = 0;
 function Obj() {
  this.num = 1;
  this.getNum1 = function () {
   console.log(this.num);
  };
  this.getNum2 = function () {
   setInterval(function () {
    console.log(this.num);
   }.bind(this), 1000);// bind this 
  };
 }
 var o = new Obj();
 o.getNum1();//1  (o.num)
 o.getNum2();//1 (o.num)
 

설명:
bind() 메서드는 Function입니다.prototype의 한 방법입니다. 귀속 함수가 호출될 때bind 방법은 새로운 함수를 만들고 첫 번째 인자를 새로운 함수로 실행할 때this를 만듭니다.
원칙에 따라:bind 방법을 사용하지 않았기 전: 호출되었을 때: this.num 호출된 함수의 대상, 즉 window.setTimeout 대상을 가리킨다.bind 방법을 사용한 후: 호출되었을 때: 원래this를 → 호출getSum2 함수(바로 새로운this가 있는 함수)의 대상으로 다시 가리킨다.여기 구조 함수는 new를 통해 호출되기 때문에 o 대상을 가리킨다.bind방법은 이 상황에서 비교적 자주 사용되는데 물론 call또는apply방법으로 대체해도 되고 얻은 결과도 정확하지만 call과apply방법은 호출 후 바로 실행되기 때문에 시간 지연 효과가 없고 타이머도 의미가 없다.
이상은 자바스크립트의 this지향 문제에 대한 상세한 내용입니다. 자바스크립트this지향에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!