본문 바로가기

WEB

[JavaScript] this

내가 속해있는 그 객체의 참조값을 알려주는것이 this이다. 즉 this는 자기자신을 가리킨다!

 

그렇기 때문에 this는 어디에서 호출을 했는지 따라 값이 다르게 나온다.

 

로딩할때 this

 

변수안에 this

        let car1={
            name:"소나타",
            drive:function(){
                console.log(this);
            }
        };

여기서 this는 자기자신의 참조값을 가리키기 때문에 car1.drive()를 출력하면 console.log(this)가 실행되어 car을 출력해준다.

 

/*
	위의 p 요소를 클릭하면 클릭한 바로 그 요소의 innerText를 clicked로 바꾸기
*/

// 모든 p 요소의 참조값을 배열에 담아오기
let ps = document.querySelectorAll("p");
// 반복문 돌면서 모든 p 요소에 이벤트 리스너 함수 등록하기
for(let i=0;i<ps.length;i++){
	this.addEventListener("click",function(){
		// this는 이벤트가 바로 그 객체를 가리킨다.
		this.innerText = "clicked";
	});
}

여기서 this는 ps[i]를 가리킨다.