[Javascript] 함수 호출방식과 this 바인딩 (related to 생성자 함수)

2021.06.14 Ver.1

 

 

 

생성자 함수 보다가 this로 넘어가서 내용이 갑자기 본문 느낌이다.

그래서 생성자 함수랑 연계해서 보면 좋을 듯.

 

함수 호출방식과 this 바인딩

- this 바인딩은 함수 평가시점이 아닌 함수 호출시점에 결정됨. 호출 시 상위스코프를 찾아감. 상위스코프가 없을 시 자기자신에게 돌아오겠지??

 

 

1. 일반함수호출

 

- this: 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기참조변수

그렇기에 일반적으로 객체 메서드 내부나 생성자 함수 내부에서만 의미가 있음. (그래서 this.변수가 생성자함수만드는 식인가봐)

 

그래서 전역함수는 물론이고 중첩함수를 일반함수로 호출하면 객체를 생성하지 않기 때문에 this는 의미가 없음.

메서드 내에서 정의한 중첩함수도 일반함수로 호출하면  중첩함수 내의 this도 전역객체가 바인딩 됨.

즉, 객체의 프로퍼티 값이 아닌 함수만이 this가 의미가 있는거임!

 

하지만 그러면 메서드 내에 정의한 중첩함수나 콜백함수에 전역객체가 바인딩되는 문제가 있으니 그럴땐 아래방법을 사용해서 해결한다.

1. this 바인딩을 변수 that이 할당해서 that에 대한 값을 불러오도록함

2. 명시적으로 바인딩할 수 있는 prototype 메서드 사용 (아래 4번방법)

 

 

2. 메서드 호출

- 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩 됨!!
- 메서드는 프로퍼티에 바인딩 된 함수이기에 객체에 포함된 것이 아니라 독립적으로 존재하는 별도의 객체임.

따라서 다른 이름의 객체에 바인딩 되면 해당 객체를 this로 호출하고, 일반함수로 호출하면 전역객체의 this를 호출하게됨.

 

 

3. 생성자함수 호출

- 생성자 함수가 미래에 생성할 인스턴스가 바인딩 됨.

 

[참고] 인스턴스: 생성자함수에 의헤 생성되는 객체

 

 

4. Function.prototype.apply/call/bind 메서드에 의한 간접호출

-해당 메서드는 모든 함수가 상속받아 사용할 수 있음

 

-apply 메서드: 호출할 함수의 인수를 배열로 묶어 전달 [1,2,3]
-call 메서드 : 호출할 함수의 인수를 쉼표로 구분한 리스트형식으로 전달 1,2,3

-용도: argument 객체와 같은 유사배열객체에 배열메서드를 사용하는 경우. 해당 객체는 배열이 아니어서 Array.prototype.slice같은 배열메서드 사용이 안되므로 apply와 call과 같은 매서드을 사용하면 가능함. (음, 뭔가 배열은 아니지만 배열과 비슷한 객체에게 배열을 사용할 수 있도록 해주는 마법사 같은 건가봄)

 

-bind 메서드: 위 두 메서드와 달리 함수를 호출하지 않고 this로 사용할 객체만 전달함.

- 콜백함수: 외부함수를 돕는 헬퍼함수(보조함수)

 

- person함수를 호출하면 내부의 foo는 호출한 객체가 person 이니까 person에 this binding이 되지만

person.foo를 호출하면 person안에 독립적으로 존재하는 foo함수를 부른거니까 일반함수가 되서 전역객체에 binding되는거구나. 아하하하핳