JS 에서 this 의 4 가지 귀속 규칙 에 대한 상세 한 설명

JS 에서 this 가 뭐 예요?
this 를 이해 하기 전에 먼저 하나의 관점 을 바로 잡 습 니 다. this 는 함수 자 체 를 가리 키 지 않 을 뿐만 아니 라 함수 의 품사 작용 도 메 인 을 가리 키 지 않 습 니 다.
this 의 영어 해석 만 으로 는 오도 하기 쉽다.
그것 은 실제 함수 가 호출 될 때 발생 하 는 바 인 딩 입 니 다. 즉, this 가 무엇 을 가리 키 는 지 는 당신 이 어떻게 호출 하 는 함수 에 달 려 있 습 니 다.즉, 누가 this 를 호출 하면 this 는 누 구 를 가리 키 는 것 이다.
JS 에서 this 설명
ES6 의 화살표 함 수 는 어법 작용 역 을 사용한다.
왜 this 를 사용 합 니까? API 를 더욱 간결 하고 재 활용 하기 쉽게 설계 합 니 다.
this 는 자신 을 가리 키 지 않 고 함수 의 품사 작용 도 메 인 을 가리 키 지 않 습 니 다.
this 의 지향 은 함수 호출 방식 에 만 달 려 있 습 니 다.
이 귀속 규칙
new > 귀속 표시 > 스텔스 귀속 > 기본 귀속
기본 바 인 딩
독립 함수 호출 시 호출 스 택 에 있 든 없 든 this 는 전역 대상 (브 라 우 저 에서 window) 을 가리 키 고 있 습 니 다.
엄격 한 모드 에서 전역 대상 을 기본 바 인 딩 에 사용 할 수 없습니다.

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

암시 적 바 인 딩
함수 가 컨 텍스트 대상 을 참조 할 때 암시 적 바 인 딩 규칙 은 함수 호출 중의 this 를 이 컨 텍스트 대상 에 연결 합 니 다.
대상 속성 참조 체인 에서 마지막 층 만 호출 위치 에서 역할 을 합 니 다.
요구: 대상 내부 에 지향 함수 의 속성 을 포함 해 야 합 니 다. 이 대상 은 이 속성 을 통 해 간접 적 으로 함 수 를 참조 할 수 있 습 니 다.

function foo() {
  console.log( this.a );
}
var obj2 = {
  a: 42,
  foo: foo
};
var obj1 = {
  a: 2,
  obj2: obj2
};
obj1.obj2.foo(); // 42

스텔스 분실

function foo() {
  console.log( this.a );
}
var obj = {
  a: 2,
  foo: foo
};
var bar = obj.foo; //   bar   foo    ，             
var a = "oops, global"; // a        
bar(); // "oops, global"

반전 함수 의 경우 (매개 변수 전달 시의 암시 적 할당)

function foo() {
  console.log( this.a );
}
function doFoo(fn) {
  //      ，   fn = obj.foo，         
  fn(); //  
 

명시 적 바 인 딩
콜 () 과 apply () 를 사용 하여 대상 (기본 형식 이면 패 키 징 함수 가 대상 - 포장) 으로 전 환 됩 니 다. this 를 이 대상 에 연결 합 니 다.
하 드 바 인 딩

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

하 드 바 인 딩 의 전형 적 인 응용 은 다음 과 같은 패키지 함수 입 니 다.

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

내부 함수 가 apply 로 특정한 대상 에 하 드 바 인 딩 될 것 입 니 다. 이 패키지 함 수 를 어떻게 호출 하 든 내부 함수 의 this 에 영향 을 주지 않 습 니 다.
bid 보조 함 수 는 다음 과 같 습 니 다.

function foo(something) {
  console.log( this.a, something );
  return this.a + something;
}
// simple `bind` helper
function bind(fn, obj) {
  return function() {
    return fn.apply( obj, arguments ); //      obj    
  };
}
var obj = {
  a: 2
};
var bar = bind( foo, obj ); // bind( foo, obj )         
var b = bar( 3 ); // 2 3
console.log( b ); // 5

요약: 상기 소포 함 수 는 다른 함 수 를 감 싸 려 면 한 개 만 중복 적 으로 쓸 수 있 고 하 드 인 코딩 방식 으로 재 활용 되 지 못 하 며 특정한 기능 이 여러 번 반복 적 으로 사용 해 야 할 때 이 를 추상 화하 여 함수 가 됩 니 다.
새 바 인 딩
모든 함수 가 구조 함수 로 사 용 될 수 있 습 니 다. 함수 가 new 연산 자 '구조 호출' 되 었 을 때 다음 작업 을 수행 합 니 다.
1. 새 대상 만 들 기 (이 함수 가 JS 내 장 된 것 이 아니라면 새 Object 대상 만 들 기);
2. this 를 이 대상 에 귀속 하기;
3. 구조 함수 의 코드 를 실행 합 니 다 (이 새 대상 에 속성 추가).
4. 함수 가 다른 대상 으로 돌아 가지 않 으 면 자동 으로 이 새 대상 으로 돌아 갑 니 다.함수 에 return 이 돌아 오 는 시비 대상 이 있 으 면 자동 으로 이 새 대상 을 되 돌려 줍 니 다. 즉, 그 비 대상 을 덮어 씁 니 다.

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

보충 설명
간접 인용

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()，   p.foo() o.foo()

화살표 함수: 이 네 개의 this 규칙 을 사용 하지 않 고 문법 작용 역 에 따라 this 를 결정 합 니 다.

function foo() {
  //         
  return (a) => {
    // `this` here is lexically adopted from `foo()`
    console.log( this.a );
  };
}
var obj1 = {
  a: 2
};
var obj2 = {
  a: 3
};
// foo()      ，  this    obj1
var bar = foo.call( obj1 ); // foo.call( obj1 )      ，  bar     
bar.call( obj2 ); // 2!      this     ，new   

화살표 함수 와 같은 모드 입 니 다:

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

JS 의 this 대상 에 관 한 더 많은 글 은 아래 링크 를 클릭 하 실 수 있 습 니 다.