this에 대해 알아봅시다!

포엠아이웹에서 정의하는 javascript this는

"자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다"

로 정의 되어 있습니다.

 

this란 '이것'이라는 뜻이고

this란 예약어 입니다

 

this는?

• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다.
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
• this는 자바스크립트 엔진에 의해 암묵적으로 생성된다.
• this는 코드 어디서든 참조할 수 있다.
• 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로
  일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.
• 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다.
• 함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다.
• 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
• 크게 전역에서 사용할 때와 함수안에서 사용할 때로 나눌 수 있다.

바인딩이란?

• 식별자와 값을 연결하는 과정을 말한다.
• 변수선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩하는 것이다.
• this 바인딩은 this(키워드로 분류되지만 식별자의 역할을 한다.)와 this가 가리킬 객체를 바인딩하는 것이다.

this를 함수 내부에서 사용한 경우

• 함수는 전역에 선언된 일반 함수와 객체 안에 메소드로 크게 구분할 수 있다.
• 객체안에 선언된 함수를 전역에 선언된 함수와 구분하기 위해 메소드라고 한다.
• 그런데 전역에 선언된 일반 함수도 결국 window 전역 객체의 메소드다.
• 즉, 모든 함수는 객체 내부에 있다.
• 이때 this는 현재 함수를 실행하고 있는 그 객체를 참조한다.
• 정리하면 함수 내부에서 this의 값은 함수를 호출하는 방법에 의해 바뀐다.
• 그리고 또한 엄격모드 여부에 따라 참조 값이 달라진다.
• 엄격 모드에서 일반 함수 내부의 this는 undefinded 가 바인딩 된다.

this의 사용

function -> global(window,global)인 경우

function Fn () {
	return console.log(this);
}

Fn(); // window 객체 출력

new 연산자를 사용해서 생성자 함수방식으로 인스턴스를 생성한 경우 입니다

생성자 함수 Fn가 빈 객체를 만들고 이 생성자 함수에서 this가 이 빈 객체를 가리키도록

설정하였습니다

function Fn() {
  this.title = 'Hello World!';
  return this;
}
// new 연산자를 이용해서 새로운 객체를 얻는다.
const myfn = new MyFn();
myfn // MyFn {title: 'Hello World!'}

깔끔한 결론

this는 어떤 위치에 있느냐, 어디에서 호출하느냐, 어떤 함수에 있느냐에 따라 참조값이 달라지는 특성이 있습니다

 

출처

https://hanamon.kr/javascript-this%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C/