[JS]다양한 상황에서의 this 바인딩_1

JavaScript의 this 바인딩에 대해 알아보자

오늘의 키 포인트

this는 읽기 전용 값으로 런타임(run-time)때 설정할 수 없으며 함수를 호출한 방법에 의해 값이 달라집니다.(로드 후에 설정가능)

※런타임이란 프로그램이 실행되고 있는 때 존재하는 곳을 말한다.
즉,컴퓨터 내에서 프로그램이 가동하면, 그것이 바로 그 프로그램의 런타임이다.※

1.브라우저 환경에서 JS를 실행한다면 Window 객체가 전역 객체가 되며

Node.js에서 실행하면 global 객체가 전역 객체가 됩니다.

 function fuc(){
	console.log(this === window); //true
}
fuc();

==>func() 함수 호출 시에도 마찬가지로 this의 값이 전역 객체를 참조합니다.
하지만 현재 this의 반환값은 true가 아닌 undefined로 나와야 정상입니다. 그 이유는

window.fuc(); 

처럼 매서드 호출이아닌 단순 함수 호출로 인해 this가 속해있는 context를 구분하지 못하는 것이 정상이기 때문에
방금 같은 예시는 'use strict'구문을 사용해야 정상적으로 작동합니다.

2.생성자 함수 사용시 this 바인딩

 function circle(i, x, y, r, c) {
      this.index = i;
      this.x = x;
      this.y = y;
      this.r = r;
      this.c = c;
}

최근 연습 했던 canvas.js중 일부를 발췌한 코드이다. 이처럼 생성자 함수 내 코드를 실행하기 전에 객체를 만들어
this에 바인딩 하는 하는 방법으로 생성된 객체는 생성자 함수의 prototype 프로퍼티에 해당하는 객체를 프로토 타입으로 설정할 수있다. 생성후 굳이 return값을 잡지 않아도 바인딩한 객체는 자동으로 반환이 됩니다.
다만, this가 아닌 다른 반환 값을 명시한 경우 this가 아닌 값으로 반환됩니다.