[JavaScript] This (헷갈리는 예제 모음)
function 안에서의 this VS 화살표 function 안에서의 this
const obj = {
name: "zerocho",
sayName: function () {
console.log(this.name); // zerocho
function inner() {
console.log(this.name); // undefined
}
inner();
const innerArrow = () => {
console.log(this.name); // zerocho 🤔??
}
innerArrow(); // this를 바꿔주는 행위 안했는데.. 🤷
},
};
obj.sayName();
// inner의 스코프 체인: inner -> sayName -> anonymous
This는 호출할때 판단을 해아된다!
화살표 함수는 부모 함수의 this를 본다! (부모 함수의 this는 어떻게 안다? 부모가 어떻게 호출 됐는지를 본다)
sayName을 누가 호출 시켰는지를 보고, inner의 this도 정해진다.
bind, apply, call 활용 예제
function sayName() {
console.log(this.name);
}
sayName.bind({ name: 'zerocho' })(); // zerocho '()' 써줘야 실행됨!
sayName.apply({ name: 'zerocho' }); // zerocho
sayName.call({ name: 'zerocho' }); // zerocho
function add(a,b) { return a+b };
add.apply(null, [3,5]); // add함수 안에서 this가 없기 때문에 null을 넣어줘도 좋다
addEventListener 예제
const hi = document.querySelector("#hi");
hi.addEventListener("click", function() { console.log(this) }); //<button id="hi">hi</button>
// 만약 화살표 함수처럼 행동하고 싶다면..
hi.addEventListener("click", (function() { console.log(this) }).bind(window)); // window obj
cosnt header = document.querySelector('.mainPage');
header.addEventListener('click', () => console.log(this)); // undefined
addEventListener
는 호출! () => console.log(this)
는 선언!
선언에 대한 부모는 addEventListener
가 될 수 없다 🥲 (보이지 않는다)
보이지 않는다 ? => 그렇다면 this는 anonymous
(bonus) 객체 안에서의 함수 선언 방식
const obj = {
name: 'zerocho',
sayName: function() {
console.log(this.name);
}
/* 위의 방식과 아래의 방식은 같다! (속성까지 완벽하게 같진 않다)
sayname() {
console.log(this.name);
}*/
arrowSayName: () => {
console.log(this.name);
}
}
obj.sayName(); // zerocho
obj.arrowSayName() // undefined
Author And Source
이 문제에 관하여([JavaScript] This (헷갈리는 예제 모음)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minbr0ther/JavaScript-This-헷갈리는-예제-모음저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)