this

- this

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이며 this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. 즉, 실행한 주체를 가리키며, 호출되는 방식에 따라 동적으로 결정된다.

 

 

- this의 여러 case

this는 전역 객체로 window를 기본적으로 참조하고 있다. 

일반 함수 호출의 경우 this는 window를 참조한다. (호출 주체가 window기 때문에)

화살표 함수 호출의 경우 상위 객체를 참조한다.

var obj = {
  name: 'B',
  print: function () {
    var inner1 = function () {console.log(this.name, name)};
    inner1();

    var inner2 = () => console.log(this.name, name);
    inner2();

    var name = 'C';
    console.log(window.name, this.name, name);
  }
}

name = 'A';
obj.print();


출력 결과
A Undefined
B Undefined
A B C

 

생성자 함수로 호출 시 생성자 함수가 생성할 객체에 바인딩된다. 

function C() {
  this.a = 37;
}

var o = new C();
console.log(o.a); // 37


function C2() {
  this.a = 37;
  return {a: 38};
}

o = new C2();
console.log(o.a); // 38

 

bind 메서드를 통해 this를 binding 할 수 있다.

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()); // azerty

var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함!
console.log(h()); // azerty

var o = {a: 37, f: f, g: g, h: h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

 

 

참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this