this 와 this binding

📌 this

 

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 self-referencing-variable 이다.
this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 property 나 method 를 참조할 수 있다.
단, this 가 가리키는 값 (this 바인딩) 은 함수 호출 방식에 의해 동적으로 결정된다.

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

 

---

 

📎 일반 함수 호출 

기본적으로 this 에는 전역 객체(global object)가 바인딩된다.
(어떠한 함수[중첩 함수, 콜백 함수 포함]라도 일반 함수로 호출되면 this 에 전역 객체가 바인딩된다.)
strict mode 가 적용되면, this 에는 undefined 가 바인딩된다.

 

console.log(this)                      // 전역 객체 window

function foo(){
  console.log("foo's this: ", this);   // window
  function bar(){ 
    console.log("bar's this: ", this); // window
  }
  bar();
}
foo();

 

 

> this 의 목적 자체가 객체의 프로퍼티나 메서드를 위한 자기 참조 변수이기 때문이다.

   일반적으로는 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있기에 strict mode 에서는 적용되지 않는다 !-!

 

 

📍 중첩 함수, 일반 함수로 호출하기

 

var value = 1; 
// var 키워드로 선언한 전역 변수 value는 전역 객체의 프로퍼티이다.
// const 키워드로 선언한 전역 변수 value는 전역 객체의 프로퍼티가 아니다.
// const value = 1;

const obj = {
  value: 100,
  foo(){
    console.log("foo's this: ", this);               // {value: 100, foo: ⨍}
    console.log("foo's this.value: ". this.value);   // 100
    
    // 메서드 내에서 정의한 중첩 함수
    function bar(){
      console.log("bar's this: ", this);             // window
      console.log("bar's this.value: ", this.value); // 1
    }
    
    // 메서드 내에서 정의한 중첩 함수도 일반 함수로 호출하면 내부의 this 에는 전역 객체가 바인딩된다.
    bar();
  }
};

obj.foo();

 

 

📍 콜백 함수, 일반 함수로 호출하기

 

var value = 1;

const obj = {
  value: 100,
  foo(){
    console.log("foo's this: ", this);                    // {value: 100, foo: ⨍}
    
    // 콜백 함수 내부의 this 에는 전역 객체가 바인딩된다.
    setTimeout(function(){
      console.log("callback's this: ", this);             // window
      console.log("callback's this.value: ", this.value); // 1
    }. 100);
  }
};

obj.foo();

 

> 그렇지만 외부 함수인 메서드와 중첩 함수/콜백 함수의 this 가 일치하지 않는다는 것은 

   중첩 함수/콜백 함수가 헬퍼 함수로 동작하기 어렵게 만든다.

> 그래서 메서드 내부의 중첩 함수/콜백 함수의 this 바인딩과 메서드의 this 바인딩을 일치시키는 방법이 존재한다.

 

 

•  1. 변수 할당

 

var value = 1;

const obj = {
  value: 100,
  foo(){
    // this 바인딩(obj)을 변수 that 에 할당
    const that = this;
    
    // 콜백 함수 내부에서 this 대신 that 을 참조
    setTimeout(function(){
      console.log(that.value); // 100
    }, 100);
  }
};

obj.foo();

 

•  2. apply, call, bind 메서드 사용해 직접 바인딩

 

var value = 1;

const obj = {
  value: 100,
  foo(){
    // 콜백 함수에 명시적으로 this를 바인딩한다.
    setTimeout(function(){
      console.log(this.value); // 100
    }.bind(this),100);
  }
};

obj.foo();

 

•  3. 화살표 함수 사용

 

var value = 1;

const obj = {
  value: 100,
  foo(){
    // 화살표 함수 내부의 this는 상위 스코프의 this를 가리킨다 ❗❗
    setTimeout(() => console.log(this.value), 100); // 100
  }
};

obj.foo();

 

 

📎 메서드 호출 

메서드 내부의 this 에는 메서드를 호출한 객체가 바인딩된다.
※ 메서드 내부의 this 는 메서드를 소유한 객체가 아닌❗ 메서드를 호출한 객체에 바인딩된다.

 

function Person(name){
  this.name = name;
}

Person.prototype.getName = function(){
  return this.name;
};

const me = new Person('Lee');

// getName 메서드를 호출한 객체는 me다.
console.log(me.getName());                          // Lee

Person.prototype.name = 'Kim';

// getName 메서드를 호출한 객체는 Person.prototype이다.
console.log(Person.prototype.getName());            // Kim


// 브라우저 환경에서 window.name 은 브라우저 창의 이름을 나타내는 빌트인 프로퍼티이고, 기본값은 ''이다.
// Node.js 환경에서 window.name 은 undefined 이다.

 

 

📎 생성자 함수 호출 

 

function Circle(){
  // 생성자 함수 내부의 this 는 생성자 함수가 생성할 인스턴스를 가리킨다.
  this.radius = radius;
  this.getDiameter = function(){
    return 2 * this.radius;
  };
}

// 반지름이 5인 Circle 객체를 생성
const circle_5 = new Circle(5);
// 반지름이 10인 Circle 객체를 생성
const circle_10 = new Circle(10);

console.log(circle_5.getDiameter());
console.log(circle_10.getDiameter());

 

 

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

apply, call, bind 메서드는 Function.prototype 의 메서드이다.
apply, call 메서드는 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this 에 바인딩한다.
bind 메서드는 함수를 호출하지 않고 this 로 사용할 객체만 전달한다.
(그래서 bind 메서드로 apply, call 메서드와 같은 효과를 내려면 명시적으로 호출해줘야한다.)

 

function getThisBinding(){
  console.log(arguments);
  return this;
}

const thisArg = {a: 1}; // this로 사용할 객체

// apply 메서드는 호출할 함수의 인수를 배열로 묶어 전달한다.(배열 또는 유사 배열 객체)
console.log(getThisBinding.apply(thisArg, [1, 2, 3]));
// Arguments(3) [1, 2, 3, callee: ⨍, Symbol(Symbol.iterator): ⨍]
// {a: 1}

// call 메서드는 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달한다. 
console.log(getThisBinding.call(thisArg, 1, 2, 3));
// Arguments(3) [1, 2, 3, callee: ⨍, Symbol(Symbol.iterator): ⨍]
// {a: 1}

 

function getThisBinding(){
  return this;
}

// this 로 사용할 객체
const thisArg = {a: 1};

// bind 메서드는 함수에 this로 사용할 객체를 전달한다.
// bind 메서드는 함수를 호출하지는 않는다. 그래서 명시적으로 호출해줘야한다 !
console.log(getThisBinding.bind(thisArg));   // getThisBinding
console.log(getThisBinding.bind(thisArg)()); // {a: 1}

 

 

📍Lexical Scope 와 this 바인딩

 

Lexical Scope 는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정한다.
this 바인딩은 함수 호출 시점에 결정된다.

 

 

📍 정리

 

함수 호출 방식	this 바인딩
일반 함수 호출	전역 객체
메서드 호출	메서드를 호출한 객체
생성자 함수 호출	생성자 함수가 미래에 생성할 인스턴스
Function.prototype.apply/call/bind 메서드에 의한 간접 호출	Function.prototype.apply/call/bind 메서드에 첫 번째 인수로 전달한 객체

 

 

• 참고 자료

모던 자바스크립트 DEEP DIVE - 이웅모