JavaScript this

Develop My Life·2020년 4월 18일

JavaScript TIL

JavaScript

목록 보기

11/15

전역객체

모든 객체, 모든 함수, 모든 변수는 전역 객체의 property(속성)이다.

전역 객체의 종류

호스트 환경에 따라 이름이 다르다.

웹 JavaScript에서는 window
서버 node.js에서는 global

this

함수 내에서 함수 호출 맥락의 의미한다.

함수 안에서 사용할 수 있는 변수
약속 되어 있는 변수
this의 값은 함수를 어떻게 호출하느냐에 따라 다르다.

this의 본질을 그 함수가 속해 있는 객체를 가리킨다는 것이다.

함수를 어떻게 호출하느냐에 따라 다른 this

this가 전역객체를 가리키는 경우

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	function func(){ //전역객체에 함수 func 정의
		if(window === this){ //this가 전역객체를 가리킨다면 
			alert("window === this"); 
		}
	}

	func(); //출력 : window === this
	//this는 window를 가리킨다는 것을 알 수 있다.
</script>
</body>
</html>

이 경우도 사실 함수가 전역객체에 소속되어 있는 것이기에 window를 가리키는 것이다.

this가 소속객체를 가리키는 경우

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	var object = { //객체 정의
		func : function(){ //객체 안에 fun라는 함수 정의
			if(object === this){ 
				alert("object === this");
			}
		}
	}

	object.func(); //출력 : object === this
	//func함수가 object 객체에 속해 있기 때문에 this는 object객체를 가리킨다.
</script>
</body>
</html>

생성자에서의 this

생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this를 사용하여 생길 객체를 가리켜 사용하고 싶은 기능을 만들 수 있다. 이 때 this는 필수적으로 쓰이는 것이다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	function conductor(input){ //생성자 함수를 만든다. 매개변수는 input
		this.name = input; //생성될 객체를 이름을 모르기 때문에 this를 사용하여 생성될 객체의 name에 input값을 넣어준다.
	}

	var object = new conductor('code'); //new와 생성자를 통하여 object 이름의 객체를 만들어주고 인수로 초기화해준다.
	alert(object.name); //출력 : code
	//생성자를 만들 때 만들 객체의 이름을 모르기 때문에 this를 사용하여 생성자의 기능을 구현한다.
</script>
</body>
</html>

apply를 이용한 this

함수.apply(객체 a)의 형태는 객체.함수()로 해석할 수 있기 때문에 apply를 사용하면 함수 안에 있는 this는 객체 a를 가리키게 된다.

함수.apply(객체) == 객체.함수( )

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	var o = {} //o 객체 선언
	var p = {} //p 객체 선언
	function func(){
	    switch(this){ //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>
</body>
</html>