자바스크립트에서 이 키워드

JavaScript에서 this 키워드는 객체를 나타냅니다.
어떤 객체가 호출되는지(사용 또는 호출)에 따라 다릅니다.
this 키워드는 사용 방법에 따라 다른 객체를 참조합니다.

객체 메소드에서 this는 객체를 참조합니다.

this 단독으로 전역 개체를 참조합니다.

함수에서 this는 전역 개체를 나타냅니다.

함수에서 엄격 모드에서는 이것이 정의되지 않습니다.

이벤트에서 이벤트를 수신한 요소를 나타냅니다.

call(), apply() 및 bind()와 같은 메소드는 이것을 모든 객체로 참조할 수 있습니다.

이것은 메서드에서

개체 메서드에서 사용되는 경우 개체를 나타냅니다.

아래 예에서 this는 사람 개체를 나타냅니다.

fullName 메소드가 사람 개체의 메소드이기 때문입니다.

 const person = {
    firstName: "John",
    lastName: "Doe",
    id: 5566,
    fullName : function() {
      return this.firstName + " " + this.lastName;
    }
};
console.log(person.fullName())//John Doe

이 혼자

단독으로 사용되는 경우 전역 개체를 나타냅니다.

전역 범위에서 실행되기 때문입니다.

브라우저 창에서 전역 개체는 [개체 창]입니다.

엄격 모드에서 단독으로 사용하면 this도 전역 객체를 참조합니다.

 let x=this;
console.log(x)//window
console.log(this)//window
console.log(window==this)//true

함수의 this(기본값)

함수에서 전역 개체가 이에 대한 기본 바인딩입니다.

브라우저 창에서 전역 개체는 [개체 창]입니다.

일반 함수 및 화살표 함수에서 this는 창 객체를 참조합니다.

function a(){
    return this;
  }
  console.log(a())//window

  let b=()=>{
    return this;
  }
  console.log(b())//window

함수의 this(엄격한)

JavaScript 엄격 모드는 기본 바인딩을 허용하지 않습니다.
따라서 엄격 모드에서 함수에 사용될 때 this는 정의되지 않습니다.

'use strict'
  function a(){
    return this;
  }
  console.log(a())//undefined

명시적 함수 바인딩

call() 및 apply() 메서드는 미리 정의된 JavaScript 메서드입니다.

둘 다 다른 개체를 인수로 사용하여 개체 메서드를 호출하는 데 사용할 수 있습니다.

아래 예제는 person2를 인수로 사용하여 person1.fullName을 호출합니다. 이는 fullName이 person1의 메서드인 경우에도 person2를 참조합니다.

 const person1 = {
    firstName:"Manish",
    lastName:"Kumar",
    fullName: function() {
      return this.firstName + " " + this.lastName;
    }
  }

  const person2 = {
    firstName:"John",
    lastName: "Doe",
  }

console.log(person1.fullName.call(person3))//John Doe

기능 차용

bind() 메서드를 사용하면 개체가 다른 개체에서 메서드를 빌릴 수 있습니다.

이 예에서는 2개의 개체(사람 및 구성원)를 만듭니다.

구성원 개체는 개인 개체에서 fullname 메서드를 차용합니다.

 const person11 = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
      return this.firstName + " " + this.lastName;
    }
  }

  const member = {
    firstName:"Hege",
    lastName: "Nilsen",
  }

  let fullName = person11.fullName.bind(member);
  console.log(fullName())//Hege Nilsen

마음에 드셨다면 공유 부탁드립니다.....