[Javascript] Class

산하·2022년 5월 26일
0

Javascript

목록 보기
1/2
post-thumbnail

더 자세한 class 설명 보기

class 기본 형태


class Zoo {
  
  // 생성자
  constructor(name){
  	this.name = name
  } 
  // 메소드
  method1(){
  	console.log("I'm method1")
  }
  
  const method2 = () => {
  	console.log("I'm method2")
  }
  
}

const kZoo = new Zoo('k-Zoo')

kZoo.method1() // I'm method1 출력
kZoo.method2() // I'm method2 출력


new Zoo('k-Zoo')가 호출될 때 과정


1. 새로운 Zoo 객체가 생성된다.

2. 생성자가 실행되면서 주어진 name(예제에서는 'k-Zoo')을 name 필드에 할당한다.

3. 이 다음부터 객체의 메서드를 호출할 수 있다.



자바스크립트에서의 클래스


class Zoo {
  
  constructor(name){
  	this.name = name
  } 
  
  method1(){
  	console.log("I'm method1")
  }
}

const ZooFn = (name) =>{
	this.name = name
}

console.log(typeof Zoo) // function
console.log(typeof ZooFn) // function

자바스크립트에서 class의 type은 funtion으로 나온다.
하지만 이 둘은 다르다.
function은 ZooFn()으로 호출할 수 있지만
class 는 Zoo()로 호출할 수 없고 객체 생성시에도
new Zoo()와 같이 new라는 키워드를 꼭 붙여줘야 한다.


getter, setter

class Zoo {
  
    constructor(value){
        this.name = value
    } 
    
    get name(){
        return this._name
    }
    
    set name(a){
        this._name = a
    }
  }

const kZoo = new Zoo('K-Zoo')

console.log(kZoo.name) // K-Zoo 출력
kZoo.name = 'new Zoo'
console.log(kZoo.name) // new Zoo

메소드 형식으로 정의하지만 사용할 때는 일반 필드에 접근하듯이 사용한다.

  • getter만 있을 때 -> kZoo.name = 'new Zoo' 접근 오류
TypeError: Cannot set property color of #<Cloth> which has only a getter
  • setter만 있을 때 -> kZoo.name = undefined
  • getter, setter 둘 다 없을 때 -> 전부 정상 작동
  • getter, setter 둘 다 있을 때 -> 전부 정상 작동
  • setter와 constructor가 같을 때 무한 재귀에 빠짐

차이점 있음

getter, setter는 이런거 가능

class Zoo {
  
    constructor(value){
        this.name = value
    } 
    
    get name(){
        return "이름: " + this._name
    }
    
    set name(a){
        this._name = "<" + a + ">"
    }
  }
profile
반갑습니다 :) 백앤드 개발자 산하입니다!

0개의 댓글