다연이네

[days05] Arrow Function (화살표 함수)와 this 본문

Web/JavaScript

[days05] Arrow Function (화살표 함수)와 this

　다연　 2020. 12. 15. 20:00
반응형

ES6(ECMAScript 2015)
Arrow Function (화살표 함수) 추가 == 람다식

 

var hello = test;  처럼 test()가 아니라 함수명만 있다면? -> 함수 자체를 의미한다.

<script>

function test() {
	return "hello world~";
}

//$("#demo").html(test()); //hello world~

var hello = test; //():함수호출 함수명만 있다면? 함수 자체 의미
alert(typeof hello); //function
//alert(hello); //hello자체가 함수다
$("#demo").html(hello());

</script>

 

<script>

	var hello = function test() {
		return "hello world~";
	};
	$("#demo").html(hello());
 

//무명함수(메소드)
	var hello = function() { //함수명 지움
		return "hi world~";
	};
	$("#demo").html(hello());
	 
</script>

 

위 스크립트를 화살표 함수를 사용하여 수정해보자

<script>

	var hello = ()=> { //함수명 지움
			  //alert("test");처럼 다른 요소 삽입 가능
			  return "hi world~";
		  	};
	$("#demo").html(hello());

</script>
<script>
// {} 중괄호 생략 가능 
//(조건: 안의 명령 라인이 한줄일 경우 (return문 한줄)), return문도 한줄이니 return도 생략

	var hello = ()=>"hi world~";
	$("#demo").html(hello());

</script>
<script>
var hello= (name, msg) => name+" : "+msg;
$("#demo").html(hello("dayeon","hello dongjun"));
</script>

<script>
var test = name => name+"!";
$("#demo").html(test("admin"));


function(name){ //이 함수랑 똑같은 의미
	return name+"!"; 
}
</script>

 

 

 this 

1. 일반 무명(익명) 함수에서 this는?

<script>
var hello;
hello = function() {
	//$("#demo").html(this);
	document.getElementById("demo").innerHTML+=this+"<br>"; //[object Window] 출력
};
window.addEventListener("load", hello);//window: 최상위 내장객체
			//"load" == <body onload=init()>
</script>

 

- 일반(무명)함수에서의 this는 함수를 호출한 객체를 나타낸다.
    window 객체가 load될 때 호출되는 hello에서는 this가 [object Window]이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="btn1">this 확인 버튼</button>
<div id="demo"></div>
<script>
var hello;

hello = function() {
	document.getElementById("demo").innerHTML+=this+"<br>"; //[object Window] 출력
};
document.getElementById("btn1").addEventListener("click",hello);
</script>
</body>
</html>


btn1 객체가 click될때 호출되는 hello에서는 this가 [object HTMLButtonElement]이다.
즉, 같은 this라도 호출하는 객체에 따라 달라진다.

일반(무명)함수에서의 this는 함수를 호출한 객체를 나타낸다고 했다.

 

그런데 화살표함수에서의 this는 달라진다.

 

화살표 함수에서 this는 그 함수를 소유한 객체가 된다.

<script>
var hello;
var name = "dayeon"; //전역변수  => 소유자: window (브라우저에 내장된 최상위 객체)
					//BOM

hello =() =>{
	alert(window.name); //window생략가능
	document.getElementById("demo").innerHTML+=this+"<br>"; //[object Window] 출력
			};
			
			window.addEventListener("load", hello);
//document.getElementById("btn1").addEventListener("click",hello);

</script>

버튼 클릭시
경고창 확인 이후

<script>
var hello;
var name = "dayeon";

hello =() =>{
	alert(window.name); //window생략가능
	document.getElementById("demo").innerHTML+=this+"<br>"; //[object Window] 출력
			};
document.getElementById("btn1").addEventListener("click",hello);
//화살표함수로 바꾸고 나니 this는 그 함수를 소유한 객체(window)가 된다.
</script>

반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days05] js 객체와 함수  (0) 2020.12.15
[days05] 1) js 클래스 + constructor 2) form태그 유효성 검사  (0) 2020.12.15
[days05] 변수, var /let /const 키워드  (0) 2020.12.15
[days05] js try~catch  (0) 2020.12.15
[days05] 정규표현식 (을 사용해 입력값 유효성 확인 외)  (0) 2020.12.15
'Web/JavaScript' Related Articles more
Comments