JavaScript this - bind

 안녕하세요. 알렉스 입니다. 이번에는 JavaScript에서 this와 new에 대해서 알아볼려고 합니다.

this는 지금도 공부하는 키워드여서 차후 글의 내용이 바뀔수가 있습니다.

console.log(this)를 하면 글로벌 객체(Window)가 나오는 것을 알수 있습니다. 이는 this를 그냥 최 외곽에서 불러왔을때 바깥에 있는 객체(Window)를 불러오는것을 알수 있습니다.

위 사진도 Test(a)함수를 만들었습니다. 그리고 this.title = 'Hello World';를 주었지만 변화가 거의 없습니다. 다만 this를 호출하기 전과 후를 보면 다른점을 확인할수 있습니다.

첫번째 console.log와 두번째는 title : "Hello World" 추가 여부 입니다. this에 title를 추가하기 전을 출력 했고 추가한 후에 출력을 한 사진이 위 사진 입니다. 이는 Window또한 객체이며 추가 삭제가 가능하다는 것입니다. 

각각 window를 확장해서 title : "Hello World"가 존재하는 것을 알수 있습니다. 

그러면 this는 어느때에 object를 따르고 어느때에 global을 따를까? 이는 간단히 생각해 볼수 있다.

만약 object.function()으로 부른다면 this은 object이다. 그외의 나머지는 다 global이다.

위 사진은 object를 하나 만들어서 예시를 들은거다. obj.func1()은 함수이다. 이때 this에서 case1,case2의 더한 값을 return하는 역할을 한다. obj의 키로 case1,case2가 각각 value로 1,2가 배정되 있는것을 알수 있다. 실제 obj.func1()을 실행하면 3이 출력됨을 알수 있다.

더 자세한 방법으로 func1()안에 this을 출력하는 console.log를 추가했다. 그리고 obj2도 만들고 그안에 obj.func1을 넣었다.

 예상대로 obj의 this값은 obj 객체임을 확인했다. 출력 또한 3으로 정상적으로 나왔다. 하지만 obj2는 global object가 나오면서 출력은 NaN이 되었다. 

 이는 obj2가 함수만 입력을 받았다는 뜻이다. object가 아니기 때문에 obj2 바깥의 global객체를 this로 인식했다.

해결방법은 obj2를 선언할때 this를 obj에 bind하는 것입니다. 이렇게 하면 obj2에 있는 this는 global이 아닌 obj라고 판단하게 되는 것입니다.

bind에 대해서 알려 드리겠습니다.

bind(선언할 객체, 전달인자1, 전달인자2)

선언할 객체 : this에 출력할 객체(object)

전달인자1 : 함수에 포함되어있는 첫번째 전달인자 입력

전달인자2 : 함수에 포함되어있는 두번째 전달인자 입력

 bind는 첫번째 인자는 this를 지정할 object입니다. 위 그림에서는 obj입니다. 그리고 설명보다 1개더 전달인자가 많은데 이것은 bind키워드가 전달인자를 함수에 전달하는데 제한이 없다는 것을 설명하기 위한 것입니다.

add함수에는 3개의 전달인자를 받도록 되어 있습니다. 고로 call의 전달인자1,2,3에 각각 3,4,5을 입력합니다. obj3가 선언과 동시 this = obj, a = 3, b = 4, c = 5이 된 것을 알수 있습니다.

 하지만 obj3(6,7,8)을 출력하면 console.log에 출력하는 a,b,c값이 다르다는 것을 알수 있습니다. 이는 bind를 할때 전달인자도 obj와 같이 지정을 했기 때문입니다. 따라서 현재상황에서 아무리 전달인자를 바꿔도 console.log()에 출력되는 a,b,c는 바뀌지 않습니다.

다음 글