Javascript에서 "This"의 고급 사용법을 드디어 알게 되었습니다.

이 간단한 강좌에서, 우리는 7개의 다른 예를 통해 자바스크립트에서'this'를 어떻게 사용하는지 배울 것이다.

함수가 화살표 함수로 정의된 경우: {:#arrow functions}

const arrowFunction = () => {
  console.log(this);
};

이 경우 this의 값은 항상 상위 범위의 this와 같습니다.

const outerThis = this;

const arrowFunction = () => {
  // Always logs `true`:
  console.log(this === outerThis);
};

화살표 함수는 매우 좋습니다. this 의 내부 값은 변경할 수 없기 때문에, 항상 같습니다.
외부로this.

기타 예

화살표 기능을 사용하여 this 값bind을 변경할 수 없습니다.

// Logs `true` - bound `this` value is ignored:
arrowFunction.bind({foo: 'bar'})();

화살표 기능을 사용하여 this or call 값apply을 변경할 수 없습니다.

// Logs `true` - called `this` value is ignored:
arrowFunction.call({foo: 'bar'});
// Logs `true` - applied `this` value is ignored:
arrowFunction.apply({foo: 'bar'});

arrow 함수에 대해서는 함수의 구성원으로 함수를 호출하여 this의 값을 변경할 수 없습니다
다른 대상:

const obj = {arrowFunction};
// Logs `true` - parent object is ignored:
obj.arrowFunction();

arrow 함수에 대해 함수를 함수로 호출하여 this의 값을 변경할 수 없습니다
건설사:

// TypeError: arrowFunction is not a constructor
new arrowFunction();

바인딩 인스턴스 방법

실례 방법에 대해 this 시종일관 클래스 실례를 인용하는 것을 확보하려면
화살표 함수 및 class
fields를 사용하는 방법:

class Whatever {
  someMethod = () => {
    // Always the instance of Whatever:
    console.log(this);
  };
}

인스턴스 방법을 어셈블리로 사용하는 경우(예:
React 구성 요소 또는 웹 구성 요소).
이 내용은'아버지 범위'this와 this의 경계를 깨뜨렸다고 느끼게 할 수 있다.
규칙, 그러나 만약 당신이 클래스 필드가 물건을 설정하는 문법 설탕이라고 생각한다면, 그것은 의미가 생기기 시작할 것이다
구조 함수에서 다음을 수행합니다.

class Whatever {
  someMethod = (() => {
    const outerThis = this;
    return () => {
      // Always logs `true`:
      console.log(this === outerThis);
    };
  })();
}

// …is roughly equivalent to:

class Whatever {
  constructor() {
    const outerThis = this;
    this.someMethod = () => {
      // Always logs `true`:
      console.log(this === outerThis);
    };
  }
}

대체 모드는 귀속 구조 함수 중의 기존 함수나 분배를 포함한다
구조 함수 중의 함수.클래스 필드를 사용할 수 없는 경우
건설업자는 합리적인 선택이다.

class Whatever {
  constructor() {
    this.someMethod = () => {
      // …
    };
  }
}

그렇지 않으면 new 호출 함수/클래스를 사용합니다: {:#new}

new Whatever();

상기 함수는 호출Whatever(클래스라면 구조 함수를 호출)하고 this를
결과Object.create(Whatever.prototype).

class MyClass {
  constructor() {
    console.log(
      this.constructor === Object.create(MyClass.prototype).constructor,
    );
  }
}

// Logs `true`:
new MyClass();

구식 구조 함수도 마찬가지다.

function MyClass() {
  console.log(
    this.constructor === Object.create(MyClass.prototype).constructor,
  );
}

// Logs `true`:
new MyClass();

기타 예

new로 호출할 때 this의 값은 bind 로 변경할 수 없습니다.

const BoundMyClass = MyClass.bind({foo: 'bar'});
// Logs `true` - bound `this` value is ignored:
new BoundMyClass();

new 호출을 사용할 때 구성원 신분으로 함수를 호출해서 this의 값을 변경할 수 없습니다
다른 물체:

const obj = {MyClass};
// Logs `true` - parent object is ignored:
new obj.MyClass();

그렇지 않으면 함수에 "바인딩" 값이 있는 경우: {:#bound}

function someFunction() {
  return this;
}

const boundObject = {hello: 'world'};
const boundFunction = someFunction.bind(boundObject);

언제 호출boundFunction하든지 그 this값은 bind에게 전달되는 대상이 될 것이다
( boundObject ).

// Logs `false`:
console.log(someFunction() === boundObject);
// Logs `true`:
console.log(boundFunction() === boundObject);

bind를 사용하여 함수를 외부에 귀속시키는 것을 피한다this.반대로 사용arrow functions은 함수 성명에서 명확했기 때문이다this.
코드 뒤에서 일어난 일.bind를 사용하여 this를 부모 대상과 무관한 값으로 설정하지 마십시오.이것은 보통 뜻밖이다. 이것이 바로 왜 this 이렇게 나쁜 평판을 얻었는가 하는 것이다.값을 매개 변수로 전달하는 것을 고려하기;이것은 화살표 함수와 함께 사용할 수 있는 더욱 현시적이다.

기타 예

바인딩 함수를 호출할 때 this의 값은 call or
apply 로 변경할 수 없습니다.

// Logs `true` - called `this` value is ignored:
console.log(boundFunction.call({foo: 'bar'}) === boundObject);
// Logs `true` - applied `this` value is ignored:
console.log(boundFunction.apply({foo: 'bar'}) === boundObject);

귀속 함수를 호출할 때 함수를
다른 객체의 멤버:

const obj = {boundFunction};
// Logs `true` - parent object is ignored:
console.log(obj.boundFunction() === boundObject);

그렇지 않으면 호출 시 다음을 설정합니다. {:#call apply}

function someFunction() {
  return this;
}

const someObject = {hello: 'world'};

// Logs `true`:
console.log(someFunction.call(someObject) === someObject);
// Logs `true`:
console.log(someFunction.apply(someObject) === someObject);

this의 값은 this/call에 전달되는 대상이다.apply/call를 사용하여 apply를 부모 대상과 무관한 값으로 설정하지 마십시오.이것은 보통 뜻밖이다. 이것이 바로 왜 this 이렇게 나쁜 평판을 얻었는가 하는 것이다.값을 매개 변수로 전달하는 것을 고려하기;이것은 화살표 함수와 함께 사용할 수 있는 더욱 현시적이다.
불행하게도 this DOM 이벤트 감청기 등에 의해 다른 값으로 설정되어 사용 가능
코드를 이해하기 어렵습니다.

element.addEventListener('click', function (event) {
  // Logs `element`, since the DOM spec sets `this` to
  // the element the handler is attached to.
  console.log(this);
});

위의 경우this는 피하고 다음을 수행합니다.

element.addEventListener('click', (event) => {
  // Ideally, grab it from a parent scope:
  console.log(element);
  // But if you can't do that, get it from the event object:
  console.log(event.currentTarget);
});

그렇지 않으면, 함수가 부모 대상을 통해 호출된 경우 (이것은): {:#object member}

const obj = {
  someMethod() {
    return this;
  },
};

// Logs `true`:
console.log(obj.someMethod() === obj);

이 경우 함수는 parent.func()의 구성원으로 호출되기 때문에 obj는 this로 호출된다.이런 상황이 발생하다
호출 시간, 따라서 부모 대상이 없는 상황에서 함수를 호출하거나 사용
다른 상위 객체:

const {someMethod} = obj;
// Logs `false`:
console.log(someMethod() === obj);

const anotherObj = {someMethod};
// Logs `false`:
console.log(anotherObj.someMethod() === obj);
// Logs `true`:
console.log(anotherObj.someMethod() === anotherObj);

obj는 가짜다. someMethod() === obj는 someMethod의 멤버가 아니기 때문이다.그렇게 지도 모른다, 아마, 아마...
이런 일을 시도할 때 이 문제에 부딪혔다.

const $ = document.querySelector;
// TypeError: Illegal invocation
const el = $('.some-element');

이는 obj의 실현이 자신의 querySelector값에 착안하고 기대했기 때문이다
DOM 노드일 수 있으며 위의 작업을 수행하면 연결이 끊어집니다.위 목표를 올바르게 달성하려면:

const $ = document.querySelector.bind(document);
// Or:
const $ = (...args) => document.querySelector(...args);

흥미로운 사실: 모든 API가 내부에서 사용되는 것은 아니다this.콘솔 방법this이console.log 인용을 피하기 때문에 this 귀속log이 필요하지 않습니다.console를 부모 대상과 무관한 값으로 설정하기 위해 함수를 대상에 이식하지 마십시오.이것은 보통 뜻밖이다. 이것이 바로 왜 this 이렇게 나쁜 평판을 얻었는가 하는 것이다.값을 매개 변수로 전달하는 것을 고려하기;이것은 화살표 함수와 함께 사용할 수 있는 더욱 현시적이다.

그렇지 않으면 함수 또는 부모 필드가 엄격한 모드인 경우: {:#strict}

function someFunction() {
  'use strict';
  return this;
}

// Logs `true`:
console.log(someFunction() === undefined);

이 경우 this의 값이 정의되지 않습니다.부모 역할 영역이 strict
mode에 있고 모든 모듈이 엄격한 모드에 있으면 함수에 필요 없음this.
이것에 의존하지 마라.내 말은, 더 간단한 방법으로 'use strict'값을 얻을 수 있다는 것이다.😀.

그렇지 않은 경우: {:# 그렇지 않은 경우

function someFunction() {
  return this;
}

// Logs `true`:
console.log(someFunction() === globalThis);

이 경우 undefined의 값은 this의 값과 같다.
대다수 (나 포함) 는 globalThis 전체를 대상으로 하지만, 기술적으로는 100% 정확하지 않다.다음은 [mathias Bynens]의 상세한 정보(https://mathiasbynens.be/notes/globalthis#terminology)로 왜 그것이 단순한 globalThis가 아니라 globalThis라고 불리는지 포함한다.global 전역 대상을 인용하는 것을 피하십시오. (네, 저는 여전히 그것을 이렇게 부릅니다.)대신 this
이것은 훨씬 명확해야 한다.
Javascript의 추가 리소스를 배우려면 다음과 같이 하십시오.

책 수령: Javascript Challenges
JavaScript: Understanding the Weird Parts
Monster JavaScript Course - 50+ projects and applications
참조 장소: https://web.dev/javascript-this/