JavaScript 함수 의 this 네 가지 바 인 딩 형식

본문
 javascript 중의 this 는 함수 와 밀접 한 관 계 를 가지 고 있 기 때문에 오늘 은 제 가 여러분 께 상세 하 게 말씀 드 리 겠 습 니 다:javascript 함수 중의 this
this 에 대해 이야기 하 자 어 지 러 운 추상 적 인 개념 이 많이 뛰 어 나 왔 다.여기 서 나 는 가장 핵심 적 인 점 인 함수 중의 this 가 그 대상 을 호출 하 는 것 을 가리 키 고 다음 이 야 기 는 모두 이 점 을 중심 으로 전 개 될 것 이다.
(앞줄 통 들 에 게 차 와 수박 을 준비 하 라 고 일 깨 워 주 고 이 야 기 를 시작 하 겠 습 니 다!!)
[이야기]한 젊은이 가'디 스'(this)라 고 불 렀 습 니 다.어느 날 디 스 는 부주의 로'가 바스 크 리'(javascript)라 는 다른 세계 로 뛰 어 들 었 습 니 다.지금 디 스 는 한 푼 도 없습니다.그 가 먼저 해 야 할 일 은 바로 그의 숙박 장 소 를 찾 는 것 입 니 다.함수 호출 대상 입 니 다.

this 기본 바 인 딩
[이야기-선로 1]만약 에 디 스(this)가 날 이 어 두 워 지기 전 까지 자신의 거 처 를 찾 지 못 하면 그 는 곧 아프리카 난민 들 의 생활 을 하 게 될 것 이다.이때 선행 을 좋아 하 는 마법사 촌장-window 구세주 처럼 나 타 났 다.먼저 우리 집에 서 살 자! 

[본문]
함수 가 명확 한 호출 대상 이 없 을 때,즉 단순히 독립 함수 로 호출 될 때 함수 의 this 를 기본 으로 연결 합 니 다:전역 window 대상 에 연결 합 니 다.

function fire () {
  console.log(this === window)
}
fire(); //   true

위의 예 를 나 는 대부분의 사람들 에 게 매우 간단 하 다 고 믿 지만,때때로 우 리 는 예 를 바 꾸 면 현혹 성 을 가지 게 될 것 이다.

function fire () {
 //               ！
  function innerFire() {
 console.log(this === window)
  }
  innerFire(); //       
}
fire(); //   true

함수 inner Fire 는 외부 함수 fire 에서 설명 하고 호출 합 니 다.그러면 this 는 누 구 를 가리 키 는 것 입 니까?여전히 window
많은 사람들 이 fire 함수 의 역할 영역 이 inner Fire 에 미 치 는 영향 을 고려 할 수 있 습 니 다.그러나 우 리 는 우리 의 이론 무기 인 명확 한 호출 대상 이 없 을 때 함수 의 this 를 기본 으로 연결 합 니 다.전체적인 window 대상 에 연결 하면 정확 한 답 을 얻 을 수 있 습 니 다. 
다음 강화 판 의 예 도 같은 출력 true 입 니 다.

var obj = {
 fire: function () {
  function innerFire() {
   console.log(this === window)
  }
  innerFire(); //       
  }
}
obj.fire(); //   true

[주의]이 예 에서 obj.fire()의 호출 은 실제 적 으로 this 의 암시 적 바 인 딩 을 사 용 했 습 니 다.이것 이 바로 다음 에 제 가 말 하고 자 하 는 내용 입 니 다.이 예 는 다음 에 계속 설명 하 겠 습 니 다. 
[총 결]모든 함 수 는 독립 함수 로 호출 됩 니 다.그 위치 가 어디 에 있 든 그의 행위 표현 은 전체 환경 에서 직접 호출 하 는 것 과 다 릅 니 다. 
this 의 암시 적 바 인 딩
[이야기-선로 2]디 스(this)가 다른 세계 의'가 바스 크 리'(javascript)로 건 너 왔 을 때 마침 돈 을 가지 고 왔 기 때문에 그 는 호텔 을 찾 아 숙박 했다. 

함수 가 한 대상 에 의 해'포함'되 었 을 때,우 리 는 함수 의 this 가 암시 적 으로 이 대상 에 연결 되 었 다 고 부 릅 니 다.이때,this 를 통 해 연 결 된 대상 안의 다른 속성,예 를 들 어 아래 의 a 속성 을 직접 방문 할 수 있 습 니 다.

var obj = {
  a: 1,
  fire: function () {
   console.log(this.a)
  }
}
obj.fire(); //   1 

지금 우 리 는 평소에 흔히 볼 수 있 는 코드 조작 에 대해 더욱 깊 은 사 고 를 해 야 한다.우선,아래 의 이 두 코드 가 달성 한 효 과 는 같다.

//        
function fire () {
  console.log(this.a)
}
var obj = {
  a: 1,
  fire: fire
 }
obj.fire(); //   1
//        
var obj = {
  a: 1,
  fire: function () {
    console.log(this.a)
   }
}
obj.fire(); //   1

fire 함 수 는 obj 대상 의 내부 와 외부 에 정의 되 어 있 기 때문에 어떠한 차이 도 가지 지 않 습 니 다.즉,상기 암시 적 바 인 딩 의 두 가지 형식 에서 fire 는 this 를 통 해 obj 안의 a 속성 에 접근 할 수 있 습 니 다.이것 은 우리 에 게 알려 줍 니 다. 
1.  this 는 동적 으로 연결 되 어 있 거나,코드 실행 기 에 연결 되 어 있 거나,쓰기 기 에 연결 되 어 있 지 않 습 니 다.
2.  함수 대상 의 독립 성,this 의 전달 분실 문제 
(아래 의 묘 사 는 개인의 감정 적 경향 을 가지 고 엄밀 하지 않 을 수 있 지만 이것 은 내 가 읽 는 사람 이 내 가 표현 하고 자 하 는 뜻 을 최대한 이해 하고 싶 기 때문이다)
암시 적 바 인 딩 에서 대상 속성 으로서 의 함 수 는 대상 에 게 독립 적 입 니 다. 
this 동적 바 인 딩 의 특징 을 바탕 으로 대상 내부 에 쓰 고 대상 속성의 함수 로 서 이 대상 에 게 는 독립 적 입 니 다.(함 수 는 이 외부 대상 에 의 해 완전히 소유 되 지 않 습 니 다) 
내 가 표현 하고 자 하 는 뜻 은 위의 글 에서 함 수 는 대상 의 내부 에 정의 되 었 지만'대상 외부 에서 함 수 를 설명 한 다음 에 대상 내부 에서 속성 명칭 을 통 해 함수 의 인용 을 얻는다'는 것 이다.이 두 가지 방식 은 성질 적 으로 등가 적 이다(효과 만 있 는 것 이 아니 라). 
대상 내부 에 정 의 된 함 수 는'마침 이 대상 에 의 해 호출 될 수 있 습 니 다'일 뿐'태 어 날 때 부터 이 대상 에 의 해 호출 된 것 입 니 다'가 아 닙 니 다. 
아래 의 암시 적 바 인 딩 중의 this 전달 분실 문 제 를 빌려 설명 합 니 다.

var obj = {
  a: 1, // a      obj     1
  fire: function () {
 console.log(this.a)
  }
  }
var a = 2; // a             2
var fireInGrobal = obj.fire; 
fireInGrobal(); //    2

위의 간단 한 코드 의 재 미 있 는 점 은 obj 에 있 는 fire 함수 의 인용(fireInGrobal)이 호출 될 때 행동 표현(출력)이 obj 내부 에서 정 의 된 것 을 전혀 알 수 없다 는 것 입 니 다.그 이 유 는 우리 가 암시 적 으로 연 결 된 this 를 잃 어 버 렸 기 때 문 입 니 다!따라서 fireInGrobal 이 호출 할 때 얻 은 this 는 obj 가 아니 라 window 입 니 다. 
위의 예 는 조금 만 형식 을 바 꾸 면 우 리 를 괴 롭 힐 수 있 는 bug 가 됩 니 다. 
위 에서 우리

var a = 2;
var obj = {
 a: 1, // a      obj    
 fire: function () {
   console.log(this.a)
  }
} 
function otherFire (fn) {
  fn();
} 
otherFire(obj.fire); //   2

관건 적 인 역할 은 otherFire 함수 입 니 다.함수 인용 을 매개 변수 로 받 아들 인 다음 에 내부 에서 직접 호출 합 니 다.그러나 매개 변수 fn 은 this 를 통 해 obj 내부 의 a 속성 을 얻 을 수 있다 고 가정 합 니 다.그러나 실제 this 는 obj 에 대한 바 인 딩 을 잃 어 버 렸 기 때문에 전체 a 의 값(2)을 출력 합 니 다.obj 내부 의 a 값(1)이 아 닙 니 다.
한 줄 의 대상 속성 체인 에서 this 는 가장 안쪽 의 대상 을 연결 합 니 다.
암시 적 바 인 딩 에서 함수 호출 위치 가 대상 속성 체인 에 있 으 면 this 바 인 딩 은 가장 안쪽 대상 입 니 다.다음 과 같다.

var obj = {
  a: 1,
  obj2: {
   a: 2,
   obj3: {
    a:3,
    getA: function () {
     console.log(this.a) 
     }
   }
  }
}
obj.obj2.obj3.getA(); //   3

this 의 명시 적 바 인 딩:(call 과 bid 방법)
[이야기-선로 3]디 스(this)는 다른 세계 의'가 바스 크 리'(javascript)로 건 너 와 노력 한 끝 에 어느 정도 부 를 쌓 았 다.그래서 그 는 자신의 집 을 샀 다.

위 에서 우 리 는 this 의 암시 적 바 인 딩 에 존재 하 는 this 바 인 딩 을 잃 어 버 린 문제,즉'fireInGrobal=obj.fire'에 대해 언급 했다.
fireInGrobal 호출 과 obj.fire 호출 결 과 는 다 릅 니 다.이 함수 가 값 을 부여 하 는 과정 에서 fire 가 연 결 된 this 도 전달 할 수 없 기 때 문 입 니 다.이 럴 때 콜 함수 가 도움 이 됩 니 다.
call 의 기본 사용 방식:fn.call(object)
fn 은 당신 이 호출 한 함수 입 니 다.object 인 자 는 함수 의 this 가 바 인 딩 된 대상 입 니 다.
fn.call(object)의 역할:
1.이 함수 즉시 호출(fn)
2.이 함 수 를 호출 할 때 함수 의 this 는 object 대상 을 가리킨다. 
예:

var obj = {
  a: 1, // a      obj    
  fire: function () {
   console.log(this.a)
  }
}
var a = 2; // a             
var fireInGrobal = obj.fire;
fireInGrobal(); //   2
fireInGrobal.call(obj); //   1

obj 와 연 결 된 this 인 자 를 잃 어 버 렸 던 fireInGrobal 은 다시 this 를 obj 로 묶 었 습 니 다. 
그러나 우 리 는 매번 호출 할 때마다 call 에 의존 하 는 방식 을 그다지 좋아 하지 않 습 니 다.우 리 는 this 가 obj 에 영구적 으로 연 결 된 fireInGrobal 함 수 를 한꺼번에 되 돌려 줄 수 있 기 를 바 랍 니 다.그러면 우 리 는 매번 fireInGrobal 을 호출 할 때마다 꼬리 에 call 을 추가 할 필요 가 없습니다. 
어 떡 하지?똑똑 한 당신 은 반드시 생각 할 수 있 을 것 입 니 다.fireInGrobal.call(obj)밖 에 함 수 를 포장 하면 되 잖 아 요!

var obj = {
  a: 1, // a      obj    
  fire: function () {
  console.log(this.a)
  }
}
var a = 2; // a             
var fn = obj.fire;
var fireInGrobal = function () {
 fn.call(obj) //   
}
fireInGrobal(); //   1 

bid 를 사용 하면 더 쉬 워 집 니 다.

var fireInGrobal = function () {
 fn.call(obj) //   
}

다음 으로 간략화 할 수 있 습 니 다.

var fireInGrobal = fn.bind(obj);

call 과 bid 의 차 이 는:this 를 대상 매개 변수 에 연결 하 는 동시에: 
1.call 은 이 함 수 를 즉시 실행 합 니 다.
2.bid 는 함 수 를 실행 하지 않 고 실행 가능 한 함수 만 되 돌려 줍 니 다. 
[기타]:apply 에 대해 서 는 사용 방법 을 제외 하고 콜 과 큰 차이 가 없 기 때문에 여기 서 군말 하지 않 습 니 다. 
여기 서 저 는 명시 적 바 인 딩 과 암시 적 바 인 딩 에서 함수 와'포함'함수 의 대상 간 의 관 계 를 집 을 사 는 것 과 전세 의 차이 에 비유 합 니 다. 

this 때문에
암시 적 바 인 딩 에서 함수 와'대상 포함'호텔 에 잠시 머 물 렀 을 뿐 며칠 지나 면 또 다른 호텔 에 머 물 렀 을 것 입 니 다.
명시 적 바 인 딩 에서:함 수 는'대상 포함'에서 영주 권 을 얻 고 항상'여기 서 살 것'입 니 다.
새 바 인 딩
[이야기]디 스(this)는 자신의 가정 을 꾸 리 고 여러 아 이 를 낳 았 다(구조 함수 new 를 통 해 여러 대상 을 낳 았 다) 

new 작업 을 수행 할 때 새 대상 을 만 들 고 구조 함수 의 this 를 만 든 새 대상 을 가리 킵 니 다. 

function foo (a) {
  this.a = a;
}
var a1 = new foo (1);
var a2 = new foo (2);
var a3 = new foo (3);
var a4 = new foo (4);
console.log(a1.a); //   1
console.log(a2.a); //   2
console.log(a3.a); //   3
console.log(a4.a); //   4

총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 자 바스 크 립 트 함수 중의 this 네 가지 바 인 딩 형식 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!