My Profile Photo

DongChanS's blog

수학과 학생의 개발일지

자바스크립트 (7) - Class (작성중)

1) Class

자바스크립트에는 클래스를 만들 수 있는데 사실 함수라고 합니다.

function Func (option) {
    this.a = option.a
    this.b = option.b
    this.c = option.c
    return this
 }

var abc = new Func({a:'1',b:'2',c:'3'})
console.log(abc.a) // 1

var what = Func({a:'1',b:'2',c:'3'})
console.log(what) // 엄청나게 긴 object가 출력됨!! (주의)
console.log(typeof what) // object

Func라는 함수를 선언해도,

  • abc 객체를 new 키워드로 만들기
  • what 변수를 Func 함수를 통해서 리턴하기

두가지 기능이 다 됩니다. 그래서 이런 함수식 표현은 굉장히 자바스크립트에 적응하기 힘들게 만드는 구간 중 하나이기 때문에 ES6부터는 다른 언어와 비슷한 클래스 선언방식이 등장했습니다.


함수도 함수 표현식과 함수 선언식으로 정의할 수 있듯이,

클래스도 클래스 표현식과 클래스 선언 두가지를 제공합니다.

1-1. Class 정의

  1. Class 선언

    class Car {
    constructor (option) {
        this.title = option.title
    }
    drive() {
        return 'Vroom'
    }
}

    인자로 option이라는 것을 받게 했는데, 물론 title만을 받아도 되지만 뒤에 배울 상속을 위해서 object형태로 인자를 받기로 했습니다.

  2. Class 표현식

    var Car = class {
    constructor(option){
        this.title = option.title
    }
    drive() {
        return 'Vroom'
    }
}

함수 표현식과 함수 선언과는 달리, 클래스에서는 호이스팅이 일어나지 않기 때문에 두 방법은 크게 차이가 없어보입니다.

1-2. 인스턴스 사용

간단합니다. 파이썬처럼 호출하면 됩니다.

const car = Car({title:'tico'})
console.log(car.drive())
console.log(typeof car.drive)
console.log(typeof car)

1-3. 상속

extends라는 키워드를 이용해서 클래스를 상속받을 수 있습니다.

(물론 생성자가 없는 객체를 확장할 수는 없습니다.)

class Audi extends Car {
    constructor (option) {
        super(option)
        this.color = option.color
    }
}

super(option)을 통해서 부모클래스의 생성자를 호출해주는 작업을 할 수 있습니다.

물론 메서드 오버라이딩을 지원하기 때문에,

class Audi extends Car {
	// 생성자 생략
    drive () {
        return 'Vroooooom'
    }
}

이렇게 하면 drive 메소드를 변경할 수 있습니다.

const audi = new Audi({title : 'A8', color : 'blue'})

console.log(audi)
console.log(audi.drive())
console.log(audi.honk())

1-4. Class hot fix

클래스를 선언하고 나서 메서드를 수정하고싶은데,

Audi.drive = () => 'Vrooooom'

이렇게 해도 딱히 변하는게 없다.

그래서 이런 기능을 지원하기 위해서 프로토타입이라는 개념이 있는데,

Audi.prototype.drive = () => 'Vroooom'

prototype은 붕어빵을 만들어내는 붕어빵 틀을 맡고 있다고 생각하면 됩니다.

그래서 이렇게 prototype을 통해서 drive를 바꿔주면 이미 생성된 인스턴스들의 drive 메서드도 바뀌게 됩니다.

prototype에 대해서 자세히 알아보려면 여기를 참조하시면 좋습니다.

1-5. instanceof

instanceof라는 키워드는 이 인스턴스가 누구 부모로부터 왔는지를 판단해주는 키워드입니다.

car instanceof Car // true
car instanceof Audi // false
audi instanceof Car // true
audi instanceof Audi // true

car instanceof Car와 audi instanceof Audi는 true인게 당연한데,

car instanceof Audi는 false입니다. 왜냐하면, Audi 클래스는 Car 클래스보다 더 좁은 범위이기 때문입니다.

반대로 audi instanceof Car는 true가 되는 것도 위와 같은 이유입니다.

번외) Axios

fetch, XMLHttpRequest 보다 매우 강력한 Ajax 요청을 보내는 라이브러리입니다.

https://github.com/axios/axios 에서 예제를 받을 수 있습니다.

1. 설치

CDN으로 가져올 수 있음.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. 사용

const URL = 'https://dog.ceo/api/breeds/image/random'

axios.get(URL)
    .then(response => {
        console.log(response)
        const imageURL = response.data.message
        const imgBox = document.querySelector('.img-box')
        const newtag = document.createElement('img')
        newtag.src = imageURL
        imgBox.appendChild(newtag)
    })

뭐 이런식으로..

fetch에서는 response.json()과 같이 파싱을 굳이 하지 않아도 바로 사용할 수 있다는게 매우 큰 장점입니다.

comments powered by Disqus