내가 속해있는 그 객체의 참조값을 알려주는것이 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]를 가리킨다.
'WEB' 카테고리의 다른 글
[JavaScript] insertAdjacentHTML 와 insertAdjacentElement 알아보기 / 인접한 영역에 추가하는 방법 (0) | 2021.10.14 |
---|---|
[JavaScript] innerText 와 innerHTML 비교하기 (0) | 2021.10.14 |
[JavaScript] HTML 요소 추가 / createElement (0) | 2021.10.14 |
[JavaScript] 조건문 / if / else if / else (0) | 2021.10.13 |
[JavaScript] forEach (0) | 2021.10.13 |