JS - javascript 에서의 this 를 정확히 알아보자 - 5 (4가지 규칙 우선순위 )

JS - javascript 에서의 this 를 정확히 알아보자 

첫번째(1) 부터 보는걸 권장한다.

 

JS - javascript 에서의 this 를 정확히 알아보자 링크

1. JS - javascript 에서의 this 를 정확히 알아보자 - 1(기본 바인딩)
2. JS - javascript 에서의 this 를 정확히 알아보자 - 2(암시적 바인딩)
3. JS - javascript 에서의 this 를 정확히 알아보자 - 3(명시적 바인딩)
4. JS - javascript 에서의 this 를 정확히 알아보자 - 4(new 바인딩)
5. JS - javascript 에서의 this 를 정확히 알아보자 - 5(4가지 규칙 우선순위)
6. JS - javascript 에서의 this 를 정확히 알아보자 - 6(바인딩 규칙 예외)

 

 

이 전 글에서 4가지 규칙(바인딩)을 공부했다. 

이제 이 4가지 규칙 중 실행 우선순위를 알아보자. 

 

우선 기본 바인딩은 네 가지 규칙 중 가장 낮은 우선순위이다.

먼저 암시적 바인딩과, new 바인딩 둘 중 우선순위가 누가 높은지 확인해보면

 

예) 암시적 바인딩 VS new 바인딩

function A(something) {
    this.a = something;
}

var obj1 = {
    fn: A
};

var obj2 = {};

obj1.fn( 2 );
console.log( obj1.a ); // 결과 2 -> 암시적 바인딩


var objTest = new obj1.fn( 4 );
console.log( obj1.a ); // 결과 2 -> 암시적 바인딩
console.log( objTest.a ); // 결과 4 -> new 바인딩

 

이 코드에서 확인할 수 있는 것은 obj1.fn(2) 이 코드를 실행함으로써 암시적 바인딩에 해당되며,

함수 A 안에 this는 obj1를 참조하게 되고,

 

A 함수 안에 this.a 는 obj1.a 와 같은 의미이며 obj1, fn(2) 이 코드를 실행한 후에

obj1 객체는 아래 코드처럼 변경이 된다.

var obj1 = {
        fn:A,
        a:2
   }

그러므로 console.log( obj1.a )의 결과는 2가 찍힌다.

그리고 그다음 줄에 있는 new 바인딩으로 시작되는 코드를 보자.

 

obj1.fn의 함수를 new 키워드를 통한 new 바인딩 규칙으로 객체를 생성해서 objTest 변수에 넣었다.

그러고 나서 obj1.a 값과 objTest.a 값을 찍어봤더니(console.log) 값이 각각 obj1.a 는 2가 나오고,

objTest.a 는 4 가 나왔다.

 

이거 가지고 어떻게 순위를 파악하는지 의아해할 거다.

자 여기서 자세히 따져보자.

 

우선 암시적 바인딩으로 인해 obj1 객체에 a라는 프로퍼티가 생겼고,

이 프로퍼티의 값은 2로 정해졌다.

 

하지만 var objTest = new obj1.fn( 4 ); 이 코드를 자세히 살펴보면 obj1의 객체에 a는 2가 들어있는데,

만약 new 키워드를 사용하지 않고 obj1.fn(4)로 하면 a의 값은 4로 바뀔 것이다.

이유는 암시적 바인딩의 호출 사이트인데 이것으로 인해 A안에 this참조는 obj1 이기 때문에...

 

근데 new 키워드를 통한 new 바인딩이 적용이 되었으니

obj1객체의 a 프로퍼티 값은 그냥 그대로 2가 찍힐 것이고,

 

new를 통한 새롭게 객체가 만들어졌으니,

A 함수 안에 this는 자기 자신이 된다.

 

여기서 new를 사용하지 않았다면 A 함수 안에 this는 obj1를 참조하겠지만

new 키워드를 통한 new 바인딩으로 객체를 생성하게 되면

A 함수 안에 this  자기 자신 이 되는 것에서 우선순위를 확인할 수 있다.

 

즉, 그냥 암시적 바인딩으로 obj1.fn(4)를 했다면 A 함수 안에 this는 obj1를 참조하지만

new 바인딩으로 하니깐 A 함수 안에 this는 자기 자신이 되면서 우선순위가 new를 사용하게 되면

자기 자신이 먼저 적용이 되기 때문에 우선순위가 new 바인딩이 암시적 바인딩보다 높다.

 

 

 

반응형

---

명시적 바인딩 VS new 바인딩 우선순위를 따져보자.

 

이 전 글에서 명시적 바인딩 규칙에 사용하는 함수의 프로토타입인 (call/apply/bind)

이 함수를 소개했었는데,

 

new 바인딩 규칙과 (call/apply) 함수는 같이 사용할 수가 없다.

그래도 bind 함수는 사용이 가능하다.

 

명시적 바인딩 규칙인 bind 함수를 사용하고,

new 바인딩 규칙을 사용해서 우선순위가 누가 더 높은지 확인해보자.

 

function A(something) {
    this.a = something;
}

var obj1 = {};

var objTest1 = A.bind( obj1 );
objTest1( 2 );
console.log( obj1.a ); // 2

var objTest2 = new objTest1( 3 );
console.log( obj1.a ); // 2
console.log( objTest2.a ); // 3

 

명시적 바인딩 규칙인 A.bind 함수를 사용하여 obj1 객체를 직접 넣어서 객체를 참조시켰다.

그리고 objTest1(2) 실행 뒤

var obj1 = {
	a:2
}

이렇게 되었을 거고, 결과는 obj1.a 는 2가 나온다.

 

var objTest2 = new objTest1( 3 );

new 바인딩으로 objTest1(3)으로 객체를 생성해서 objTest2 변수에다가 넣었다.

이 전에도 얘기했듯이 new 바인딩 규칙으로 인해 이 A 함수 안에 this 참조는 자기 자신이 된다.

 

즉, objTest1 에는 obj1객체가 참조되어있지만,

new 바인딩 규칙으로 생성된 objTest2는 this 참조는 곧 자기 자신이라,

이것도 new 바인딩 규칙이 우선순위가 더 높다.

 

 

---

명시적 바인드 VS 암시적 바인드

 

이제 이 둘 중 어느 것이 더 우선순위가 높은지 따져보자.

function A(something) {
    this.a = something;
}

var obj1 = {
  fn:A
};

obj1.fn(2);

console.log(obj1); // ------- 1

obj1.fn.call(obj1, 10);

console.log(obj1); // --------- 2

 

이건 딱 봐도 명시적 바인드 규칙이 우선순위가 더 높다.

 

1번 콘솔 로그를 보면 obj1 객체의 프로퍼티인 a의 값 2가 찍힐 것이고,

2번 콘솔 로그를 보면 obj1 객체의 프로터피인 a의 값 10이 찍힐 것이다.

 

이건 하나 마나이다.

암시적 바인딩은 호출 사이트 즉, 어느 시점에 호출된 객체에 의해 this가 참조되는데,

명시적 바인딩은 직접적으로 객체를 지명하기 때문에 우선순위는 당연히 명시적 바인딩 규칙이 높다

 

자 정리를 해보자면

 

new 바인딩 > 명시적 바인딩 > 암시적 바인딩 > 기본 바인딩

 

이 순서가 된다.

 

이제 정리를 해보자.

1. 함수가 new 바인딩으로 호출되었나? 그렇다면 이것은 새로 구성된 개체이고, this는 자기 자신이 된다.
2. call/apply 같은 프로토타입 함수를 실행을 한다면 명시적 바인딩 규칙으로 호출한 것
3. 함수가 암시적 바인딩 규칙으로 호출되었나? 그럼 호출 사이트를 확인해보자. this참조를 파악할 수 있다.