자바스크립트 기초 -7

매우 주관적인 포스트로서 사실과 다를수도 있습니다. 개인적인 정리 차원입니다.

오랜만에 작성해보는 정리 포스트이다.

이번에는 강의를 듣다보니 this를 정리할 필요가 있어서 작성해 본다. ​ this는 이전에 다른 프로그래밍 언어를 공부할때 종종 써먹은 놈이다. 주로 생성자 구문에서 객체의 값을 정할때, 함수를 호출할때 종종 써먹었었다. {.... this.name="..."} 이런식으로 종종 사용하고는 했다. ​ 하지만 js에서는 이런 방식을 제외하고 다른 용도로 사용되기도 한다. ​ this는 this가 쓰인곳의 부모 객체를 가르키거나, call,apply의 적용대상을 가르키기도 한다. 그러니까, 글로벌 레퍼런스에서 this를 부르면, window. 을 호출한것과 같고, 함수내에서 this도 역시 window.을 호출한 것과 같다. ​ 만약 객체내에서 this를 사용한다면 객체를 가르킬 것이고, 객체내 메소드로 this를 호출해도 마찬가지 이다.

function test(){
  console.log(this)
}
test();//이것은 window.test()와 같으므로, window를 출력하게된다.

let obj{
function foo(){ console.log(this)}
}
obj.foo() //이경우에는 obj를 출력하게된다.

let obj2{
method:obj.test}
obj2.mtd() //이경우는 obj2.test()와 같으므로, ob2를 출력하게된다.

요약하자면, this는 this가 속한 객체를 반환하는 성질이 있다. ​ 그리고 js에서만 사용가능한지는 모르겠지만, call, apply 함수에서도 사용하는 방법도 존재한다. call, apply 함수는 function들에서 사용가능한데, 인자로는 어떠한 객체, 함수에서 사용할 변수들을 가진다. 예시를 보자 ​

function test() {
  return "Hello, " + this.name;
}
let name1 = { name: "Kim" };
test.call(name1); //Hello, Kim, 만약 name1에 name속성이 없으면 undefined로 반환된다.

객체로 작성했지만, 배열로도 가능하다. ​ apply 함수도 위와 비슷하다. 인자로 객체, 변수를 전달하면 되며, 사용법은 이미 만들어진 함수에 .appy()를 작성해주면 된다. Math.max.apply(null,1,2,3,4,5) // 5 Math.max.apply(null,[1,2,3,4,5]) // NaN

let arr=[1,2,3,4,5]; Math.max.apply(null,arr) //5 다만 위에서 작성했듯이 배열을 바로 넘겨주면 안되는 모양이다. 변수에 담아서 전해주면 정상 작동한다.

다만 위와 같이 Math.max의 경우에는 this로 전달받을것이 없어야 한다.

function test2(arr) {
  return this.arr + arr[0];
}

이렇게 작성한 경우에는 this로 전달할 것과, 변수를 작성해야 한다. ​ call과 apply의 공통점은 둘다 처음에 들어가야할 변수가 있다면, 그것은 반드시 this로 넘겨줘야할 것이여만 한다. ​ 이전에 배운 c++ 등에서는 병렬프로그램이 존재한다. 자바스크립트도 존재하는지는 아직 모르겠지만, 흏내를 낼수가 있다. ​ setTimeout(함수, ms초)를 이용하면 된다. 이함수는 비동기식으로 ms초만큼 대기한다음, 함수를 실행하게 된다. 주된 사용처는 서버에 fetch를 하거나 할때, 비동기식으로 답변을 대기하면서 도중에 할것을 하기위해 사용되는것 같다. ​ 갑자기 setTimeout함수가 튀어나온 이유는 이 함수가 this의 값을 변경시키기 때문이다. ​ 어떤 객체가 this.get = function(){... return this. ....} 대충 이런함수가 있는경우에 setTimeout함수로 setTimeout(obj.get(),2000) 을 실행시키면 this의 값은 obj에서 window로 변경된다. 그러므로 에러가 난다. -> window.setTimeout()인셈. ​ 즉 window.get=function(){ …. return window. …. //이변수는 없을확률이 크다. ​ 함수가 불린곳으로 스코프가 변경된다. 조심하자. ​ bind()로 window에 붙여버리는것일까? ​ 추신. mdn에 의하면 setTimeout은 기본적으로 window객체가 바인딩 된다고 한다. 스코프 변경을 막고싶다면 bind()을 이용하여 this를 명시해주던가 call을해주던가 하자