Languages/Java Script

[Js] this | 함수호출 | 메소드의 호출 | allpy, call | 객체

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

this

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

즉 this는 약속된 변수라고 할 수 있으며, 함수안에서 사용할 수 있는 일종의 변수이다.

이 값의 의미는 함수를 어떻게 호출하느냐에 따라서 달라진다는 뜻이다.

함수호출

함수를 호출했을 때 this는 무엇을 가르키는지 살펴보자. this는 전역객체인 window와 같다.

즉, 함수가 호출될 때 객체가 무엇이냐!를 이해하면 된다.

전역객체 window는 생략된 것이기 때문에 사실 window.func()라고 한다면 func()의 객체는 window이다.

<script>
      function func(){
          if(window === this){
              document.write("window === this");
          }
      }
      func(); 
</script>

그래서 위 코드의 결과는 "window === this" 이다!

메소드의 호출

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

<!DOCTYPE html>
<html>
<head>
	<title>생성자</title>
</head>
<body>
<script type="text/javascript">
	var o = {//객체 o생성.
		func : function(){//속성으로 함수를 주었으니, 메소드임.
			if(o === this){//이 함수의 객체는 o임. --> this = o
				document.write("o === this");
			}
		}
	}
	o.func();


</script>
</body>
</html>

결과는

이번엔 생성자에서 this의 의미를 알아보도록 하자.

생성자의 호출

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

<!DOCTYPE html>
<html>
<head>
	<title>생성자</title>
</head>
<body>
<script type="text/javascript">
	var funcThis = null; 
	 
	function Func(){//Func라는 함수 생성
	    funcThis = this; //이함수의 this는 window임. 이것을 funcThis에 넣음.
	}
	var o1 = Func();//얘는 그냥 위 함수 호출 하는 것임. 
	if(funcThis === window){
	    document.write('window <br />');
	}
	 
	var o2 = new Func(); //생성자 객체 생성 
	if(funcThis === o2){ //새로 생성되는 객체가 생성자 안에서 this가 됨.
	    document.write('o2 <br />');
	}
</script>
</body>
</html>

결과

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

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

만약 위 코드에서 Func() 가 정의된 곳에 if(o2==this) 라는 조건문을 넣는다면 결과는 어떻게 될까? 문제가 생긴다.

이유는 생성자를 호출하게 되면, 호출이 끝난 후 객체가 할당되는 것이기 때문이다.

그전에는 객체가 만들어져 있지만 o2라는 변수에 객체가 담겨 있는 것이 아니기 때문에 defined가 되는 것이다.

<script>
    function Func(){
        document.write(o);
    }
    var o = new Func();
</script>

결과는 : undefined

결론적으로 생성자 안에서 this는 그 생성자가 만든 객체를 가르킨다는 것이다.

함수를 작성하는 방법을 살펴보자.

<script>
	function sum(x,y){return x+y;}
    document.write(sum(1,2));
    
    //위 방법은 일반적인 함수를 선언하는 방법이다.
    // 위 방법을 함수 sum()이라는 객체를 만들어 준다고 하고 이를 "함수 리터럴"이라고 부른다.
    
    
    var sum2 = new Function('x','y', 'return x+y;');
    document.wirte(sum2(1,2));
    //위 방법은 생성자를 통해 함수를 객체로 만들어 주는 것이다.
</script>

위 방법 외에도

var p = {} ..이런식의 객체 생성 방법을 객체 리터럴 이라고 하며 (new Object 로도 할 수 있다.)

var a = [1,2,3]; 이러한 방법은 배열 리터럴 이라고 한다. (new Array(1,2,3) 이라고도 할 수 있음)

명시적으로 만들 수도 있지만, 이것보다 편리하게 값을 만들 수 있게 해주는 문법적 체계를 "리터럴"이라고 부른다.

즉 위 설명에 의하면 결국 함수 리터럴로 생성된 함수 sum 은 객체이고, 이 객체에서 사용할 수 있는 속성 값(메소드나 속성 등) 이 아래에 배울 apply와 call인 것이다.

apply, call

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

아래 코드를 살펴보자.

<script>
    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
    func.apply(o); //결과 o
    func.apply(p);//결과 p
</script>

func라는 함수는 객체이고, 프로퍼티를 가질 수 있다. 즉 표준 메소드인 apply를 가지고 있어서 호출 할 수 있다.

첫번째 인자로 함수 호출 컨텍스트를 줄 수 있으며, 이 값을 o로 주면 this가 o가 된다.

쉽게 생각하자면, func = 객체이고 아무것도 실행시키지 않으면 전역 객체인 window를 포함한다.

만약 다른 객체를 포함하게 된다면 o.func의 느낌으로 해석 하면된다.

어떻게 호출하느냐의 따라 맥락적으로 어떠한 객체의 종속되는 존재이기도 한다는 것이다.

'Languages > Java Script' 카테고리의 다른 글

[Js] prototype \| 상속 \| javascript 상속 (0)	2021.02.04
[Js] 상속 \| javascript상속 \| prototype (0)	2021.02.04
[Js] 전역 객체 \| 전역객체 API (0)	2021.02.04
[Js] 생성자와 new \| javascript의 객체 지향 특징 \| 객체 (0)	2021.02.04

Contents

새소식

인기 검색어