ES6에서는 class라는 키워드를 이용하여 정의할 수 있다.
여기서 보이는 함수는 객체지향 프로그래밍에서 생성자함수라고 부른다.
생성자 함수(constructor)
➡️ 클래스 내에 생성자 함수는 하나만 있을 수 있다.
➡️ 인스턴스 객체(this)를 생성하고 초기화 한다.
➡️ 생성자 함수를 작성하지 않으면 기본 생성자가 제공된다.class Car { constructor(brand, name, color) { // 인스턴스가 만들어 질 때 실행되는 코드 this.brand = brand; this.name = name; this.color = color; } }
인스턴스를 만들 때는 new키워드를 사용한다.
let avante = new Car("hyundai", "avante", "black"); let mini = new Car("bmw", "mini", "white"); let beetles = new Car("volkswagen", "beetles", "red");
avante, mini, beetles와 같이 각각의 인스턴스는 Car라는 클래스의 고유한 속성과 메소드를 갖는다.
인스턴스에서의 사용
let avante = new Car("hyundai", "avante", "black"); avante.color; avante.drive;
✨내가 직접 ES6버전으로 실행시켜보기
💡Car의 속성 : brand, name, color
💡Car의 메소드 : constructor(), drive()
💡console의 결과
black
avante가 운전을 시작합니다.
절차적 언어
-초기의 프로그래밍 언어는 일반적으로 절차적 언어라고 부른다.
-절차적 언어는 순차적인 명령의 조합이다.
객체 지향 언어
-"클래스"라고 부르는 데이터 모델의 청사진을 사용해 코드를 작성한다.
-현대의 언어들은 대부분의 객체 지향의 특징을 갖고 있다.
OOP
-oop의 의미 : 사람이 세계를 보고 이해하는 방법을 흉내 낸 방법론
-프로그램 설계 철학 중 하나이다.
-객체로 그룹화 되고 한번 만들고 나면, 메모리 상에서 반환되기 전까지 객체 내의 모든 것이 유지된다. (고유의 데이터가 존재한다)
-캡슐화는 코드가 복잡하지 않게 만들고, 재사용성을 높인다.
-추상화는 코드가 복잡하지 않게 만들고, 단순화된 사용으로 변화에 대한 영향을 최소화한다.
-상속 역시 불필요한 코드를 줄여 재사용성을 높인다.
-다형성으로 인해 동일한 메서드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해진다.
클래스와 인스턴스
클래스에 포함된 세부사항은 속성과 메소드가 있다.
-클래스 : 세부사항(속성)이 들어가지 않는 청사진이다.(세부 사항만 넣는다면 그것은 객체가 된다.)
-인스턴스 : 클래스를 통해 만들어진 객체를 instance object, 줄여서 인스턴스라고 부른다.
-생성자 : 생성자를 통해 세부사항을 넣을 수 있다.
자바스크립트는 프로토타입 기반의 언어이다.
👉
Prototype
이란 무엇일까?
모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 원형 객체라고도 한다.
프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지인데 그것을 프로토타입 체인이라고 부른다.
eg) Human이라는 클래스와 인스턴스, 그리고 프로토타입의 관계
eg) 코드 실행 예제
class Human { constructor(name, age) { this.name = name; this.age = age; } sleep() { console.log(`${this.name}은 잠에 들었습니다`); } } let kimcoding = new Human('김코딩', 30); Human.prototype.constructor === Human; // true Human.prototype === kimcoding.__proto__; //true Human.prototype.sleep === kimcoding.sleep; //true
- Human 클래스의 생성자 함수는 Human이다.
- Human 클래스의 프로토타입은 Human 클래스의 인스턴스인 kimcoding의
__proto__
이다.- Human 클래스의 sleep 메서드는 프로토타입에 있으며, Human 클래스의 인스턴스인 kimcoding에서 kimcoding.sleep으로 사용할 수 있다.
-프로토타입 체인을 사용하여 객체 지향 프로그래밍의 특성 중 상속을 구현한다.
eg) 클래스 Human의 속성과 메소드 예시
let kimcoding = new Human('김코딩', 30); // 속성 kimcoding.age; kimcoding.gender; // 메소드 kimcoding.eat(); kimcoding.sleep();
eg) 클래스 Student의 속성과 메소드 예시
let parkhacker = new Student('박해커', 22); // 속성 parkhacker.grade; // 메소드 parkhacker.learn();
Student는 Human의 특징을 그대로 물려받는다 👉 이 과정을 상속 이라고 한다.
부모 클래스(여기서는 Human) : 속성과 메소드를 물려주는 클래스
자식 클래스(여기서는 Student) : 속성과 메소드를 물려받는 클래스
Student는 Human에게 상속 되었기 때문에 sleep(),eat() 이라는 메소드를 사용할 수 있다.
-DOM과 프로토타입
DOM도 상속 관계로 이루어져있다.
보통 클래스의 인스턴스는 new 키워드로 생성하지만, DOM에서는 new 키워드가 아닌 createElement를 사용한다.
eg) div엘리먼트의 상속관계
화살표 방향은 부모를 가리키는데, 제일 첫번째에 있는EventTarget
의 부모는 모든 클래스의 조상인Object
가 존재한다.
eg)👆 위의 사진을 참고하여 코드 실행 예시 문제를 풀어보자.let div = document.createElement('div'); div.__proto__ // HTMLDivElement div.__proto__.__proto__ // HTMLElement div.__proto__.__proto__.__proto__ // Element div.__proto__.__proto__.__proto__.__proto__ // Node div.__proto__.__proto__.__proto__.__proto__.__proto__ // EventTarget
위의 예시 처럼
__proto__
를 활용하여 상속 관계를 확인할 수 있다.
💥 한번에 이해가지 않는 부분들은 코드를 짜보며 실행시켜보기
이론만 붙잡고 있는 것보다 직접 실습으로 시도해보는 것이 더 이해가 빠를 수도 있다!!