Javascript 의 this 상세 설명

javascript 의 this 를 이해 하기 전에 먼저 역할 영역 을 알 아 보 세 요.
역할 영역 은 두 가지 로 나 뉜 다.

1.품사 역할 영역:엔진 은 현재 역할 영역 이나 포 함 된 하위 역할 영역 에서 이름 식별 자 를 가 진 변 수 를 찾 습 니 다.(엔진 은 어떻게 찾 고 어디서 찾 습 니까?정의 과정 은 코드 작성 단계 에서 발생 합 니 다)

2.동적 역할 영역:운행 할 때 동적 으로 확 정 된 역할 영역.

문법 작용 역 과 동적 작용 역 의 차 이 는 다음 과 같다.문법 작용 역 은 코드 를 쓰 거나 정 의 를 내 릴 때 확정한다.동적 역할 영역 은 실행 중 에 확 정 됩 니 다.
this 바 인 딩 규칙
this 는 호출 할 때 바 인 딩 되 어 함수 의 호출 위치 에 달 려 있 습 니 다.이 를 통 해 알 수 있 듯 이 일반적인 상황 에서(엄격 하지 않 은 모드 에서)this 는 함수 호출(스 택 호출)의 문맥 에 따라 대상 을 연결 합 니 다.
1.기본 바 인 딩
기본 바 인 딩:기본 바 인 딩 은 엄격 하지 않 은 모드 에서 다른 바 인 딩 규칙 을 사용 하지 않 았 을 때 this 는 함수 호출(스 택 호출)의 문맥 에 따라 대상(전체 대상)을 바 인 딩 하 는 것 을 말 합 니 다.(엄격 한 모드 에서 undefined 바 인 딩)
밤 을 들다

function foo() {
  console.log(this.a);
};
function bar() {
  var a = 3;
  foo();
}
var a = 2;
bar(); //         ，this      

실행 결과:2
//"use strict"실행 결 과 를 더 하면 this is undefined 가 됩 니 다.
이 함수 호출 시 기본 바 인 딩 을 사 용 했 습 니 다.함수 호출(스 택 호출)의 컨 텍스트 는 전역 역할 영역 이기 때문에 this 는 전역 대상(global)을 바 인 딩 했 습 니 다.
eg2:

function foo() {
  console.log(this.a)
};
var a = 2;
(function() {
  "use strict"
  foo();
})();

실행 결과:2
 여기 서 주의해 야 할 것 은 기본 바 인 딩 에 대해 this 바 인 딩 대상 이 호출 위치 가 엄격 한 모드 에 있 는 지 여 부 를 결정 하 는 것 이 아니 라 함수 체 가 엄격 한 모드 에 있 는 지 여부 입 니 다(함수 체 가 엄격 한 모드 에 있 으 면 this 바 인 딩 undefined;그렇지 않 으 면 this 바 인 딩 전역 대상).또한 엄격 한 모델 과 비 엄격 한 모델 은 연결 이 가능 하지만 혼용 하지 않 는 것 이 좋다.
간접 인용 은 일반적으로 기본 바 인 딩 규칙 을 적용 합 니 다.

function foo() {
  console.log(this.a);
};
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo();  //3
(p.foo = o.foo)(); //2

할당 식 p.foo=o.foo 의 반환 값 은 대상 함수 foo 를 직접 참조 합 니 다.
2.암시 적 귀속
암시 적 바 인 딩:문맥 대상 에서 호출 하여 문맥 대상 에 바 인 딩 합 니 다.
밤 을 들다

function foo() {
  console.log(this.a);
};
var obj = {
  a: 2,
  foo: foo
};
obj.foo();  //2
foo();    //undefined

이 코드 에 서 는 foo()가 참조 속성 으로 obj 대상 에 추가 되 었 습 니 다.obj 가 이 참조 속성 함 수 를 호출 할 때 이 참조 속성 컨 텍스트 를 사용 합 니 다.this 는 obj 대상 에 연 결 됩 니 다.(이 함 수 는 엄 밀 히 말 하면 obj 대상 에 속 하지 않 고 인용 속성 으로 만 사용 합 니 다.스텔스 귀속 에 속 합 니 다.
아래 foo()함수 의 직접 실행 은 obj 대상 참조 가 아니 므 로 문맥 대상 은 전체 대상 입 니 다.그래서 this 는 undefined 를 연결 하 였 습 니 다.기본 귀속 에 속 합 니 다.
대상 인용 체인 에서 윗 층 만 있 거나 마지막 층 이 호출 위치 에서 작용 한다.
주의:
1.스텔스 귀속 함 수 는 귀속 대상 을 잃 어 버 립 니 다.이 때 기본 바 인 딩 을 사용 합 니 다.this 를 전체 대상 이나 undefined 에 연결 합 니 다.엄격 한 모드 인지 여부 에 달 려 있 습 니 다.
eg:

function foo() {
  console.log(this.a);
};
var obj = {
  a: 2;
  foo: foo
}
var bar = obj.foo;
var a = 'biubiubiu';
bar();

실행 결과:"biubiubiu"
해석:bar 는 obj.foo 의 인용 인 것 같 습 니 다.실제로 bar 는 함수 foo 를 직접 참조 하여 단순 한 함수 호출 이 므 로 기본 바 인 딩 입 니 다.
2.매개 변수 전달 은 암시 적 할당 이 므 로 함수 에 들 어 갈 때 도 암시 적 할당 을 받는다.
eg:

function foo() {
  console.log(this.a);
};
var obj = {
  a: 2,
  foo: foo
};
function bar(fn) {
  fn();
};
var a = "biubiubiu";
bar(obj.foo);

실행 결과:"biubiubiu"
해석:실제 매개 변수 도 암시 적 할당 이지 만 매개 변 수 는 함수 에 들 어가 함수 에서 실 행 됩 니 다.이때 도 함수 foo 를 직접 인용 하 였 기 때문에 단순 한 함수 호출 이 며 기본 바 인 딩 을 사용 하 였 습 니 다.
3.함 수 를 언어 내 장 된 함수 에 전달 합 니 다.(위의 상황 과 대체적으로 비슷 합 니 다.자신의 성명 함 수 를 언어 내 장 된 함수 로 바 꿉 니 다)리 셋 함수 가 this 를 잃 어 버 리 는 경우 가 흔 합 니 다.게다가 리 셋 함 수 를 호출 하 는 함수 도 this 를 수정 할 수 있 습 니 다.
3.명시 적 바 인 딩
명시 적 바 인 딩:지정 한 대상 에 this 를 직접 연결 합 니 다.Javascript 에서 절대 다수의 함수 와 자신 이 만 든 함 수 는 모두 이 두 가지 명시 적 바 인 딩 방법 을 사용 할 수 있 습 니 다.
1、.call()
2、.apply()
이 두 가지 바 인 딩 방법,첫 번 째 매개 변 수 는 this 바 인 딩 대상 입 니 다.(들 어 오 는 인자 가 원본 값(문자열 형식,불 형식,숫자 형식)이면 이 원본 값 은 대상 형식(new String,new Boolean,new Number)으로 전 환 됩 니 다.
밤 을 들다

function foo() {
  console.log(this.a);
};
var obj = {
  a: 2
};
foo.call(obj);

실행 결과:2
 거위,바 인 딩 이 바 인 딩 을 잃 어 버 린 문 제 를 해결 할 수 없다 는 것 을 보 여 줍 니 다.이때 새로운 친구 가 왔 습 니 다.
3.bid()(하 드 바 인 딩 은 흔히 볼 수 있 는 장면 이기 때문에 es5 는 이 내 장 된 방법 Function.prototype.bid 를 제공 합 니 다.)
bid()는 새로운 인 코딩 함 수 를 되 돌려 주 고 this 를 지정 한 매개 변수 에 연결 하고 함 수 를 호출 합 니 다.
밤 을 들다

function foo(e) {
  console.log(this.a + e);
  return this.a + e;
};
var obj = {
  a: 2
}
var bar = foo.bind(obj); //     
var b = bar(3); // 2 3
console.log(b); // 5

bid()는 또 하나의 기능 이 있 습 니 다.this 를 연결 하 는 첫 번 째 매개 변 수 를 제외 한 다른 매개 변 수 를 하층부 에 전달 하 는 함수(일부 응용 은'코 리 화'의 일종)입 니 다.
여기 에는 null 또는 undefined 를 this 의 바 인 딩 대상 으로 call,apply,bid 에 전송 하 는 개념 이 있 습 니 다.이 값 들 은 호출 할 때 무시 되 고 실제 적 으로 기본 바 인 딩 규칙 을 사용 합 니 다.
응용 필드:

1.apply()를 사용 하여 배열 을 펼 치고 매개 변수 로 함수 에 전달 합 니 다.

2.bid()는 매개 변 수 를 코 리 화 합 니 다(일부 매개 변 수 를 미리 설정 합 니 다).

밤 을 들다

function foo(a,b) {
  console.log("a:" + a + ",b:" + b);
};
//  “  ”   
foo.apply(null,[2,3]); //a:2,b:3
//bind()   
var bar = foo.bind(null,2);
bar(3); //a:2,b:3

해석:this 바 인 딩 대상 으로 매개 변 수 를 입력 하고 전송 하지 않 으 면 자리 표시 자(null)를 사용 합 니 다.이 때 기본 바 인 딩 규칙 을 사용 합 니 다.
위의 이 예 는 어느 정도 부작용 이 생 길 수 있 으 며,이런 장면 을 활용 해 야 한다 면 더욱 안전 하 다.빈 대상 을 만 들 수 있 습 니 다.

var ∅ = Object.create(null);
//            ：
foo.apply(∅,[2,3]); //a:2,b:3
var bar = foo.bind(∅,2);
bar(3); //a:2,b:3

메모:하 드 바 인 딩 후 암시 적 바 인 딩 과 명시 적 바 인 딩 을 사용 하여 this 를 수정 할 수 없습니다.
소프트 바 인 딩 방법 softBind()를 소개 합 니 다.this 가 전체 대상 이나 undefined 에 연결 되 어 있 는 지 확인 한 후 this 를 지정 한 기본 대상 에 연결 합 니 다.바 인 딩 후 효 과 는 하 드 바 인 딩 과 같 지만 암시 적 바 인 딩 이나 명시 적 바 인 딩 을 유지 하여 this 를 수정 하 는 능력 을 유지 합 니 다.
4.new 귀속
자바 script 의 new 메커니즘 은 클래스 언어 와 완전히 다르다.자바 script 에서 구조 함 수 는 new 연산 자 를 사용 할 때 호출 되 는 함수 일 뿐 하나의 클래스 에 속 하지 않 고 하나의 클래스 를 예화 하지 않 습 니 다.함수 에 대한 구조 호출 이 라 고 합 니 다.
밤 을 들다

function foo(a) {
  this.a = a;
}
var bar = new foo(2);
console.log(bar.a); //2

new 를 사용 하 는 과정 에서 새로운 대상 을 만 듭 니 다.this 는 이 새 대상 을 연결 합 니 다.함수 가 다른 대상 을 되 돌려 주지 않 으 면 new 표현 식 함수 호출 은 새 대상 을 되 돌려 줍 니 다.(이 새 대상 은 prototype 에 연 결 됩 니 다)
네 가지 바 인 딩 규칙 의 우선 순 위 는 new>명시 적>암시 적>기본 값 입 니 다.
화살표 함수
화살표 함 수 는 외층 작용 역(함수 또는 전역)에 따라 this 를 결정 합 니 다.(이 메커니즘 대신 어법 작용 영역)
화살표 함수 this 는 호출 대상 을 연결 하고 화살표 함수 의 바 인 딩 을 수정 할 수 없습니다(new 도 안 됩 니 다).
사실은 화살표 함수 의 this 가 문법 적 으로 그 가 있 는 역할 영역(함수 또는 전체)의 this 를 계승 하고 계승 하 는 함수 역할 영역 인 this 바 인 딩 은 이 함수 에서 문맥 대상 을 호출 하기 때문에 화살표 함수 의 this 는 문맥 대상 에 간접 적 으로 연결 되 어 있 습 니 다.
약술:화살표 함수 this(귀속 작용 역 this)--작용 역 this(호출 상하 문 대상 에 귀속).
그러므로:화살표 함수 this==호출 된 상하 문 대상
밤 을 들다

function foo() {
  setTimeout(function() {
    //   this       foo()
    console.log(this.a);
  },100);
};
var obj = { a: 2 };
foo.call(obj); //2

사실 이 밤 도 다음 과 같다.

function foo() {
  var that = this; //lexical capture of this
  setTimeout(function() {
    console.log(self.a)
  },100);
}
...     

그래서 두 가지 스타일 이 있 습 니 다.this 스타일(네 가지 규칙)과 품사 역할 도 메 인 스타일(that=this 와 화살표 함수)은 사용 할 수 있 습 니 다.사용 할 때 되도록 혼용 을 피해 야 한다.그렇지 않 으 면 유지 하기 어 려 운 결 과 를 초래 할 수 있다.
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 자바 script 의 this 역할 에 대한 상세 한 해석 과 통합 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!