this란?

this란 말 그대로 "이것"이라고 말할 수 있다.

대부분의 경우, this의 값은 함수를 호출하는 방법에 의해 결정된다.

 

브라우저에서는 window, 서버 Node.js에서는 global이라는 전역 객체를 가지고 있다.

함수가 어떻게 호출되었는지를 신경쓰지 않고 설정할 수 있는 bind 메소드가 있다.

 

일반 함수의 this는 window를 가르키고

화살표 함수의 this는 상위 스코프의 this를 가르킵니다.

함수의 호출하는 방식은 여러 가지가 있다.

1.  함수 호출

함수호출에서 기본적으로 this는 전역객체에 바인딩된다.

바인딩 : 메서드와 객체를 묶어놓은 것, 특정 객체에서 실행되게끔한 것

내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든지 관계없이 this는 전역객체를 바인딩한다.

내부함수의 this가 전역객체를 참조하는 것을 회피하는 방법은

1. 변수에 this를 바인딩하거나

2. this를 명시적으로 바인딩할 수 있는 apply, call, bind 메소드를 사용하는 것이다.

var value = 1;

var obj = {
  value: 100,
  foo: function() {
    var that = this;  // Workaround : this === obj

    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

      console.log("bar's that: ",  that); // obj
      console.log("bar's that.value: ", that.value); // 100
    }
    bar();
  }
};

obj.foo();

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(a, b) {
      console.log("bar's this: ",  this); // obj
      console.log("bar's this.value: ", this.value); // 100
      console.log("bar's arguments: ", arguments);
    }
    bar.apply(obj, [1, 2]);
    bar.call(obj, 1, 2);
    bar.bind(obj)(1, 2);
  }
};

obj.foo();

 

2. 메소드 호출

해당 메소드를 소유한 객체, 즉 해당 메소드를 호출한 객체에 바인딩 된다.

 

3. 생성자 함수 호출

생성자 함수 내부에서의 this는 인스턴스 자신이 된다.

var Cat = function (name, age) {
	this.bark = '애용'
	this.name = name
	this.age = age
}

var choco = new Cat('초코', 7)
var nabi = new Cat('나비', 5)
console.log(choco, nabi)

// Cat { bark: '애용', name: '초코', age: 7 }
// Cat { bark: '애용', name: '나비', age: 5 }