js에서 부모/자식 상속 구현하는 문법 - prototype & class
* prototype
- js에는 클래스라는 개념이 생긴 것은 es6부터! 하지만 class기반의 언어로 된 것은 아님
- 그래서 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어
- 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있음
- 아래는 코딩애플님의 설명!
- prototype은 유전자라고도 볼 수 있음
- prototype은 객체
- 부모 유전자에 기록이 되어 있으면 사용할 수 있다.
- prototype에 내용을 추가하면 자식요소들이 사용 가능
function 기계(){
this.q = 'strike';
this.w = 'ball';
}
//기계.name은 없음
//기계 안에 쓰면 자식이 {q: 'strike'} 을 직접 가진다
기계.prototype.name = 'kim'
//prototype으로 추가해주면 부모만 {name: 'kim'}을 가진다
let nunu = new 기계()
//nunu.name 하면 'kim'이 나옴
//object에서 자료를 뽑을 때
// 1. 직접 자료를 가지고 있으면 그 자료를 출력
// 2. 없으면 부모유전자로 접근해서 찾는다
// 3. 거기에도 없으면 부모의 부모 유전자에게도 접근(prototype chain)- prototype에 내재된 함수들이 있다(.sort(), .length, .concat() ...)
- Array.prototype.함수 = function () {} 하면 모든 array 자료에서 새로운 함수 사용 가능하다(내가 유전자를 수정하면 됨)
* class
- js에서 class는 object 뽑아내는 기계
- es6부터 class 키워드를 쓸 수 있게 되었음 (class constructor 생성자 함수 방식으로 사용함)
- 설정한 class를 기반으로 인스턴스 객체를 만들고 인스턴스 생성시에는 new 키워드를 사용함
- 생성과 동시에 생성자 함수가 실행되며 새로운 인스턴스가 할당됨
- 이렇게 할당된 인스턴스는 클래스 속성과 메소드를 동일하게 가진다.
function Human(name, age) {
}
// ES6 이후 추가된 문법
class Human {
constructor(name, age) {
}
}
let lee = new Human('lee', 30)* prototype언어(javascript)와 class언어(java, python)의 차이
- 클래스 기반 언어 : 틀 자체를 상속 시킨다. 상속시킨 틀을 이용해서 객체 생성
- 프로토타입기반 언어 : 객체들을 프로토타입으로 연결시킴, 프로토타입을 사용하여 클래스 속성을 흉내낸다.
출처 : https://www.youtube.com/watch?v=dHrI-_xq1Vo 코딩애플 최고!
https://velog.io/@sy3783/JS10.-%ED%81%B4%EB%9E%98%EC%8A%A4%EC%99%80-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85
https://hazel-developer.tistory.com/166
winwin