TIL.59 Core J.S - 3 this

h986680·2021년 3월 3일
0

CoreJS

목록 보기
3/7
post-thumbnail

출저

  • 코어자바스크립트 - 정재남


this

호출한 주체에 대한 정보가 담긴다.

  • this는 실행 컨텍스트가 생성될 때 결정
  • 실행컨텍스트는 함수를 호출할 때 생성
    -> this는 함수를 호출할 때 결정된다.
  • 전역공간에서의 this 는 this는 전역 객체를 가리킨다.

메서드로서 호출할 때 그 메서드 내부에서의 this

독립성에 따라,
함수 는 독립적인 기능을 수행
메서드 는 자신을 호출한 대상 객체에 관한 동작을 수행. 호출 주체는 바로 함수명(프로퍼티명) 앞의 객체이다.

this 바인딩에 관해서는 함수를 실행하는 당시의 주변 환경(메서드 내부인지, 함수 내부인지 등)은 중요하지 않고, 오직 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지 없는지가 관건인 것이다.

내부함수에서의 this

let obj1 = {
  outer: function () {
    console.log(this); // (1) 
    let innerFunc = () => {
      console.log(this); // (2) (3) {outer: f}
    }
    innerFunc();
    
    let obj2 = {
      innerMethod: innerFunc
    };
    obj.innerMethod();
  }
}
obj1.outer();

// (1): obj1 ({outer: f}), (2): 전역객체(Window), (3): obj2({innerMethod: f})

this를 바인딩하지 않는 함수

화살표 함수(arrow function) 는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 빠지게 되어, 상위 스코프의 this를 그대로 활용할 수 있다.

this 가 바인딩한다라는 뜻은 참조를 시켜주는 행위

따라서, this가 바인딩하지 않는 함수라는 말은 바인딩 과정이 빠져 이 함수내에는 this가 아예 없으며, 접근하고자 하면 스코프체인에 따라 가장 가까운 상위스코프의 this를 그대로 갖고온다 라고 말할 수 있다.

this를 바인딩하지 않는 함수(화살표 함수)

let obj = {
  outer: function () {
    console.log(this); // (1) {outer: f}
    let innerFunc = () => {
      console.log(this); // (2) {outer: f}
    }
    innerFunc();
  }
}


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

콜백 함수의 제어권을 가지는 함수(메서드)가 콜백 함수에서의 this를 무엇으로 할지를 결정하며, 특별히 정의하지 않은 경우에는 기본적으로 함수와 마찬가지로 전역객체를 바라본다.



생성자 함수 내부에서의 this

생성자 함수는 어떤 공통된 성질을 지니는 객체들을 생성하는 데 사용하는 함수
클래스(class) 를 통해 만든 객체 인스턴스(instance)

생성자 함수를 호출(new 명령어와 함께 함수를 호출)하면 우선 생성자의 prototype 프로퍼티를 참조하는 __proto__라는 프로퍼티가 있는 객체(인스턴스)를 만들고, 미리 준비된 공통 속성 및 개성을 해당 객체(this)에 부여합니다.



명시적으로 this를 바인딩하는 방법

임의로 this에 별도의 대상을 바인딩하는 방법

call 메서드

Function.prototype.call(thisArg[, arg1[, arg2[, ...]]])

call 메서드를 이용하면 임의의 객체를 this로 지정할 수 있다.

let obj = {
  a: 1,
  method: function (x, y) {
    console.log(this.a, x, y)
  }
}
  
obj.method(2, 3); // 1 2 3
obj.method.call({a: 4}, 5, 6) // 4 5 6

apply 메서드

Function.prototype.apply(thisArg[, argsArr])

call 메서드와 기능적으로 같지만 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다.

let func = function (a, b, c) {
  console.log(this, a, b, c);
};
func.apply({x: 1}, [4, 5, 6]); // {x: 1} 4 5 6


let obj = {
  a: 1,
  method: function (x, y) {
    console.log(this.a, x, y)
  }
}
  
obj.method.apply({a: 4}, [5, 6]) // 4 5 6

bind 메서드

Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])

call 메서드와 비슷하지만 즉시 호출하지는 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드이다.
함수에 this를 미리 적용하는 것과 부분 적용 함수를 구현하는 두 가지 목적을 모두 지닌다.

let func = function (a, b, c, d) {
  console.log(this, a, b, c, d);
};
func(1, 2, 3, 4); // Window{...}1 2 3 4

let bindFunc1 = func.bind({x: 1});
bindFunc1(5, 6, 7, 8) // {x:1} 5 6 7 8

let bindFunc2 = func.bind({x:1}, 4, 5);
bindFunc2(6, 7); // {x:1} 4 5 6 7
bindFunc2(8, 9); // {x:1} 4 5 8 9


0개의 댓글