3.16 오배이안
객체 지향 프로그래밍 : 옛날의 절차 지향 프로그래밍에서 속성과 함수를 하나의 객체 안에 묶어 사용하는 프로그래밍 기법으로 캡슐화,추상화,상속,다양화 라는 장점이 있다.
상속
ES6 이전 : 생성자 함수 + 프로토타입을 통한 상속 구현
ES6 이후 : Class 문법 + 프로토타입을 통한 상속 구현
class 를 통한 상속은 구현 할 수 있지만
생성자 함수를 통한 상속은 어떻게 하는지 궁금해 찾아보았다.
오늘 배운 것
1. class 를 이용한 상속
extends :
클래스간 상속에서는 extends 키워드를 통해 부모와 자식 관계를 정의할 수 있다.
super :
부모 클래스의 constructor() 를 가르킨다.사용방법은 두가지 이다.
- 부모 클래스의 constructor() 를 가져오는 법 : super()
- 부모 클래스의 메소드를 가져오는 법 : super.drive()
this :
자바스크립트에서 this? 를 알아보기 이전에 메소드를 알아보자 그럼 저절로 this 를 이해하게 될것이다.메소드 : 어떤 객체안에 있는 함수
메소드는 항상 어떤 객체 안에 있는 함수이다. 이때 메소드를 포함하고 있는 어떤 객체가 바로 this 이다.
클래스에서 new 키워드를 통해 객체를 생성할때(avante) 새로운 객체 안에 클래스의 constructor 가 들어가면서 초기화한 속성 값을 avante 에 넣어준다.
코드로 표현해보자면 이렇게..? Acar의 constructor() 가 avante 에 들어 간다고 생각해보자
이때 constructor() 메소드 안에 있는 this는 메소드를 포함하고 있는 어떤 객체이니까 avante 를 가리키는 것이다.
2. 생성자 함수를 이용한 상속
출력보면 Car 객체로 나오는데 오류인가 보다 😂 크롬 콘솔창으로 확인해보니 Acar 로 나온다! 근데 아반떼라는 객체로 나와야 하는거 아닌가? 새로 객체를 만든건디,,, 모지
- 속성의 상속 구현하기
Car.call(인자1 , 인자2,,,인자n) :
class 문법의 super() 를 구현하기 위해선 함수의 call() 메서드가 필요하다.
부모 생성자함수를 앞에 적어줘야한다.첫번째 인자 : 상속을 통해 새롭게 생성될 객체를 가리켜야 하기에 this 가 할당 되었다.
두번째 인자: 부모 생성자함수의 인자가 있다면 넣어주면 된다.
- 메서드의 상속 구현하기
메서드의 경우에도 상속을 구현할 수가 있다.
자식 생성자 함수의 프로토타입 프로퍼티를 부모 생성자 함수 프로토타입 프로퍼티로 연결해주면 된다 ( 거의 수동으로 연결하는 것 같이!😂)방법 1 : Acar.prototype = Object.create(Car.prototype)
방법 2 : Acar.prototype.
__proto__= Car.prototype두 방법이 가능하지만 방법1 을 선호!
비교를 해봤다. 더 어지러운 느낌이네 😂
