this

Eye0n·2021년 4월 23일

JavaScript

javascript

목록 보기

3/7

this

this란, 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 이다.

this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

함수 호출 시 arguments객체와 this는 자바스크립트 엔진에 의해 암묵적으로 함수 내부에 전달되고 지역변수처럼 사용가능하다.

this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

바인딩이란, 식별자와 값을 연결하는 과정을 의미한다. this 바인딩은 this(식별자)와 this가 가리키는 객체를 연결한다.

함수 호출 방식:

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

일반 함수 호출

this 값은 런타임에 결정된다. 컨텍스트(실행환경)에 따라 달라진다.
브라우져에서는 window객체를 Node에서는 global객체를 참조한다.

console.log(this); // window객체

function func() {
  console.log(this); // window객체
}

func();

객체 메소드 호출

this는 메서드를 호출한 객체를 참조한다.

const obj = {
  name: "funcName",
  func() {
    console.log(this); // obj { name: 'funcName', func: [Function: func] }
    return this.name; // funcName
  },
};
console.log(obj.func()); // 메서드를 호출한 시점에서 this바인딩될 객체가 정해진다.

메서드 내 중첩된 일반 함수 호출 경우

객체 메서드 내에 일반 함수로 중첩 함수를 만들면
중첩 함수의 this는 일반 함수 호출과 동일한 전역 객체를 가리킨다.

const obj = {
  func() {
    console.log(this); // obj { func: [Function: func] }

    // 메소드내에 정의된 중첩 함수
    function inner() {
      console.log(this); // window객체
    }
    
    // 메소드 내에 정의된 중첩함수도 일반 함수처럼 호출되면 
    // 중첩 함수 내부 this값은 전역 객체이다
    inner();
  },
};
obj.func();

중첩 함수의 this와 외부함수의 this를 같게하는 방법 :

화살표 함수로 중첩 함수 선언
화살표 함수는 this값을 가지지 않기 때문에 상위 스코프에서 this값을 참조한다.
외부 함수의 this값을 중첩함수에 직접 전달
외부함수의 this값을 변수에 할당해 해당 변수를 중첩 함수 내에서 사용하게 되면 외부함수의 this와 같은 값을 참조하게 된다.

생성자 함수 호출

this는 생성자 함수가 생성할 인스턴스를 참조한다.

function User(name, age) {
  this.name = name;
  this.age = age;
  this.func = function () {
    console.log(this); // User { name: 'chan', age: 20, func: [Function] }
    console.log(this.name, this.age); // chan 20
  };
}

//User 생성자 함수 인스턴스인 user
const user = new User("chan", 20); // user = User { name: 'chan', age: 20, func: [Function] }
user.func();

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

함수 객체 Fuction의 프로토타입 메서드:
Function.prototype.apply/call/bind

Function.prototype.apply(this, [argsArray])

apply() 메서드는 주어진 this 값과 배열 (또는 유사 배열 객체) 로 제공되는 arguments 로 함수를 호출합니다.

/**
 * 주어진 this 바인딩과 인수 리스트 배열을 사용하여 함수를 호출한다.
 * @param thisArg - this로 사용할 객체
 * @param argsArray - 함수에게 전달할 인수 리스트의 배열 또는 유사 배열 객체
 * @return 호출된 함수의 반환값
 */
Function.prototype.apply(thisArg[, argsArray]);

Function.prototype.call(this, arg1, arg2, ...)

call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다.

/**
 * 주어진 this 바인딩과 ','로 구분된 인수 리스트를 사용하여 함수를 호출한다.
 * @param thisArg - this로 사용할 객체
 * @param arg1, arg2, arg3, ... - 함수에게 전달할 인수 리스트
 * @return 호출된 함수의 반환값
 */
Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]);

Function.prototype.bind(this, arg1, arg2, ...)

bind() 메소드가 호출되면 주어진 인자들이 적용된 새로운 함수(원본 함수의 복제본)를 생성합니다.

/**
 * 주어진 this 바인딩과 인수 리스트 배열을 사용하여 새로운 함수를 생성한다.
 (지정한 this 값 및 초기 인수를 사용하여 변경한 원본 함수의 복제본)
 * @param thisArg - this로 사용할 객체
 * @param arg1, arg2, ... - 함수에게 전달할 인수 리스트
 * @return 전달된 인자들로 바인딩된 새로운 함수(원본 함수의 복제본)
 */
Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]];