this의 여러뜻
1. window
html파일에서 console.log(this) 찍어보면 window{....} 출력된다.
function 함수 () {console.log(this)} 하고 함수를 호출해도 똑같이 window가 출력된다.
(일반함수에서 this는 window 출력!)
🤷🏻♀️ window ?
: window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체이다.
document.getElementById( ), console.log( ) 등 이런 함수들을 보관하는 큰 {object}라고 생각하면된다.
또, 전역변수를 만들었을 때 이 값도 보관해주는 보관소!
( 전역변수 : 코드 내 모든 곳에서 참조해서 쓸 수 있는 범위가 넓은 변수이다.
걍 script내에서 변수만들면 그게 바로 전역변수!)
전역변수 예시
<script>
let x = 10;
</script>(2)는 window라는 object에 함수자료를 추가하는 문법이다.
전역함수나 전역변수 만드면 window {object}안에 담긴다.
(우리가 따로 담지않아도 자바스크립트가 알아서 window안에 담음)
<!-- (1) = (2) -->
<script>
(1)
function 함수() {
console.log(this)
}
(2)
window.함수 = function() {console.log()};
</script>
1-1. strict mode
: strict mode일 때 함수안에서 쓰면 undefined가 출력된다.
<script>
'use strict'
function 함수 () {
console.log(this)
}
함수 ();
</script>IE 10 ver. 이상에서 'use strict'라고 작성하면 strict mode로 js작성가능하다.
strict mode에선 let 키워드 없이 변수 선언하는 등의 실수를 방지해준다.
this키워드를 일반함수 안에서 불렀을 때 undefined로 지정된다.
🤷🏻♀️strict mode?
: (엄격모드!) 문법과 런타임 동작을 모두 검사하여, 실수를 에러로 변환하고, 변수 사용을 단순화한다.
선언없이 전역변수를 만들수 없다. (여러 제약생김 구글링ㄱㄱ)
script의 시작 혹은 함수의 시작부분에 'use strict'를 선언하면 strict모드로 코드 작성이 된다.
2. method
object에 들어가는 함수들을 메소드라고한다.
메소드 내에서 this를 쓰면 메소드를 가지고있는 object가 this이다.
(this는 메소드의 주인님. 결국 1번도 동일한 맥락임.)
<script>
let obj = {
data: {
fun: function () {
console.log(this);
},
},
};
obj.data.fun()
</script>
출력 : {fun:f}
3. constructor
object 비슷한것을 여러개 만들고싶으면 복사하는게 아니라 constructor을 만들어서 사용한다.
(constructor은 object를 복사해서 생성해주는 기계)
constructor 안에서 쓰면 constructor로 새로 생성되는 object를 의미한다.
<script>
function foo() {
this.name = "kim";
}
let obj = new foo();
console.log(obj);
</script>
출력 : foo {name : 'kim'}new키워드를 이용하면 새로운 object를 꺼낼 수 있다.
새로운 object는 this로인해 {name : 'kim'}을 가진다.
4. eventlistener
eventlistener에서 this를 쓰면 e.currentTarget (지금 이벤트가 동작하는 곳)과 같은 의미이다.
= addEventListener 부착된 html요소를 뜻한다.
<button id="btn">click</button>
<script>
document.getElementById("btn").addEventListener("click", function (e) {
console.log(e.currentTarget);
console.log(this);
console.log(document.getElementById('btn');
});
</script>
출력 : <button id="btn">click</button>
this 예제
1. eventlistener안에서 foreach반복문을 사용했다.
document.getElementById("btn").addEventListener("click", function (e) {
let arr = [1, 2, 3];
arr.forEach(function () {
console.log(this);
});
});forEach사용시에는 콜백함수 넣어서 사용한다. (콜백함수는 함수안에 파라미터역할로 들어가는 함수)
> eventlistener안에서 fucntion을 한번더 만났기 때문에 4번뜻은 아님.
이렇게 쌩으로있는 콜백함수는 일반함수나 다름없기때문에 window출력.
2. object안에서 callback함수를 쓴다면?
var object = {
name : ['김', '이', '박'];
함수 : function(){
object.name.forEach(function(){
console.log(this)
});
}
}this를 판단할 땐 가장가까이있는 함수를 살펴본다!!!
> forEach안에 있는 함수에 this가 들어있다.
이 함수는 특별한 역할없는 일반함수이므로 window출력한다.
이렇게 this값은 function을 만날 때 마다 달라질 수 있기때문에 내가 원하는 this를 쓰기 힘들 수 있다.
이럴 땐 arrow function을 사용한다.
arrow function은 함수 내부의 this값을 새로 바꿔주지 않기 때문에 this를 쓸때 유용하다.
예시)
<body>
<button id="btn">버튼이에요</button>
</body>
//setTImeout에서 function을 쓰면 this가 window를 출력한다.
<script>
document.getElementById("btn").addEventListener("click", function () {
setTimeout(function () {
console.log(this);
}, 1000);
});
</script>
// arrow function을 쓰면 <button id="btn">버튼이에요</button> 출력
<script>
document.getElementById("btn").addEventListener("click", function () {
setTimeout(() => {
console.log(this);
}, 1000);
});
</script>'ARCHIVE > JavaScript' 카테고리의 다른 글
| [JS] 객체지향 2 ( Create, Class ) (0) | 2021.12.28 |
|---|---|
| [JS] 객체지향 (Constructor, Prototype) (0) | 2021.12.28 |
| [JS] Error (Try catch & throw) (0) | 2021.09.22 |
| [JS] 삼항연산 / spread / Optional Chaining / Destructuring (0) | 2021.09.22 |
| [JS] querySelector (0) | 2021.09.18 |