extends
// extends
class Sports{
constructor(member) {
this.member = member;
}
getMember(){
return this.member;
}
};
class Soccer extends Sports{
setGround(ground){
this.ground = ground;
}
};
let obj = new Soccer(13);
/*
1) Soccer 클래스의 Construcotr가 호출
2) 그런데 Soccer 클래스에 constructor를 작성하지 않았으므로 슈퍼 클래스의 constructor가 호출되면서 13을 파리미터 값으로 넘겨줌
3) 슈퍼 클래스의 constructor에서 this는 현재의 인스턴스를 참조하므로 인스턴스의 member 프로퍼티에 파라미터로 받은 13을 설정한후 돌아오게된다.
4) 생성한 인스턴스를 obj에 할당
*/
console.log(obj.getMember()); // 13
/*
obj.getMember()를 호출하면 우선 obj.__proto__에서 메서드를 찾는다.
여기에 존재하지않으므로 다시 obj.__proto__.__proto__에서 찾는다.
메서드가 존재하므로 호출한다.
이와같이 __proto__를 계층으로 사용하여 메서드를 찾는다.
따라서 서브 클래스와 슈퍼 클래스에 같은 이름의 메서드가 있으면 서브 클래스의 메서드가 호출된다.
이것이 자바스크립트의 상속 메커니즘이다.
*/
console.log(obj.ground); // undefined
super
// super
// 메서드 오버라이딩
// 서브 클래스와 슈퍼 클래스에 같은 이름의 메서드가 있을때 서브 클래스의 메서드가 호출되는것을 메서드 오버라이딩이라고 한다.
class Sports{
setGorund(ground){
this.ground = ground;
}
};
class Soccer extends Sports{
setGorund(ground) {
super.setGorund(); // 슈퍼 클래스의 setGround()를 호출
// 파라미터를 안넘기는 이유는 의도적인것 : ground 프로퍼티를 슈퍼 클래스와 서브 클래스에서 공유하려는 의도
this.ground = ground+"!!";
}
};
let obj = new Soccer();
obj.setGorund("프로그래밍");
console.log(obj.ground); // 프로그래밍!!
// -------------
class Subject {
constructor(grade) {
this.grade = grade;
console.log(grade);
}
};
class Math extends Subject{
constructor(grade) {
super(grade); // this 사용안됨
this.grade = "B+";
console.log(this.grade);
}
}
/*
constructor와 super 키워드의 관계
1) 서브 클래스와 슈퍼 클래스 양쪽에 constructor를 작성하지 않아도 인스턴스가 생성된다. 이때 디폴트 constructor를 사용
2) 서브 클래스에 construcotr를 작성하지 않고 슈퍼 클래스에 construcotr를 작성하면, 서브 클래스의 디폴트 constructor가 호출되고
슈퍼 클래스의 constructor가 호출된다.
3) 서브 클래스에 construcotr를 작성하고 슈퍼클래스에 constructor를 작성하지 않으면 서브 클래스의 construcor가 호출되지만
construcotr에서 에러가 발생된다.
4) 서브 클래스와 슈퍼 클래스 양쪽에 construcotr를 작성하면, 서브 클래스의 consturctor가 호출되지만 constructor에서 에러가 발생한다.
에러가 발생하지 않도록 한다면 하려면 서브 클래스에 constructor를 작성하지 않거나,
작성해야 한다면 construcotr에 super()를 작성하여 슈퍼 클래스의 construcotr를 호출해야 한다.
*/
let obj2 = new Math("A");
/*
A
B+
*/
빌트인 오브젝트 상속
// 빌트인 오브젝트 상속
// extends 키워드로 Array오브젝트오 ㅏ같은 빌트인 오브젝트를 상속받을수 있다.
class ExtendArray extends Array{
constructor() {
super();
}
getToatal(){
let total = 0;
for(var value of this){ // this가 obj인스턴스를 참조
total += value;
};
return total;
}
};
let obj3 = new ExtendArray();
obj3.push(10,20);
console.log(obj3.getToatal()); // 30
// Object에서 super사용
// 두 개의 Object 오브젝트가 연결된 구조에서 super.name() 형태로 슈퍼 오브젝트의 메서드를 호출할수 있다.
let Object1 = {
getTitle(){
console.log("과목1");
}
};
let Object2 ={
getTitle() {
super.getTitle();
console.log("과목2");
}
};
Object.setPrototypeOf(Object2, Object1);
/*
Object2.__proto__에 Object1 오브젝트의 프로퍼티가 첨부된다.
Object 오브젝트가 대상이므로 생성자 함수가 없지만, __proto__에 프로퍼티가 첨부되는것 상속 구조이다.
*/
Object2.getTitle();
/*
과목1
과목2
*/
static 키워드
// static 키워드
// 정적메서드는 인스턴스를 생성하지 않고 호출한다. "클래스이름.ㅈ어적 메서드 이름()"형태로 작성
// 메서드를 호출하기위해서는 메서드가 Function 오브젝트이어야 한다.
class Building {
static getGround(){
return "야구장";
}
};
console.log(Building.getGround()); // 야구장
Class 호이스팅 : 불가능
// Class 호이스팅 : 불가능
try{
let result = classCustom1;
} catch (e) {
console.log(e); // ReferenceError: Cannot access 'classCustom1' before initialization
};
class classCustom1{
static getCustom(){
return "Custom1";
}
}
반응형
'WEB > ECMAScript' 카테고리의 다른 글
Map 오브젝트 (0) | 2020.06.21 |
---|---|
Class -> 제너레이터 / new.target / image (0) | 2020.03.02 |
Class -> 메서드 선언, 상속 메커니즘 (0) | 2020.02.27 |
Generator Object-2 (0) | 2020.02.26 |
RegExp Object / Generator Object (0) | 2020.02.25 |