n/a.ターゲット

25.クラス-継承(extends)

25-8. 継承クラスと継承コンストラクション関数

class Animal {
  constructor(age, weight) {
    this.age = age;
    this.weight = weight;
  }
  
  move() { return "move"; }
}

// 상속
class Lion extends Animal {
  hunt() { return "hunt"; }
}

const lion = new Lion(4, 21);

console.log(lion instanceof Lion);
console.log(lion instanceof Animal);

console.log(lion.move());
console.log(lion.hunt());

// 결과
true
true
"move"
"hunt"

25-9. extendsキーワード

class Animal {}

// 상속
class Lion extends Animal {}

function Animal(age) {
  this.age = age;
}

class Lion extends Animal {}
const lion = new Lion(7);
console.log(lion.age);

// 결과
7

25-10. ダイナミック継承

// 생성자 함수
function Animal() {}

// 클래스
class Plant {}

let flag = true;
class Lion extends (flag ? Animal : Plant) {}

flag = false;
class Tree extends (flag ? Animal : Plant) {}

const lion = new Lion();
const tree = new Tree();

console.log(lion instanceof Animal);
console.log(lion instanceof Plant);
console.log(tree instanceof Animal);
console.log(tree instanceof Plant);

// 결과
true
false 
false
true

25-11. サブクラスのconstructor

class Animal {}

class Animal {
  // 암묵적으로 정의
  constructor() {}
}

class Animal {}

class Monkey extends Animal {}

class Animal {
  // 암묵적으로 정의
  constructor() {}
}

class Monkey extends Animal {
  // 암묵적으로 정의
  constructor(...agrs) {
    super(...args);
  }
}

Restパラメータ

25-12. スーパーキー

25-12-1. スーパーコール

class Animal {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }
}

class Monkey extends Animal {
  constructor(a, b, c) {
    super(a, b);
    this.c = c;
  }
}

const monkey = new Monkey(1, 2, 3);
console.log(monkey);

// 결과
Monkey {a: 1, b: 2, c: 3}

class Animal {}

class Rabbit extends Animal {
  constructor() {}    // Error
}

const rabbit = new Rabbit();

// 결과
"Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor"

class Animal {}

class Rabbit extends Animal {
  constructor(a) {
    this.a = a;    // Error
    super();
  }
}

const rabbit = new Rabbit(1);

// 결과
"ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor"

class Animal {
  constructor() {
    super();    // Error
  }
}

class Rabbit extends Animal {
  constructor(a) {
    super();
  }
}

const rabbit = new Rabbit(1);

// 결과
"Uncaught SyntaxError: 'super' keyword unexpected here"

25-12-2. スーパーリファレンス

class Parent {
  constructor(job1, job2) {
    this.mom = job1;
    this.dad = job2;
  }
  
  getParentJob() {
    return `mom is ${this.mom} and dad is ${this.dad}`
  }
}

class Child extends Parent {
  constructor(name, age1, age2) {
    super(age1, age2);
    this.name = name;
  }
  
  getParentJob() {
    return `${this.name}'s ${super.getParentJob()}`
  }
}

const james = new Child("james", "reporter", "programmer");
console.log(james.getParentJob());

// 결과
"james's mom is reporter and dad is programmer"

class Animal {
  static type() {
    return "is Animal";
  }
}

class Tiger extends Animal {
  static type() {
    return `tiger ${super.type()}`
  }
}

console.log(Tiger.type());

// 결과
"tiger is Animal"

25-13. 継承クラスのインスタンス作成プロセス

// 수퍼클래스
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  
  getArea() {
    return this.width * this.height;
  }
  
  toString() {
    return `width = ${this.width}, height = ${this.height}`;
  }
}

// 서브클래스
class ColorRectangle extends Rectangle {
  constructor(width, height, color) {
    super(width, height);
    this.color = color;
  }
  
  toString() {
    return super.toString() + `, color = ${this.color}`;
  }
}

const colorRectangle = new ColorRectangle(2, 4, "red");
console.log(colorRectangle);
console.log(colorRectangle.getArea());
console.log(colorRectangle.toString());

// 결과
ColorRectangle {width: 2, height: 4, color: 'red'}
8
"width = 2, height = 4, color = red"

25-13-1. サブクラスのスーパーコール

25-13-2. スーパークラスインスタンスを作成し、このインスタンスをバインド

class Rectangle {
  console.log(this);		// ColorRectangle {}
  
  // 생략
}

class ColorRectangle extends Rectangle {}

const colorRectangle = new ColorRectangle(2, 4, "red");

25-13-3. スーパークラスのインスタンスの初期化

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
    
    console.log(this); 		// ColorRectangel {width: 2, height: 4}
  }
}

class ColorRectangle extends Rectangle {}

const colorRectangle = new ColorRectangle(2, 4, "red");

25-13-4. サブクラスコンストラクション関数を返してバインド

class ColorRectangle extends Rectangle {
  constructor(width, hieght, color) {
    console.log(this);		// Error
    super(width, height);
    console.log(this);		// ColorRectangel {width: 2, height: 4}
  }
}

const colorRectangle = new ColorRectangle(2, 4, "red");

25-13-5. 初期化サブクラスインスタンス

class ColorRectangle extends Rectangle {
  constructor(width, hieght, color) {
    super(width, height);
    this.color = color;
  }
}

25-13-6. インスタンスを返す

class ColorRectangle extends Rectangle {
  constructor(width, hieght, color) {
    super(width, height);
    console.log(this);	// ColorRectangel {width: 2, height: 4}
    this.color = color;
    console.log(this);	// ColorRectangel {width: 2, height: 4, color: "red"}
    
    // return this;
  }
}

const colorRectangle = new ColorRectangle(2, 4, "red");

25-14. 標準ビルダー関数の展開

class MyArray extends Array {
  uniq() {
    return this.filter((v, i, self) => self.indexOf(v) === i);
  }
  
  average() {
    return this.reduce((pre, cur) => pre + cur, 0) / this.length;
  }
}

const myArray = new MyArray(1, 1, 2, 3);
console.log(myArray.uniq());
console.log(myArray.average());

// 결과
MyArray(3) [1, 2, 3]
1.75

console.log(myArray.filter(v => v % 2).uniq().average());