TIL 92 l this part1

yeonbee·2022년 1월 5일
0

자바스크립트

목록 보기
1/3
post-thumbnail

Core JS This에 대해 간략히 적어본다. part1

JS에서 This의 값은 상황에 따라 달라진다?

  • 함수를 호출하는 방법에 의해 결정되거나,
  • 호출된 방법과 무관하게 명시적으로 this를 binding하는 방법으로 결정된다

ex) 쉬운 설명

  1. 할머니 : 는 허리가 아프다. (나 === 할머니)
  2. 아버지 : 는 다리가 아프다. (나 === 아버지)
  3. 어머니 : 는 머리가 아프다. (나 === 어머니)

예시

let someone = {
name : 'codejong',
whoAmI : function(){
  console.log(this);
}
};

someone.whoAmI() // {name: 'codejong', whoAmI: ƒ}

let newSomeOne = someone.whoAmI;

newSomeOne(); // Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

 

호출을 누가 했는가?가 핵심

  1. someone.whoAmI()
    : whoAmI()를 호출한 직접적인 부분은 someone

  2. myWhoAmI();를 호출한 주체는 newSomeOne => 전역변수이다
    : JS에서는 모든 변수는 특정 객체의 프로퍼티로 동작을 합니다.
    전역변수를 선언하면 JS 엔진은 이를 전역객체의 프로퍼티로 할당을 합니다.
    전역변수가 호출을 한다는 뜻은 JS의 전역객체, 브라우저 환경에서는 window, node.js 환경에서는 global.의 자기자신 this.

상황별 this의 값

  1. 함수를 호출하는 방법 4가지(다음주 월)
  • 일반 함수 호출
  • 메서드 호출
  • 생성자 함수 호출
  • Function.prototype.apply/call/bind 메서드에 의한 간접 호출
  1. this binding
  • 전역 객체
  • 메서드 호출한 객체
  • 생성자 함수가 (미래에) 생성할 인스턴스
  • Function.prototype.apply/call/bind 메서드에 첫번째 인수로 전달한 객체

화살표 함수를 쓸 때,
this와 bind를 안 써도 됨
=>>> 자세히 알아보기(원인과 사용방법)

** bind가 무엇인지 정확히 알아오기

use strict mode에서의 this와
안 쓸 때의 this
=>>> 이것도 알아보기

profile
♪(^∇^*) 워-후!!(^∀^*)ノシ

0개의 댓글