JS에서 this의 할당은?

JS에서 this는 정적으로 할당 되지 않고, 동적으로 할당된다.

이 말을 쉽게 해석하자면 this가 선언되었을 때가 아닌, 호출되었을 때 결정된다는 의미이다.

예)

const person = function (name) {
	this.name = name;  // 이때 this는 결정되지 않는다.
}

const person1 = new person('park');  // 이 때 결정 된다.
console.log(person1.name);  // park

JS에서 호출에 따른 this의 해석

1. 함수 호출

• 일반적으로 일반 함수에서 this는 전역 객체(window)를 가르킨다.
• 모든 내부함수(함수속에 함수, 메소드 속 함수)의 this는 전역 객체(window)를 가르킨다.
• 콜백함수로 일반함수가 올 경우 전역객체(window)를 가르킨다.

예1)

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

예2)

var value = 1;

var obj = {
  value: 100,
  foo: function() {
    console.log("foo's this: ",  this);  // obj
    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
    }
    bar();
  }
};

obj.foo();

예3)

var value = 1;

var obj = {
  value: 100,
  foo: function() {
    setTimeout(function() {
      console.log("callback's this: ",  this);  // window
      console.log("callback's this.value: ",  this.value); // 1
    }, 100);
  }
};

obj.foo();

2. 메소드 호출

함수가 객체의 프로퍼티 값이면, 메소드로서 호출된다. 이 때, this는 메소드를 소유한 객체가 된다.