3-3 this(정의, 활용법, 바인딩, call, applay, bind)

 

일반적인 C 계열, Java에서 this는

class의 필드를 가르킬 때 사용된다.

 

JavaScript에서 this는 다양한 의미에서

사용된다.

 

this 역할 : 주체 찾기

 

1. 전역 공간에서 this 역할

 

브라우저의 전역 환경에서 

console.log(this)를 찍어보면

Window라는 객체가 나오는 걸 볼 수 있다.

 

즉, 브라우저의 전역 환경에서 this는 Window 객체를 의미한다는 사실을 알 수 있다.

 

그럼 Node의 전역 환경에서 this란 무엇일까?

Node의 전역 환경에 this는 gobal을 의미한다는 사실을 알 수 있다.

 

2. 메서드에서 this의 역할

함수와 메서드 차이 )

 

함수 : 독립적으로 실행 가능

ex) function add() {~~~}

add()

 

메서드 : 주체(객체)에 의해 실행 된다.(종속적)

ex) 객체.메서드()

 

함수로서 호출과 메서드로서 호출 구분 방법 : .(점), []

 

따라서,

 

함수에서 this는 전역 객체

메서드에서 this는 주체

 

위와 같이 코드로 확인해보면

 

함수의 this는 global지만,

객체의 this는 주체(Obj)이다.

 

좀 더 복잡한 코드에서 this가 무엇일지 적어보아라.

문제
예측
주체(obj) 주체(obj) 주체(obj) 주체(obj) 주체(obj) 주체(obj)
결과
	메서드로서의 호출로 전부다 주체(객체)에서 호출 됐다는 사실 을 알 수 있다.

문제
예측
주체(객체) 함수로서 global 객체 주체(객체)
결과
	주체(객체) 함수로서 global 객체 주체(객체)

 

메서드의 내부 함수에서의 this 우회

 

객체 내부에서 innerFunc1 함수를 

Obj.innerFunc1()으로 호출하지 않았다고

전역 객체인 global 객체를 this가 가르키는게

불합리하다!

 

-> 이럴 경우 해결 방법으로 

 

1. var self  = this

var self = this;

처럼 innerFunc2함수에서 

self가 console로 찍힐 수 있도록

만드는 방법 입니다.

 

2. (중요)화살표 함수 ( => ) 를 사용한다.

(

ES6에서 함수 내부에서 this가

전역 객체를 바라보는 문제를 해결하기 위해

화살표 함수가 도입 됐다

)

 

 

 

화살표 함수를 사용한 결과 

this가 주체(outer)를 가리키는

걸 볼 수 있다.

 

이유 : 

 

화살표 함수 ( => )는 this binding 과정을 생략하기 때문에

자신을 가지고 있는 주체를 가리키게 된다.

 

this binding : 어떤 객체를 참조할지 결정하는 과정을 말합니다.

 

3. 콜백 함수 호출 시 그 함수 내부에서의 this

콜백 함수 내부 함수에서 this를 호출할 경우

this binding에 의해 전역 객체를 바라보게 된다.

 

단, 콜백 함수에 별도로 this를 지정한 경우 주체 출력된다.

(

    addEventListener 함수 개발자가 

    addEventListener를 호출한 주체가

    this가 되도록 만들어 놨기 때문에

    주체가 this가 된다.
)

 

4. 생성자 함수 내부에서의  this (ES6 이전 클래스 만드는 법)

(

    현재는 "class 클래스 이름"로

    클래스를 생성한다.

)

 

생성자 함수 내부에서 this를 사용할 경우

그 클래스의 인스턴스를 지정한다.

(C 계열, Java와 동일)

 

명시적 this binding

 

1.call({정의하고 싶은 객체 이름 : 내용})

결과로 당연히

전역 객체인 global과 1 2 3

가 출력 되는걸 볼 수 있다.

 

그런데

 

함수.call({정의하고 싶은 객체 이름 : 내용})

을 사용하면

정의하고 싶은 객체가 binding 돼

this에 의해 가리켜지는걸 볼 수 있다.

 

다른 예로

객체의 method 속성을 가지는데,

method 속성은 함수를 가지고 있다.

이때, method 속성 함수 내에서

console.log(this.a, x, y)

를 출력할 경우

 

this는 obj 자신을 가리키게 되고

this.a로 obj 자신의 속성 a를 가져온다.

 

여기에 call함수를 사용하면

사용자가 지정한 a : 4라는 객체를 

this가 가리키게 만들 수 있다.

 

단,

 

Obj 객체에 없는 속성의 객체(x)로 지정할 수는 없다.

 

2. apply({정의하고 싶은 객체 : 값}, [매개변수들]) 함수

 

apply는 call과 쓰임새가 유사한데

다른 점은

applay에서는 매개변수들을 [](배열) 형식으로 줘야 한다.

 

call, apply 함수 활용

 

call과 apply를 이용해 

Person이라는 생성자 함수로 객체를 생성한 후,

Person에 의해 만들어진 객체에

추가적인 정보를 덧붙여서

Student나 Employee 같은 다른 객체를

생성할 수 있다.

 

(다른 내용들은 아는 내용이라 패스~)

 

3. bind({원하는 객체 이름 : 값}) : this를 바인딩 하는 메서드

call, apply와 다른점 : 즉시 호출하지는 않는다.

                                   (변수로 받아줘야 한다)

 

목적 

 

1. 함수에 this 미리 적용

 

bind 함수를 통해 원하는 이름의 객체를

this가 가리키게 만들어 주었다.

 

2. 부분 적용 함수

 

bind 함수로 원하는 이름의 객체 지정 및 함수에 들어갈

input 값들을 미리 지정해줄 수 있다.

 

3. bound 여부 확인

 

bound는 bind의 수동태

 

 

함수 이름과 bind 된 함수의 이름을 출력할 경우

"func", "bound func"로 bind 여부를 확인 할 수 있다.

 

4. 객체 내부 함수에 bind 붙이기

 

 

명시적 this binding 활용 예

 

1. 유사 배열 객체

 

객체가 배열과 유사한 형태로

존재할 때,

 

그 객체를 배열 처럼

배열 메서드를 사용할 수 있다.

 

 

이유는 call이나 apply 함수가 즉시 binding 메서드라

객체를 넣어줬기 때문에 해당 기능을 수행할 수 있게 해준다.

 

그리고 ES6 버전이 나오면서

 

Array.from()

을 사용해 

 

객체 -> 배열

 

로 쉽게 바꿀 수 있다.

 

 

단,

 

 

객체에서 

length 정보가 없다면

배열로 만들 수 없다.