Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

CASSIE'S BLOG

[슈퍼코딩] 12-1강 this 키워드 정리 복습 본문

PROGRAMMING/React

[슈퍼코딩] 12-1강 this 키워드 정리 복습

ITSCASSIE1107 2023. 10. 8. 16:38
반응형

 

함수의 this 키워드는 JavaScript에서 현재 실행 중인 함수가 어떤 객체에 속해 있는지를 가리키는 역할을 합니다.

 

전역컨텍스트가 만들어지면
전역컨텍스트에는 전역스코프도 있고 거기에 또 this가 만들어지는데
여기에 this는 빈객체이다.

 

 

 

This를 잘 쓰려고

apply, bind, call함수를 쓰는거임

This

모든 실행 컨텍스트에 만들어지는 특별한 변수

This는 static하지않다. 함수가 호출될 때만 값이 할당

 

 

console탭에서 내용 지울 수 있거든 거기에 this치면 이렇게 쫙 나옴.

 

 

 

 

 


예전에 자바스크립트엔진에 콜스택이 있고 콜스택에 실행컨텍스트가 쌓인다고함

실행컨텍스트가 쌓일 때 여러가지가 함께 만들어지는데 그 중 하나가 스코프고, 두 번째가 스코프다.

This는 모든 함수마다 각각 가지고 있다.

자바스크립트 런타임에 대해서 크게 2가지

1. Node.js
2. 브라우저

개발자도구에서 console tab에서 아래와 같이 찍어볼수도 있음

console.log(this)

브라우저의 this는 window 객체이다.

ㅌㅌ

node.js에서 환경에서 console.log(this);

하면 빈객체가 나온다.

중괄호는 빈객체라는 뜻이다.

함수가 만들어지면 실행컨텍스트 생기니까 간단한 함수 만들고 console.log(this) 하면 길게 쭈욱 나온다.

const calcAge = function(birthyear) {
    console.log(this);
}

calcAge(1990);

함수 실행될 때 this만들어지는데 함수의 최상단에 있는 object다.



this는 값이 그떄그떄마다 다르게 나타난다. 

 

1. 메서드 안에서 this가 호출되면 그 메서드를 호출하는 오브젝트래. 

2. 간단한 함수 호출은 런타임에 따라서 다르다. Chrome 은 undefined, Node js는 global Object다. 

3. 화살표함수가 아닌 화살표함수를 둘러싸고있는 그 함수가 this로 인식을 하게 됨.

4. 이벤트리스너는 node js가 아닌 브라우저 환경에서 웹api로 우리가 어떤 이벤트를 송수신할 때 그럴떄도 this를 사용할 수 있는데 이 경우에는 이벤트가 발생하려면 어떤 dom이 있어야하잖아요? 그 dom에서 예를 들면 click를 했다. hover를 했다 mouse up를 했다. 그 이벤트가 붙어있는 dom 그 dom를 this가 참조를 한다. 

 

1번 방식 예시: 

 

요약: 함수가 만들어지면서 this에는 전역객체는 전역this와 다르게 값들이 많이 들어가있고
이 값들은 이 함수의 global object다. 
이 함수안에서 가장 최상단에 있는 object다. 

 

4번 방식 예시:

 

DOM은 "문서 객체 모델(Document Object Model)"의 약자로, 웹 페이지의 구조와 내용을 나타내는 프로그래밍 인터페이스입니다. DOM은 웹 페이지의 HTML 요소(예: 텍스트, 링크, 이미지, 버튼 등)을 표현하고, 이러한 요소에 JavaScript로 접근하고 상호작용할 수 있도록 합니다.

아래는 DOM을 사용하여 이벤트 처리를 설명하는 간단한 JavaScript 코드 예시입니다. 이 예시에서 this는 이벤트가 발생한 DOM 요소를 가리킵니다.

 

HTML: 


<!DOCTYPE html>
<html>
  <body>
    <button id="myButton">클릭해보세요</button>
  </body>
</html>

 

JAVASCRIPT:

// DOM 요소를 가져와서 이벤트 리스너를 추가합니다.
const button = document.getElementById("myButton");

button.addEventListener("click", function() {
  // 이벤트가 발생한 요소(this)를 가리킵니다.
  this.textContent = "클릭됨!";
});

이 코드에서 document.getElementById("myButton")를 사용하여 HTML에서 myButton이라는 아이디를 가진 버튼 요소를 찾습니다. 그런 다음 addEventListener를 사용하여 이 버튼에 "click" 이벤트 리스너를 추가합니다. 클릭 이벤트가 발생하면 이벤트 핸들러 함수 내에서 this는 클릭된 버튼 요소를 가리킵니다. 따라서 버튼의 텍스트를 변경할 수 있습니다.

클릭 이외에도 다른 이벤트 유형(예: hover, mouseup)에 대해서도 유사한 방식으로 이벤트 리스너를 추가하고 this를 사용할 수 있습니다. 이것은 DOM 요소에서 발생한 이벤트를 처리하는 일반적인 방법 중 하나입니다.

 

 

 

 

 
객체안에 메소드에서 this를 찍으면 그 객체를 인식하고 있다. 를 알 수 있다.
 
{ firstNmae: 'Kevin" Function: calcAge...} 까지 다 출력되잖아
 
this.year하면 1992가 된다고 그래서 41이 출력된다고
 

 

anotherProfile의 사라의 것이기에...47이 찍힌다는데
calcAge는 잘 알겠지만..위에 kevin에서 만들어짐. 
사라객체의 메소드 프로퍼티로 들어가게된거임.
 
const foo 로 함수로 그냥 만들어서 연산 넣어준다면....? 다른 값이 나온다.

 
여기서 NaN = Not a Number라는 뜻
 

 

여기서는 foo가 함수다. calcAge() 
함수를 참조하는 this라고?

함수를 출력하면 Object가 출력되고
두번째는 NaN이 출력됨

함수에는 year라는 프로퍼티가 없어서 숫자가 아니게된다는데
const foo에는 우리가 선언해준 프로퍼티가 없어서
this.year가 숫자가 아니게되서 NaN이 나옴 
 

 
그래서 this는 쓸려면
객체의 안에서 메소드로 가져와서 쓰는 방식으로 써야지
이렇게 함수표현식으로 써주면 안된다는말임.
const foo = profile.calcAge; 처럼
 
아 화살표함수 다시 공부해야하겠는데..?
 

 
 
과연 this는 객체를 참조해서 firstName을 올바르게 불러올까요?

아니면

화살표함수이기떄문에

"객체가 아닌"

함수의 전역object를 참조해서 firstName를 불러오지 못할까요?
 
호이스팅 
 
함수 선언 전에 콘솔찍어보는거 호이스팅 되는게 있잖아
 
오류는 안나는데 undefined뜸
 
 

 
그 뜻은
this가 객체를 온전히 참조하지못하고
이 함수의 전역객체를 참조하고있어서 즉 함수를 참조하고 있어서 (greet함수인가?) 
firstName을 받아오지못하고 있다.

객체안에서 this로 연산을 해야할 때는 화살표함수는 쓰면 안된다. 지양해야한다. (하면 안된다) 그대신 함수 형태로 써야한다.

calcAge: function calcAge () {
    console.log(this);
    return 2033 - this.year;
}

반응형

'PROGRAMMING > React' 카테고리의 다른 글

fatal: not a git repository (or any of the parent directories): .git  (0) 2023.10.08
스코프, 스코프체인, 호이스팅  (0) 2023.10.08
13강 복습  (0) 2023.10.08
단위테스트  (0) 2023.10.05
타입스크립트  (0) 2023.10.05
'PROGRAMMING/React' Related Articles more