Javascript - this

김태수·2021년 7월 20일

기타

목록 보기

6/11

this

this는 여러 프로그래밍 언어에서 class의 instance를 바인딩 하는 키워드 이다.
몇몇 프로그래밍 언어에서는 다른 이름으로도 불리우는데, 대표적으로 python의 self
등이 유사한 동작을 보여준다. 그러나 자바스크립트의 this는 해당 기능 말고도
많은 기능을 보유했는데 이런 부분이 javascript에서의 this를 어렵게 만드는 부분이다.

this의 4가지 동작

javascript 함수의 this에 바인딩 되는 값은 함수의 호출 방식에 따라 동적으로 결정 되는데

일반 함수 호출
메서드 호출
생성자 함수 호출
Function.prototype.call/apply/bind 메서드에 의한 간접 호출

의 경우가 있다.

일반 함수 호출

function foo() {
  console.log(this); // window
  function bar() {
    console.log(this); // window
  }
}

다음과 같이 전역 함수는 물론이고, 중첩 함수를 일반 함수로 호출할 시, this에는 window or global
객체가 바인딩 된다. 일반 함수에서의 this 호출은 의미가 없는 행동이기 때문에, strict mode에서는 일반 함수 호출에 this는 undefined가 바인딩 된다.

메서드 호출

const person = {
  name: 'KimTaesu',
  getName() {
    return this.name;
  }
};

console.log(person.getName()); // KimTaesu

위와 같이 메서드 에서는 this가 메서드를 호출한 객체에 바인딩 되어, 위 코드에서의 this는 person object를
가르키게 된다. 해당 메서드가 해당 객체 내에서 선언된것이 아닌, 상속등을 통해 가져오더라도, this는 메서드를 호출한 객체를 바인딩된다.

생성자 함수 호출

const Circle(radius) {
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

const circle1 = new Circle(5);
const circle2 = new Circle(10);

console.log(circle1.getDiameter()); // 10
console.log(circle1.getDiameter()); // 20

위와같이 생성자 함수 내부의 this는 생성자 함수가 미래에 생성할 인스턴스가 바인딩 된다.
new 연산자와 함께 호출하지 않으면 일반 함수로써 호출 되니, 주의하자.
그렇게 된다면 코드 내에서의 this는 다시 전역 객체(window, global)을 가르키게 된다.

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

function getThisBinding() {
  return this;
}

const thisArg = { a: 1 };

console.log(getThisBinding());

console.log(getThisBinding.apply(thisArg)); // { a: 1}
console.log(getThisBinding.call(thisArg)); // { a: 1}

call/apply 메서드는 this로 사용할 객체와 인수 리스트를 인수로 전달받아 함수를 호출한다.
call/apply 메서드의 본질적인 기능은 함수를 호출하는 것이다. apply와 call 메서드는 함수를 호출하면서, 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩 한다.