FE 기술/JavaScript

JavaScript) static 메서드와 class

2023. 4. 24. 13:58
목차
  1. 프로토타입(Prototype)

static과 class

static 메서드

  • "prototype"이 아닌 클래스 함수 자체에 메서드를 설정
  • 메서드를 프로퍼티 형태로 직접 할당하는 것과 동일한 일을 함
  • 어떤 특정한 객체가 아닌 클래스에 속한 함수를 구현하고 할 때 주로 사용

매개변수를 이용해 관련 정보가 담긴 클래스 객체생성 → constructor

비어있는 객체 생성 → static(?)

ex)

class Article{
	constructor(title, date) {
		this.title = title;
		this.date = date;
	}
	
	static createTodays() {
		return new this("Today's digest", new Date());
	}
}

🫧정적 메서드는 특정 클래스 인스턴스가 아닌 클래스 ‘ 전체’에 필요한 기능을 만들 때 사용

🫧인스턴스끼리 비교해주는 메서드나 팩토리 메스드를 만들 때 정적 메서드가 쓰임

+) 정적 프로퍼티는 데이터를 클래스 수준에 저장하고 싶을 때 쓰임! 개별 인스턴스에 묶이지 않음.

+) 정적 블록 내부의 this는 클래스의 생성자 객체를 참조한다.

+) 팩토리 메서드란 인스턴스 생성을 서브 클래스에 위임하는 것

프로토타입(Prototype)

자바스크립트의 모든 객체는 프로토타입이라는 객체를 가지고 있으며, 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.

상속되는 정보를 제공하는 객체를 프로토타입이라고 함

각각 인스턴스(객체)가 생성될 때마다 동일한 기능을 하는 메서드도 그만큼 생성되니 메모리를 소비한다. → 어차피 동일한 기능을 하는 메서드라면 공유하게끔!

= 공유할 메서드들이 담긴 객체가 따로 존재하고 인스턴트가 생성되면 이 객체를 상송받아서 객체가 갖고 있는 메소드를 사용하게 하자.

 

❓ 근데 왜 staic인 경우 클래스로 정의해

const 객체 안에 넣을 수도 있고 그냥 함수로 덩그라니 있을 수도 있는데? 근데 왜 굳이 클래스로 정의하는거임

(나의 판단)

→ 재사용을 해야할 때 변경점이 없다 (다시 초기 설정 해야할 필요 없음!) const

→ 다시 사용할 때 틀이 필요하다 class

+) 모든 메서드는 생성자로서 이용할 수 있음, 근데 static으로 정의하면 new 키워드로 생성된 인스턴스에 proto로써 참조 불가능하게 함

저작자표시 비영리 변경금지 (새창열림)

'FE 기술 > JavaScript' 카테고리의 다른 글

JavaScript) Scope  (0) 2023.04.24
JavaScript) 명령형, 선언형의 차이  (0) 2023.04.24
JavaScript) 상속  (0) 2023.04.24
JavaScript) Class와 함수의 차이  (0) 2023.04.24
JavaScript) 다양한 함수 선언 방식  (0) 2023.04.24
  1. 프로토타입(Prototype)
'FE 기술/JavaScript' 카테고리의 다른 글
  • JavaScript) 명령형, 선언형의 차이
  • JavaScript) 상속
  • JavaScript) Class와 함수의 차이
  • JavaScript) 다양한 함수 선언 방식
Rulu_
Rulu_
벨로그가 보기 편해요!! 티스토리는 md파일 그대로 복붙해서 올립니다ㅎ https://velog.io/@hafnium1923
Rulu_
루루의 개발 일지
Rulu_
전체
오늘
어제
  • 분류 전체보기 (61)
    • FE 기술 (28)
      • JavaScript (6)
      • React (9)
      • React Native (2)
      • Technic (7)
      • CSS (4)
    • BE 기술 (1)
    • 책 정리 (0)
      • 코어 자바스크립트 (7)
      • 이펙티브 타입스크립트 (6)
    • 우아한 테크 코스 회고 (14)
      • 프리코스 후기 (5)
      • 레벨 1 (2)
      • 레벨 2 (2)
      • 레벨 3 (5)
    • 우아한 테크 코스 피드백 (1)
      • 레벨 1 (1)
      • 레벨 2 (0)
    • 우아한 테크 코스 생활 (3)
      • 생활 이모저모 (1)
      • 글쓰기 (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 레벨인터뷰
  • input 여러개
  • 회고
  • react
  • 5기
  • 테코톡
  • 재사용 컴포넌트
  • props 여러개
  • 우아한테크코스
  • 우아한테크코스후기
  • 테코톡준비자료
  • input 컴포넌트
  • 레벨로그
  • 프론트
  • 한달생활기
  • spread operator

최근 댓글

최근 글

hELLO · Designed By 정상우.
Rulu_
JavaScript) static 메서드와 class
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.