javascript(자바스크립트) 3가지 this

 나를 두고두고 괴롭힌 것들중 하나인 this이다. 아마 블로그를 작성한다고해서 this가 내것이 되진 못하겠지만, 기억이 안나거나, 가끔 헷갈릴때, this가 필요할 것 같을때에 찾아보기위해 정리글을 써본다. this의 여러가지 사용법들 중 모든 것을 정리한게 아닌, 아직 내가 그나마 이해하고있는 용법만 몇가지 정리해본다. (내가 이해를 조금이라도 하지 못한것들은 정리도 제대로 하지못할 뿐더러, this에 대한 거부감만 키운다)

 

1.일반적인 this

일반적인 함수 호출, 실행 방식으로 실행될때 this는 최상위 객체를 가르킨다. 

브라우저에서는 window객체를 가리키고,

node안에서는 global객체를 가리키고 있다.

구글 크롬 브라우져에서 실제로, 콘솔로그에서 this를 처보면 this자체가 window객체인것을 간접적으로 알 수 있다.

이번에는 함수를 선언하고, 콘솔로 this를 찍어보게하였다. fun1(); 함수를 호출해보니 this는 window라고 알려주고 있다.

전역 변수name에 what이라는 문자열을 할당하였다. fun2함수는 이번에는 this가 아닌 this.name을 찍게 하였다. 그러면 결과는 what문자열이 찍히는데, this.name의 this는 window이기 때문에 다른말로 console.log(window.name)을 찍게 한것과 같기 때문인 것같다.

이렇게 함수를 만들어서 실행시켜보면 this.mesg3는 전역에 선언된 변수를 보여주고, 그냥 mesg3은 함수내에 선언된 mesg3을 불러오는 것을 볼 수 있다.

 

2.객체의 값으로 선언된 함수 안에서의 this

var num = 1;
var a = {
  num: 2,
  fun: function () {
    console.log(this.num);
  },
};
a.fun();

a라는 객체에 fun키의 값이 함수여서 메소드로 함수를 호출 하였다. 이럴경우 this는 도트앞의 객체가 된다. 그렇기 때문에 this.num은 a.num이되기  때문에 결과는 2를 콘솔로에 찍게된다.

 

3.call,bind,apply 바인딩할경우

var num = 1;
function func(a,b,c) {
  console.log(this.num);
  console.log(a);
  console.log(b);
  console.log(c);
}
var ken = {
  num: 2,
  method: func,
};
func.call(ken, 1, 2, 3);

 

func라는  함수를 호출하는데, 함수 옆에 .call을 붙였다. call이라는 것은 메소드로 사용한 것인데, func(1,2,3)으로 일반적인 호출을 하는 것 대신 func.call(ken,1,2,3)로 호출을 한것이라고 생각하면 되겠다. (난 저게 무엇인지 1도 감을 잡지 못했었다) 이렇게 되면 함수는 똑같이 호출을 하되 this만 첫번째 인자인 ken으로 치환되고, 남은 인자인 1,2,3은 정상적으로 차례대로 함수의 매개변수로 전달되어 사용된다. 그결과 func(1,2,3)으로 호출되었으며, this=ken이 되었다.

console.log(this.num)-> console.log(ken.num)이되어 = 2 가 된다.

console.log(a)에는 인자 1이 전달되었어 a=1이기 때문에  = 1 이된다.

console.log(b)에는 인자 2이 전달되었어 b=2이기 때문에  = 2 이된다.

console.log(c)에는 인자 3이 전달되었어 c=3이기 때문에  = 3 이된다.

 

(내가 이해한 바는 여기까지이고, 추후 더 알게되는게 있다면 수정예정)