๐Ÿ“• Language/JavaScript

[Javascript] this

a n u e 2022. 3. 5. 17:40

Javascript์—์„œ์˜ this๋Š” Java๋ณด๋‹ค ๋” ๋‹ค์–‘ํ•œ ๋™์ž‘๋ฐฉ์‹์œผ๋กœ ์ด๋ฃจ์–ด์ง„๋‹ค.

var info = {name: "euna"}

this.name์€ euna๊ฐ€ ์ถœ๋ ฅ๋˜์–ด์ง„๋‹ค.

๋ณ€์ˆ˜ info๋Š” this๊ฐ€ ๋ฐ”๋ผ๋ณด๋Š” ๊ฐ์ฒด๊ฐ€ ๋œ๋‹ค.

this์˜ ๋™์ž‘ ๋ฐฉ์‹๋“ค

์šฐ์„ , this๋ฅผ ์ฝ˜์†” ๋กœ๊ทธ๋กœ ์ฐ์–ด๋ณด์ž

this๋Š” ์ „์—ญ ๊ฐ์ฒด๋ฅผ ๋ฐ”๋ผ๋ณด๋Š” ๊ฐ’์œผ๋กœ ๊ฐ–๋Š”๋‹ค. (์—ฌ๊ธฐ์„œ๋Š” window ๊ฐ์ฒด)

console.log(this);

 

 

  • ์ผ๋ฐ˜ ํ•จ์ˆ˜์—์„œ์˜ This : ์ผ๋ฐ˜ํ•จ์ˆ˜์—์„œ๋Š” ์ „์—ญ ๊ฐ์ฒด์ธ window๊ฐ€ ์ €์žฅ
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>JavaScript์—์„œ์˜ this</title>
</head>
<body>
<script>
var data = 10;
console.log(this.data); //10

function thisFunSample() {
	console.log(this) //window ๊ฐ์ฒด
	
	this.data = 20;
	
	console.log("1. data : " + data); //20
	console.log("2. this.data : " + this.data); //20
	console.log("3. window.data : " + window.data); //20
	
	data = 30;
	
	console.log("1. data : " + data); //30
	console.log("2. this.data : " + this.data); //30 
	console.log("3. window.data : " + window.data); //30
}
thisFunSample();
</script>
</body>
</html>

 

 

  • ์ผ๋ฐ˜ ์ค‘์ฒฉ ํ•จ์ˆ˜์—์„œ์˜ This : ์œ„์™€ ๋™์ผ
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>JavaScript์—์„œ์˜ this</title>
</head>
<body>
<script>
var data = 10;
function thisFunSampleOut() {
	function thisFunSampleIn() {
	this.data = 20;
	
        console.log("1. data : " + data); //20
        console.log("2. this.data : " + this.data); //20
        console.log("3. window.data : " + window.data); //20

        data = 30;

        console.log("1. data : " + data); //30
        console.log("2. this.data : " + this.data); //30
        console.log("3. window.data : " + window.data); //30
        }
        thisFunSampleIn();
}
console.log(this.data); //10
thisFunSampleOut();
</script>
</body>
</html>

 

 

  • Events Listener์—์„œ์˜ This : this๋Š” ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚จ ๊ฐ์ฒด
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>JavaScript์—์„œ์˜ this</title>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous">
</script>
</head>
<body>
<script>
var data = 10;
$(document).ready(function() {
	//# : id
	//.~ : class
    $("#thisButton").click(function(){
    	
        this.data = 20;
        
        console.log("1.data : " + data); //10
        console.log("2.this.data : " + this.data); //20
        console.log("3.window.data : " + window.data); //10
        
        data = 30;
        
        console.log("1.data : " + data); //30
        console.log("2.this.data : " + this.data); //20
        console.log("3.window.data : " + window.data); //30
    });
});
</script>
<input type="button" id="thisButton" value="๋ฒ„ํŠผ">
</body>
</html>

 

  • ๋ฉ”์†Œ๋“œ์—์„œ์˜ This : ๊ฐ์ฒด ์ž์‹ ์ด ์ €์žฅ
๋ฉ”์†Œ๋“œ : ๊ฐ์ฒด๋ฅผ ํ†ตํ•ด ์ˆ˜ํ–‰ (java๋กœ ๋”ฐ์ง€๋ฉด class์— ์ข…์†๋œ ๊ฒƒ๋“ค์„ ์˜๋ฏธํ•จ. ํด๋ž˜์Šค ํ•จ์ˆ˜)
ํ•จ์ˆ˜ : ๋” ํฌ๊ด„์  ์˜๋ฏธ. ๋…๋ฆฝ์ ์œผ๋กœ ์กด์žฌ.

 

๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ๋กœ์„œ function์„ ํ˜ธ์ถœํ•ด๋ณด๋ฉด, ๋ฉ”์†Œ๋“œ์—์„œ์˜ this์˜ ์˜๋ฏธ๋ฅผ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>JavaScript์—์„œ์˜ this (๋ฉ”์†Œ๋“œ์˜ this)</title>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous">
</script>
</head>
<body>
<script>
var data = 10;
console.log(this.data); //10
function func()
{
	this.data = 100;
	console.log(this.data); //100
	console.log(window.data); //100
}
func();
var callFun =
{
	data : "ํ…Œ์ŠคํŠธ",
	say : function() { //์ผ๋ฐ˜ ํ•จ์ˆ˜๊ฐ€ ์•„๋‹Œ ๋ฉ”์†Œ๋“œ ๊ตฌํ˜„
		return this.data;
	}
};
//๋ฉ”์†Œ๋“œ call
console.log(callFun.say()); //ํ…Œ์ŠคํŠธ
</script>
</body>
</html>

 

'๐Ÿ“• Language > JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[javascript] ๋ฐฐ์—ด ์•ˆ ๊ฐ์ฒด๋“ค์˜ ๊ฐ ์š”์†Œ ๋”ํ•˜๊ธฐ  (0) 2023.02.02
[javascript] <input> ํƒœ๊ทธ์— ์ˆซ์ž๋งŒ ์ž…๋ ฅ (์ •๊ทœ์‹ ์‚ฌ์šฉ)  (0) 2023.01.27
[Javascript] ES5, 6 ์ฐจ์ด  (0) 2022.05.23
[Javascript] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ  (0) 2022.04.29
[Javascript] instanceof, arguments  (0) 2022.04.29

'๐Ÿ“• Language/JavaScript'์˜ ๋‹ค๋ฅธ๊ธ€

  • ํ˜„์žฌ๊ธ€[Javascript] this

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”