[JS] this

---

알고있으면 좋은 Javascript Tip✨

---

this란 무엇인가?

• 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가르키는 자기참조변수이다.
• this는 호출 패턴에 따라 다른 객체를 참조하고 실행 컨텍스트가 생성될 때마다 this의 바인딩이 일어난다.
• this 바인딩은 식별자와 값을 연결하는 과정을 말하며 new 바인딩, 명시적 바인딩, 암시적 바인딩, 기본 바인딩 으로 구분된다.

 

(1) new 연산자

• new 연산자를 사용하면 해당 객체로 바인딩 된다.

let name = 'global';
function Func() {
  this.name = 'Func';
  this.print = function f() {
    console.log(this.name);
  };
}

let a = new Func();
a.print(); // Func

 

(2) 명시적 바인딩 (call, apply, bind) 

• call, apply, bind 와 같은 명시적 바인딩을 사용했을 때는 인자로 전달된 객체에 바인딩 된다.

function func() {
  console.log(this.name);
}

let obj = { name: 'obj name' };
func.call(obj); // obj name
func.apply(obj); // obj name
func.bind(obj)(); // obj name

 

(3) 암시적 바인딩

• 암시적 바인딩은 함수가 객체의 메서드로서 호출되는 상황에서 this가 바인딩 된다.

let obj = {
  name: 'obj name',
  print: function p() {
    console.log(this.name);
  },
};
obj.print(); // obj name

 

(4) 그 외의 경우

• strict mode(엄격 모드): undefined 로 초기화 된다.
• 일반 브라우저라면 전역 객체 window 에 바인딩 된다.