JavaScript Essentials - ch.4 JS 클래스 (1) ~ (4)

1. 생성자 함수(Prototype)

• 기본적인 객체 데이터 구조

const dongdu = {
	firstName: 'dongdu', // 속성
    lastName: 'Lee', // 속성
    getFullName: function () { // 메소드
    	return `${this.firstName} {$this.lastName}`
    }
}

console.log(dongdu);

const Amy = {
	firstName: 'Amy', // 속성
    lastName: 'Clarke', // 속성
    getFullName: function () { // 메소드
    	return `${this.firstName} {$this.lastName}`
    }
}

console.log(Amy);
console.log(Amy.getFullName());

• JS 클래스 사용하기

function (first, last) {
	this.firstName = first;
    this.lastName = last;
    this.getFullName = function () { // 메소드
    	return `${this.firstName} {$this.lastName}`
    }
}

const dongdu = new User('dongdu', 'lee'); // 인스턴스 
const Amy = new User('Amy', 'Clarke');

console.log(dongdu); // 객체데이터 출력
console.log(Amy);

• prototype

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

console.log(dongdu.getFullName());

=> 자바스크립트 내부에서 배열 데이터 안에는 다양한 프로토타입으로 만들어져 있는 메소드들이 있음
=> 우리는 이런 메소드를 활용해서 배열, 객체, 문자 데이터를 다룸

2. this

일반 함수는 호출 위치에 따라 this 정의
화살표 함수는 자신이 선언된 함수 범위에서 this 정의

const dongdu = {
	name: 'dongdu',
    nomal: function () {
    	console.log(this.name)
    },
    arrow: () => {
    	console.log(this.name)
    }
}

dongdu.nomal(); // dongdu 출력
gongdu.arrow(); // undefined 출력

=> setTimeout 등의 함수를 실행 할 때는 화살표 함수가 용이

3. ES6 Classes

• 함수 축약

const dongdu = {
	name: 'dongdu',
    nomal() {
    	console.log(this.name)
    },
}

=> 객체 데이터 안에 있는 함수는 function 키워드가 없어도 괜찮음

• 자바스크립트 새로운 클래스 문법

class User {
	constructor(first, last) { // function 생략
    	this.firstName = first;
    	this.lastName = last;
    }
    getFullName() {
    	return `${this.firstName} {$this.lastName}`
    }
}

=> 좀 더 깔끔하고 효율적, 리엑트에서 많이 사용

4. 상속(확장)

class Vehicle {
	constructor (name, wheel) {
    	this.name = name;
        this.wheel = wheel;
    }
}
const myVehicle = new Vehicle('운송수단', 2)
console.log(myVehicle) // 객체 데이터 출력

class Bicycle extends Vehicle { // extends: 확장(상속)
	constructor (name, wheel) {
    	super(name, wheel); // super = Vehicle, super가 있는 자리에서 Vehicle이 실행됨
    }
}
const myBicycle = new Bicycle('삼천리', 2)
const sonBicycle = new Bicycle('세밯', 3)
console.log(myBicycle) // 객체 데이터 출력
console.log(sonBicycle)

class Car extends Vehicle { // 기존의 내용을 받아온 후 추가적으로 작성
	constructor (name, wheel, license) {
    	super(name, wheel)
        this.licens = license
    }
}
const myCar = new Car('벤츠', 4, true)
const sonCar = new Car('포르쉐', 4, false)
console.log(myCar) // 객체 데이터 출력, license 추가됨
console.log(sonCar)