this
->this는 함수를 호출하는 방식에 의해 결정된다.
-> 화살표 함수에서의 this는 함수가 속해있는 곳의 상위 this를 말한다.
- 그냥 쓰거나 일반 함수 안에서 쓰면 {window}
- strict mode + 일반함수 내에서 쓰면 undefined
console.log(this);
=> Window {window: Window, self: Window, document: document, name: '', location: Location, …}- 오브젝트 내 함수안에서 쓰면 그 함수를 가지고 있는 오브젝트를 뜻함
- 신문법 Arrow Function 특징
- 내부의 this 값을 변화시키지 않음(외부 this 값 그대로 재사용가능)
- 신문법 Arrow Function 특징
- 함수 안에서 쓰면 새로 생성되는 오브젝트를 뜻함
var someone={
name : 'minkyeong',
whoAmI:function(){
console.log(this);
}
}
someone.whoAmI();
=> {name: 'minkyeong', whoAmI: ƒ}var someone = {
name: "minkyeong",
whoAmI: function () {
console.log(this);
},
};
//someone.whoAmI();
var myWhoAmI = someone.whoAmI;
myWhoAmI();
=> Window {window: Window, self: Window, document: document, name: '', location: Location, …}- 이벤트 리스너 : e.currentTarget -> 지금 이벤트 동작하는 곳
<body>
<h1>minkyeong</h1>
<button id="btn"><h2>Hello</h2></button>
<script>
document.querySelector("#btn").addEventListener("click", function () {
console.log(this);
});
</script>
</body>
=> <button id="btn">…</button>📘 정리
- this는 누가 실행하였는지가 중요하다.
- 함수를 호출하는 방식에 의해서 결정된다.
- 사용할 때 주의하자.
참고)
https://www.youtube.com/watch?v=tDZROpAdJ9w
https://codingapple.com/course/javascript-es6/
https://www.youtube.com/watch?v=PAr92molMHU
