javascript this

jangdu·2023년 3월 25일
0

javascript

목록 보기
6/16

js에서 this키워드는 다양한 의미를 가지는데
환경에 따라서 정리해보자

걍 쓰거나 함수안에선 window

아무 html파일에서 <script>태그 써서 this콘솔에 출력하면 window {} 이런 식으로 나온다.
함수내에서도 마찬가지로 나오는데

window는 모든 전역함수, 함수, DOM을 보관 관리하는 전역객체다.
쉽게 말해서 document.어쩌고, alert(), console.log()뭐 이런거 다 보관하는 큰 object라고 보면된다.
우리가 전역변수를 선언하면 이친구에게 들어간다.

stirict mode일때 undefined

IE10버전 뒤부터는 'use strict'키워드를 맨 위에 쓰면
strict mode로 작성된다.
여기서는 var키워드 없이 변수를 선언하거나,
변수를 arguments라는 키워드로 선언하거나 그런 실수를 방지한다.

strict mode에서는 this키워드를 일반함수에서 불렀을때 undefined로 강제 지정해준다.

object자료형 내에 메서드에선 자신을 가진 object

object안에 함수를 넣을 때
그 함수를 보고 method라고 한다.
그 메서드 안에서 this를 출력해보면,
그 메서드를 가진 object가 출력된다.

var object = {
  data : {
    f : function(){ console.log(this) }
  }
}
object.data.f();

이렇게하면 thisobject.data랑 똑같은 의미라고 보면 됨 ㅇㅇ

this를 함수안에서 쓰면 window,
메서드안에서 쓰면 그 메서드를 가진 오브젝트
이렇게 보면 됨 ㅇㅇ

constructor 에서 쓰면 새로 생성되는 오브젝트

js에서 object를 비슷한거 여러게 만들 땐
constructor를 이용한다.

function f () {
  this.name = 'kim';
}
var object = new f();

이게 constructor 만드는 법인데,
함수 문법을 이용해 만든 후 안에 this.blahblah 추가하면 됨

여기서 this는 이거로 새로 생성되는 오브젝트를 의미한다.

new키워드를 이용해서 새로운 오브젝트를 만들 수 있다.
저 object에는 {name: 'kim'}이게 들어있음

eventlistener에서는 e.currentTarget

document.getElementById('버튼').addEventListener('click', function(e){
  console.log(this)
});

여기서 this쓰면 e.currentTarget이랑 똑같은 뜻,
즉 지금 이벤트가 동작하는 HTML 요소를 의미한다.

profile
대충적음 전부 나만 볼래

0개의 댓글