JavaScriptthis 관련 원리 및 인스턴스 분석

자바스크립트를 처음 배웠을 때 그 중에서this의 지향 문제가 나를 골치 아프게 했던 것을 기억한다. 나는 그것을 폐쇄, 원형(원형체인)과 함께 JS무림의 3대 마두라고 불렀다.만약 네가 JS무림에서 한 쪽을 제패하려면 반드시 이 3대 마두를 쓰러뜨려야 한다.개인적으로 이 3대 마두 중this가 문제를 가리키는 무공이 가장 나쁘다고 생각한다.속담에 감이 부드러운 것을 줍는다고 했는데, 그러면 우리는this에서 문제를 가리키는 것부터 시작하자.
먼저this가 문제를 가리키는 구결을 공략하는 것을 기억하십시오 (선배들의 총결): 어떤 대상이 함수를 호출하는지, 함수 속의this는 기본적으로 어떤 대상을 가리키는지 주의하십시오 (this는 대상만 가리키는 것을 주의하십시오).여기서'기본 지향'이라고 하는 것은 화살표 함수,call,apply,bind 등 수단을 통해this의 지향을 바꾸기 때문입니다.지금 우리는this의 기본 지향만 토론합니다.
전역 역할 영역과 전역 역할 영역의 함수에서this는 기본적으로 전역 대상 윈도우를 가리킨다
엄격한 모드에서 전역 작용역의 함수에서this는 기본적으로undefined를 가리키는데 이것은 엄격한 모드에 규정된 것이다.

//  
console.log(this); // Window
function doSomething(){
  console.log(this); // Window
}
doSomething(); //  window.doSomething()， this window
//  
'use strict';
console.log(this); // Window
function doInStrict(){
  console.log(this); // undefined
}
doInStrict();

대상의 함수,this는 이 대상을 가리킨다

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

위 함수가 호출된 후, 인쇄 결과에서 알 수 있듯이this는 호출 함수의 대상obj를 가리킨다.대상의 함수를 전역 대상에 정의된 변수 fn1에 부여하면 fn1을 실행하면 어떤 결과가 나올까요?

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

위의 예에서 알 수 있듯이 fn1과obj.fn이 가리키는 함수는 같지만 호출하는 대상이 다르면 함수에서this의 가리키는 함수도 다르다.
비교적 복잡한 예를 하나 더 보자.

var a = 0;
function fn(){
	consoloe.log(this.a);
}
var obj1 = {
	a: 1,
	fn: function(){
		console.log(this.a);
	}
};
var obj2 = {
	a: 2,
	fn: function(){
		fn();
		obj1.fn();
		console.log(this.a);
	}
}
obj2.fn();

먼저 실행 결과를 말하고 각각 012를 인쇄합니다.obj2가 fn 함수를 호출할 때 fn () 을 먼저 실행합니다. 이 함수는 전역 작용 영역에서 정의된 것입니다. 이 호출은 윈도우로 볼 수 있습니다.fn (), 따라서 이 함수 내부의this는 윈도우 전역 대상,this를 가리킨다.a는 당연히 전역 대상의 a값(0)이다.
이어서 obj1을 수행했습니다.fn (), 이것은 obj1에서 fn 함수를 찾아 실행합니다.obj1의 함수 fn을 실행할 때 호출하는 대상은obj1입니다. 따라서 이 때 함수 내부의this가 가리키는 것은obj1 자신입니다.그럼 이게.a가 찾은 값은 대상obj1에서 a의 값(1)이다.
마지막으로 인쇄 함수에서this가 있는 함수 fn은obj2에 호출된 것입니다. 그러면 자연스럽게this는obj2를 가리키기 때문에this.a의 결과는 2입니다.
상기 예에서 알 수 있듯이 함수 내부this는 호출 함수의 대상과 관련이 있고 함수가 어디에서 호출되는지와 관계가 없다.
윈도우 내장 함수의 리셋 함수에서this는 윈도우 대상을 가리킨다.
윈도우의 내장 함수 (setInterval setTimeout 등) 는 리셋 함수 중this가 윈도우 대상을 가리킨다.

var name = 'window';
var obj = {
  name: 'obj',
  func: function(){
    setTimeout(function () {
      console.log(this.name) // window
    },1000)
  }
}

obj.func()

그러나 일반적으로 개발 과정에서 많은 장면들이this의 지향을 바꿔야 한다.뒤에 나는this의 지향을 바꾸는 것에 관한 문장을 전문적으로 쓸 것이다. 여기는 더 이상 군더더기 없이 설명하지 않을 것이다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.