this - 객체지향 | 생활코딩

[출처 : https://opentutorials.org]

this

this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 

함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.

---

함수호출

함수를 호출했을 때 this는 전역객체인 window와 같다.

function func() {
  if (this === window) {
  	console.log ("this is window")    
  }
}
func();    //this is window

---

메소드의 호출

객체의 소속인 메소드의 this는 그 객체를 가르킨다. 

var object = {
  "func" : function(){
    if (this === object) {
    	console.log ("this is object")
    }    
  }
}
object.func();    // this is object

---

생성자의 호출

함수를 호출했을 때와 new를 이용해서 생성자를 호출했을 때의 차이를 보여준다.

var funcThis = null;
function Func() {
  funcThis = this;
}

var object1 = Func();
if(funcThis === window) {
  console.log("funcThis is window")    // funcThis is window
}

var object2 = new Func();
if(funcThis === object2) {
  console.log("funcThis is object2")    // funcThis is object2
}

생성자는 빈 객체를 만든다. 그리고 이 객체내에서 this는 만들어진 객체를 가르킨다. 이것은 매우 중요한 사실이다.

생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없기 때문이다. 

function Fuc(){
	console.log(object);
}
var o = new Func()

---

apply, call

함수의 메소드인 apply, call을 이용하면 this의 값을 제어할 수 있다. 

var object1 = {};
var object2 = {};
function func(){
	switch(this) {
    	case object1 :
        	console.log("This is object1")
            break;
    	case object2 :
        	console.log("This is object2")
            break;
    	case window :
        	console.log("This is window")
            break;
    }
}
func();    // This is window
func.apply(object1);    // This is object1
func.call(object2);    // This is object2