JavaScript에서this의 지향 문제를 간단히 설명합니다.

JavaScript에서 this 지향 문제
자바스크립트를 처음 배웠을 때 그 중에서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의 지향을 바꿔야 한다.참고 JS에서this가 가리키는 변경 사항, 여기는 더 이상 군더더기 없습니다.
this는 함수 자체도 가리키지 않고 함수의 어법 작용역도 가리키지 않는다.this는 실제로 함수가 호출될 때 발생하는 귀속이다. 무엇을 가리키는지는 함수가 어디에서 호출되는지에 달려 있다.
함수가 직접 호출되는 위치를 찾은 후 아래의 몇 가지 규칙을 사용하면this의 귀속 대상을 판단할 수 있습니다.

new에서 호출합니까?새로 만든 실례 대상에 연결합니다.

call,apply,bind에서 호출합니까?지정한 대상에 귀속합니다.

컨텍스트 객체에서 호출됩니까?그 상하문 대상에 귀속되다.

기본값: 엄격한 모드에서 undefined에 귀속합니다. 그렇지 않으면 전역 대상 윈도우에 귀속됩니다.

ES6의 화살표 함수는 외부 함수에서 호출된this귀속을 계승합니다. 이것은 varself=this와 같습니다.의 귀속 메커니즘과 같습니다.

JavaScript에서this의 지향 문제에 대한 간단한 설명을 드리겠습니다. 더 많은 JavaScript에서this가 지향하는 문제의 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!