[JavaScript] this(함수,메소드,생성자)

this

this는 함수 내에서 함수 호출 맥락(context)[사용하는 상황에 따라 변화하는 가변적인 것을 맥락이라 한다.]를 의미한다. 

즉, 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.

 

 

📢함수 안에서 this라는 keyword는 그 함수가 소속되어있는 그 객체를 가르킨다.
즉,this는 메소드가 속해있는 객체를 가르키도록 약속된 특수한 예약어라고 보면된다.

쉽게 코드로 알아보자

var yoon = {
	name = 'yoon', 
	first = 10, 
	second = 20, 
	sum:function(){
        return this.first+this.second;
    }//yoon객체 안에 속해있는 메소드(function)=sum, this는 yoon이란 객체를 가르킨다.
}

console.log(yoon.sum());

 

함수 호출

함수를 호출했을 때 this가 가리키는 것을 하단의 코드를 통해 보자. this는 전역 객체인 window와 같다.

function func(){
  if(window === this){
  //전역객체 window
    document.write("window === this");
  }
}
func();

메소드의 호출

객체의 소속인 메소드의 this는 그 메소드의 소속인 객체( var o )를 가리킨다.

var o ={
  func : function(){
  //o객체 내의 프로퍼티 func는 함수이기 때문에 메소드이다.
    if(o===this){
    //여기서 this는 메소드를 가르킨다.
      document.write("o===this");
    }
  }
}
o.func();

생성자의 호출

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

var o1 = Func();
if(funcThis === window){
    document.write('window <br />');
}
 
var o2 = new Func();
if(funcThis === o2){
    document.write('o2 <br />');
}

this라는 것은 객체에 대한 초기화가 끝나고 식별자에게 담기기 전에

그 객체를 참고할 수 있는 래퍼런스(식별자)이기 때문에 this는 필수적으로 사용되는 keyword이다.

 

function sum(x,y){
  return x=y;
}
//함수를 쉽게 작성할 수 있도록 문법적으로 작성해 자바스크립트 해석기에 제출하면 함수 객체를 만들어준다. 이를 함수 리터럴(Literal)이라고 부른다.
sum(1,2);

var sum2 = new Function('x','y','return x+y;');
//1,2인자는 상단 함수의 매개변수 x,y와 같고 3번쨰 인자는 함수의 본문과 동일하다.
sum2(1,2);
//new를 통해 Function생성자 함수를 호출하였다.

상단의 코드 중 sum객체를 보면 알 수 있듯, 함수를 쉽게 작성할 수 있도록 문법적으로 작성한 후

자바스크립트 해석기에 제출하면 함수 객체를 만들어준다. 그리고 이를 함수 리터럴(Literal)이라고 부른다.

 

---

여기서 잠깐! 리터럴이란 무엇일까?

리터럴은 데이터(값) 그 자체를 뜻한다. 즉, 변수에 넣는 변하지 않는 데이터를 의미하는 것.

const a = 1;

여기서 a는 상수이고, 1은 리터럴이다.

[출처]https://velog.io/@pjeeyoung/%EB%A6%AC%ED%84%B0%EB%9F%B4

 

---

var o = { }
//객체리터럴, new Object라 작성할 수 있다.

 

상단의 코드는 객체 리터럴이다.

var a = [ 1 , 2 , 3 ];
//배열 리터럴, new Array(1,2,3)이라 작성할 수 있다.

상단의 코드는 배열 리터럴이다.

 

apply와 this

var o = {}
var p = {}
function func(){
    switch(this){
        case o:
            document.write('o<br />');
            break;
        case p:
            document.write('p<br />');
            break;
        case window:
            document.write('window<br />');
            break;          
    }
}
func();
//window를 가르킴 case window 실행
func.apply(o);
//o를 가르킴 case o 실행
func.apply(p);
//p를 가르킴 case p 실행

 

this는 변화무쌍하고 자바스크립트는 자유롭다.

---

this를 배우며 중요한 점은

그 함수가 누구의 소속이냐에 따라서 this값은 소속(객체)을 가리키기 때문에

이를 중요하다 생각하고 가져가는 게 중요하다.( this는 객체를 가리키는 것이 중요한 포인트)