5. this

적자생존·2022년 6월 20일
0

javascript restart

목록 보기
5/31

1. this란?

this는 함수 내에서 함수 호출 맥락(context)를 의미함.
맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라 this가 가르키는 대상이 달라짐.
자바스크립트에서는 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 함.

2. 기본적인 this

아무것도 없이 호출하였을 경우 this는 windows를 가르키게 된다

window가 this와 같다면 window === this를 리턴하는 함수이다.

3. 메소드와 this

어떠한 메소드 에서 그 메소드를 호출하면 그 메소드가 소속되어 있는 객체를 this로 접근(호출)할 수 있다.
즉 자기자신을 호출 할 수 있다.

2와 비교해서 func()는 어느 곳에서도 소속되어 있지 않기 때문에 window를 가르키고
3에서는 let o에 소속되어 있기 때문에 o를 가르키는 것이다.

실제로 2의 func()window.func()에서 window가 생략되어 있기 때문에 2와 3이 똑같은 말이다.

4. 생성자와 this

원칙은 기본과 같음

new가 있냐 없냐의 차이를 볼때 2가지가 다름

가. var o1 = Func()

if(funcThis == window){
document.write('window </br>');
}

변수선언이 안붙어 있기 때문에 funcThis는 전역변수인 var funcThis = null이 되고 이는 1번에서 봤듯이 function Func(){}은 어느곳에도 소속이 되어 있지 않으므로(windows에 소속되어 있음) thiswindows를 가르키게 된다.

나 .var o2 = new Func()

if(funcThis == o2){
  document.write('o2 </br>')
}

new로 생성자를 호출하면 비어있는 객체를 만들고 그 생성자 안에서 this가 됨.

똑같은 맥락으로 생성자로 형성하면 생성될 객체를 가르키고 함수로 호출하면 windows를 가르킨다.

생성자 안에서 다음과 같이 사용하면 문제가 생김

생성자를 호출하게 되면 생성자에 대한 호출이 모두 끝난 다음에 변수에 생성한 객체가 할당이 됨

그렇기 때문에 생성자 Func()안에서 o2랑 this를 비교하면 o2는 아직 존재하지 않기 때문에 오류가 발생함

즉 this는 아직 객체에 대한 초기화가 끝나서 어떤 식별자에 담기기 전에 우리가 그 객체를 참고할 수 있는 식별자이기 때문에 필수로 사용하게 된다.

참고 : https://velog.io/@wkahd01/JS.-this%EC%9D%98-%EB%8B%A4%EC%96%91%ED%95%9C-%EC%82%AC%EC%9A%A9%EB%B2%95

5. 객체로서의 함수

함수는 원래 객체이다?

function sum(x,y){return x+y}는

let sum = new Function('x','y', 'return x+y')

라는 것이다.

즉 sum이라는 객체를 만들어서 'x','y'(인자값)을 넣어주고 'return x+y'라는 것을 반환하며 자리는 사진과 같다.

불편해서 함수 문법을 만듬 이를 함수리터럴이라고 함

let o = { } 는 객체리터럴

가. apply

profile
적는 자만이 생존한다.

0개의 댓글