JS 클래스

LOOPY·2021년 8월 10일
0
post-thumbnail

1. 생성자 함수(prototype)

  • 객체 데이터의 속성+메소드 -> '멤버'
  • 멤버 중 보간법으로 this 사용할 경우 해당 객체 지칭
function user(first, last) {
  this.firstName = first
  this.lastName = last
}
const heropy = new user('Heropy', 'Park')

-> new 키워드 통해 생성자 함수로 인스턴스 생성

user.prototype.getFullNmae = function() {
  return `${this.firstName} ${this.lastName}`
}

-> 각 객체 내에서 getFullName 함수 만들면 메모리 낭비 심하니까 prototype 활용해 재사용할 수 있도록
⭐ prototype 내에는 기본적으로 다양한 메소드 포함되어 있음
🌟 생성자로 new와 함께 사용되는 함수는 PascalCase(첫 문자부터 대문자로) 작성 꼭!


2. This

  • 일반 함수는 호출 위치에 따라 this 정의 -> 호출될 때 연결되어있는 객체 참조
  • 화살표 함수는 자신이 선언된 함수 범위에서 this 정의 -> 선언부의 객체 참조

3. ES6 Classes

  • 객체 데이터 내의 메소드는 normal : function() {} 대신 normal(){} 형태로 바로 정의 가능
class User{
  constructor(first, last){
    this.firstName = first
    this.lastName = last
  }
  getFullName(){
    return `${this.firstName} ${this.lastName}`
  }
}

-> 바로 prototype으로 만들어지는 메소드


4. 상속(확장) extends

class B extends A{
  constructor(name, gender){
    super(name) // 부모의 생성자 호출
    this.gender = gender 
  }
}

🌟🌟🌟 prototype은 정확히 무엇인가 다시 공부하기!!

profile
2년차 프론트엔드 개발자의 소소한 기록을 담습니다 :-)

0개의 댓글

관련 채용 정보