[Javascript] Class

더 자세한 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 + ">"
    }
  }