자바스크립트 : THIS

column clash·2021년 8월 16일
0
post-custom-banner

재미는 없지만 자바스크립트를 정리해보자.
(뭘 하든 항상 기본은 중요하기에)

this 는 무엇인가?

1. 전역범위에서 console.log => window

2. 오브젝트내에서
var testObject = {
 	data : "testLang",
    testFunc : function() {
    console.log(this)
    }
}

결과값 : {data: "kim", 함수: ƒ}

오브젝트 내의 메소드내에서 this 를 사용시 그 메소드를 가지고 있는 오브젝트를 뜻함.

3. function testConstructor() {
	this.name = "kim"
}

var nameObject = new testConstructor();

여기서의 this 는 새로생성되는 오브젝트 instance 를 뜻함.

4.  이벤트 리스너 
document.getElementById("btn").addEventListener("click", function () {
	console.log(this)
});

여기선 e.currentTarget 을 뜻함.

이게 this 의 대부분 뜻이지만, arrow function 에
대해서도 알아둬야함.

var testObj = {
	fruits : ["apple", "mango", "banana"],
    fruitsFunc : function() {
    console.log(this)  // {fruits: Array(3), fruitsFunc: ƒ} 
    testObj.fruits.forEach(function() {
    	console.log(this); // 여기서의 function은 window 
    })
    }}
    
    
var testObj = {
	fruits : ["apple", "mango", "banana"],
    fruitsFunc : function() {
    console.log(this)  // {fruits: Array(3), fruitsFunc: ƒ} 
    testObj.fruits.forEach(() => {
    	console.log(this); // {fruits: Array(3), fruitsFunc: ƒ} 
    })
    }}
    
    arrow function 특징 : 내부의 this 값을 변화시키지 않음. 
    (외부this 값 그대로 재사용가능. 위의 this 값을 그대로 사용하게 됨)
profile
풀스택 개발 중...
post-custom-banner

0개의 댓글