[JS] 클래스

1. prototype 속성

 

- 배열 데이터에서 사용할 수 있는 각각의 속성이나 메소드들은 기본적으로 prototype 속성에 연결되어 있음

ex ) Array.prototype.include

- 결국 prototype은 new 키워드를 통해서 만든 생성자 함수에서 반환된 결과인 하나의 배열 데이터(=인스턴스)에서 사용할수 있는 별도의 속성이나 메소드를 등록하는 개체!

--> js 데이터는 결과적으로 생성자 함수에서 반환된 하나의 인스턴스

 

예제1

// const fruits = ['Apple', 'Banana', 'Cherry'];
const fruits = new Array('Apple', 'Banana', 'Cherry');

console.log(fruits);
console.log(fruits[1]);
console.log(fruits.includes('Banana'));

// test는 인위적으로 새로 추가한 것
// 배열데이터에서 사용할 수 있는 메소드
Array.prototype.test = function (){
    console.log(this);
}

fruits.test() //['Apple', 'Banana', 'Cherry']
const arr = []
arr.test() // []

 

예제2

// 이 방법보다 리터럴을 사용한 예제1이 더 편하지만
// getfullname 메소드를 효율적으로 사용하기 위해 예제2 구현
// 프로토타입 방법도 있지만, es6에 새롭게 나온 클래스 문법을 통해서 구현 가능

// 복제해야하는 메소드가 많을 경우
function User(first, last) {
    this.firstName = first
    this.lastName = last
}

// 여기서 화살표 함수를 사용하면 this 키워드 정의가 달라져서
// prototype 메소드 생성시, 꼭!!! 일반함수를 사용해야함

// getfullname 함수는 user 함수의 프로토타입으로 등록이 된 메소드
// user 생성자 함수에서 반환된 인스턴스 객체에서는 언제든지 프로토타입에 등록된 메소드를 사용 가능
User.prototype.getFullName = function() {
    return `${this.firstName} ${this.lastName}`
}

 

// new 키워드로 생성자 함수 호출
const test = new User('test', 'park');
const neo = new User('neo','anderson');

console.log(test); // 출력 참고
console.log(neo);  // 출력 참고
console.log(test.getFullName()); // test park
console.log(neo.getFullName()); // neo anderson

 

 

 

2. 함수

 

1) 일반함수

const test = {
    firstName : 'test',
    lastName : 'park',
    getFullName : function(){
        return `${this.firstName} ${this.lastName}`
    }
}


const neo = {
    firstName : 'neo',
    lastName : 'anderson',
}

// 객체 데이터의 메소드를 일반함수로 만들면 
// 일반 함수에서의 this는 함수가 호출되는 곳에서 정의됨
console.log(test.getFullName()) // test park

 

 

2) 메소드 빌려서 사용하기

const test = {
    firstName : 'test',
    lastName : 'park',
    getFullName : function(){
        return `${this.firstName} ${this.lastName}`
    }
}

const neo = {
    firstName : 'neo',
    lastName : 'anderson'
}

// neo라는 객체데이터가 test의 getFullName 메소드를 빌려서 호출됨
// getFullName 메소드를 두 객체에 복제해서 안넣어도 됨
console.log(neo.getFullName.call(neo)) // neo anderson

 

 

 

- prototype 방식

// prototype 방식
function User(first, last){
    this.firstName = first
    this.lastName = last
}

User.prototype.getFullName = function(){
    return `${this.firstName} ${this.lastName}`
}

 

 

- class 방식

// class 방식
class User {
    // 함수 역할
    constructor(first, last) {
        this.firstName = first
        this.lastName = last
    }
    getFullName(){
        return `${this.firstName} ${this.lastName}`
    }
}

const test = new User('test', 'park');
const neo = new User('new', 'as');

console.log(test.getFullName())

 

 

 

3. Getter/Setter

 

- getter : 값 조회

- setter : 값 지정

 

class User {
    constructor(first, last){
        this.firstName = first;
        this.lastName = last;
    }
    // getter(값조회) 는 속성처럼 사용 가능
    // fullName 메소드를 속성처럼 사용할 때마다 클래스에서 함수 동작
    get fullName() {
        return `${this.firstName} ${this.lastName}`
    }
    // 속성에다가 값을 지정할 때 동작하는 메소드
    set fullName(value){
        console.log(value);
        value.split(' ');
        [this.firstName, this.lastName] = value.split(' ')
    }
}

const test = new User('test', 'park');
console.log(test.fullName)

test.firstName='tt'
console.log(test.fullName)

test.fullName = 'new ander'

 

 

 

 

4. 정적 메소드

 

- 유저 클래스에서 바로 사용할 수 있는 메소드

- 인스턴스에서는 사용 불가능

class User {
    constructor(first, last){
        this.firstName = first;
        this.lastName = last;
    }
    getFullName() {
        return `${this.firstName} ${this.lastName}`
    }
    // static이 없을 경우, 인스턴스에서만 사용가능
    // static이 있을 경우, 정적 메소드로 유저 클래스에서 직접적으로 사용 가능하나, 인스턴스에서는 불가능
    static isUser(user){
        if(user.firstName && user.lastName){
            return true
        }
        return false
    }
}

const test = new User('test', 'park')
console.log(test.getFullName())
console.log(User.isUser()) // 가능
// console.log(test.isUser()) // 불가능

console.log(User.isUser(test))

 

 

 

5. 상속 및 instance of

 

- 클래스에서 상속(extends) 시, super 사용으로 실행하려는 메소드 입력 필수

- instance of : 키워드 앞쪽에 있는 데이터가 키워드 뒤쪽에 있는 클래스에서 인스턴스로 만들어져있는지 확인
                       -> 만들어진 클래스, 상속된 클래스만 true

// 운송수단
class Vehicle {
    constructor(acceleration = 1){
        this.speed = 0
        this.acceleration = acceleration
    }
    accelerate() {
        this.speed += this.acceleration
    }
    decelerate() {
        if (this.speed<=0){
            console.log('정지!')
            return
        }
        this.speed -= this.acceleration
    }
}


// 자전거
class Bicycle extends Vehicle {
    constructor(price=100, acceleration){
        // extends를 사용했기 때문
        // vehicle 클래스의 constructor 사용
        super(acceleration)
        // price, wheel은 인수로 받음
        this.price = price
        this.wheel = 2
    }
}

// price, wheel
const bicycle = new Bicycle(300, 2)
bicycle.accelerate()
bicycle.accelerate()
console.log(bicycle)
// intance of : 키워드 앞쪽에 있는 데이터가
// 키워드 뒤쪽에 있는 클래스에서 인스턴스로 만들어져있는지 확인
// 만들어진 클래스, 상속된 클래스만 true
console.log(bicycle instanceof Bicycle) // true
console.log(bicycle instanceof Vehicle) // true


// 자동차
class Car extends Bicycle {
    constructor(license, price, acceleration) {
        super(price, acceleration)
        this.license = license
        this.wheel = 4
    }
    // 오버라이딩(Vehicle에서 정의되었으나, 덮어쓰기)
    accelerate() {
        if (!this.license) {
            console.error('무면허!')
            return
        }
        this.speed += this.acceleration
        console.log('가속!', this.speed)
    }
}

const carA = new Car(true, 7000, 10)
const carB = new Car(false, 4000, 6)
console.log(carA);
console.log(carB);
console.log(carA instanceof Car); // true


// 보트
class Boat extends Vehicle {
    constructor(price, acceleration) {
        super(acceleration)
        this.price = price
        this.motor = 1
    }
}

const boat = new Boat(10000, 5)
console.log(boat)
console.log(boat instanceof Car) // false

 

 

- instanceof, constructor

// instance of, constructor

class A {
    constructor() {
    }
}
class B extends A {
    constructor() {
        super()
    }
}
class C extends B {
    constructor() {
        super()
    }
}

const a = new A()
const b = new B()
const c = new C()


console.log(b instanceof A) // true
console.log(b instanceof B) // true
console.log(b instanceof C) // true

// constructor 속성과 해당 클래스를 비교해서 같은 것 확인 가능
console.log(c.constructor=== A) // false
console.log(c.constructor=== B) // false
console.log(c.constructor=== C) // true

 

 

const fruits = ['Apple', 'Banana'];
// => 위와 같은 코드
// const fruits = new Array('Apple', 'Banana');

// fruits 데이터는 Array 클래스의 인스턴스
console.log(fruits.constructor === Array) // true
console.log(fruits instanceof Array) // true