13. This

This

This 는 함수 호출 패턴에 따라서 달라집니다. 호출패턴에는 4종류가 있습니다.

• 함수 호출 패턴

• 메소드 호출 패턴

• 생성자 호출 패턴

• apply, call, bind 패턴 (이번 챕터에서는 다루지 않습니다)

함수 호출 패턴

함수 호출패턴에서는 기본적으로 전역함수 내부함수 모두 this는 window(전역객체)를 가리킵니다.

var outter = function(){
    console.log('outter', this)
    var inner = function(){
        console.log('inner', this);
    };
    inner();
};
outter();

Strict 모드 일때는 보통의 함수 호출패턴의 this와는 다릅니다.

'use strict' // Strict 모드를 사용하겠다고 선언했습니다.
function func(){
  console.log(this); // undefined
}
func();

메소드 호출 패턴

호출된 함수가 객체의 프로퍼티이면 메소드 호출 패턴으로 호출됩니다. 메소드 내부의 this는 해당 메소드를 소유한 객체 즉 해당 메소드를 호출한 객체에 바인딩됩니다.

var person = {
  name : 'olaf',
  getName : function(){
    console.log(this); // person
    console.log(this.name); // olaf
  }
};
person.getName();

메서드안에 또다른 inner 함수가 존재한다면 그때의 this는 무엇일까요?

var person = {
  name : 'olaf',
  getName : function(){
    console.log(this);
    console.log(this.name); 
    function inner(){
        console.log(this); // window
    }
    inner(); // 메서드 내부함수 실행
  }
};
person.getName();

함수 호출패턴과 마찬가지로 this는 전역객체인 window를 가리킵니다.

생성자 호출 패턴

var Person = function(name){
    this.name = name;  // this는 자신 즉, Person을 가리킨다.
  };

Person.prototype.getName = function(){
  console.log(this.name); // Person.prototype 이기때문에 프로토타입 내에서도 this는 자기자신 Person을 가리킵니다.
};

프로토타입 안에서의 inner 함수 호출의 this도 일반 함수 호출 패턴을 따릅니다.

var Person = function(name){
    this.name = name;  // this는 자신 즉, Person을 가리킨다.
  };

Person.prototype.getName = function(){
  console.log(this.name); // Person.prototype 이기때문에 프로토타입 내에서도 this는 자기자신 Person을 가리킵니다.
  function inner(){
    console.log(this); // window가 찍힙니다! 이제 눈에 보이시죠?!
  }
  inner();
};

var p = new Person('olaf');
p.getName();