2019. 05. 31 이머시브 수업5일차(Instantiation, extends/super)

1. 인스턴스를 만드는 네가지 방법

● 인스턴스를 만드는것을 인스턴스화(Instantiation)라고 한다 

● javascript에 class가  나오기전에 사용하던 4가지 class선언방식

● class는 하나의 정형화된 모델을 두고, 그 모델을 기반으로 한 인스턴스(복제품)를 만들기 위해 사용한다.

*인스턴스를 만들기 전에 우선 프로토타입 이해가 필요하다

 

- Functional Instantiation : 객체를 만들어서 반환하는 함수를 사용

function likeFruit (name, color) {
    var fruit = {};

    fruit.name = name;
    fruit.color = color;
    fruit.describe = function () {
        console.log(this.name + ' is ' + this.color);
    }
    
    return fruit;
}

var apple = likeFruit('apple', 'red');
var banana = likeFruit('banana', 'yellow');
apple.describe(); // "apple is red"
banana.describe(); // "banana is yellow"

- Functional shared Instantiation : 위와 동일하나, 메소드는 외부객체에 만들고 그 주소를 반환되는 객체에 할당

*메모리효율이 위에것보다 좋음

function extend (to, from) {
    for (var key in from) {
        to[key] = from[key];
    }
}

var methods = {};

methods.describe = function () {
    console.log(this.name + ' is ' + this.color);
}

function likeFruit (name, color) {
    var fruit = {};

    fruit.name = name;
    fruit.stadium = stadium;
    extend(fruit, methods);

    return fruit;
}

var apple = likeFruit('apple', 'red');
var banana = likeFruit('banana', 'yellow');
apple.describe(); // "apple is red"
banana.describe(); // "banana is yellow"

메모리 효율

- Prototypal Instantiation : Object.create()를 사용 (프로토타입을 사용하지않음)

var methods = {};
methods.describe = function () {
    console.log(this.name + ' is ' + this.color);
}

function likeFood (name, color) {
    var food = Object.create(methods);

    food.name = name;
    foode.color = color;

    return food;
}

var apple = likeFood('apple', 'red');
var banana = likeFood('banana', 'yellow');
apple.describe(); // "apple is red"
banana.describe(); // "banana is yellow"

- Pseudoclassical Instantiation : 프로토타입과 new키워드를 사용 (가장 자주 사용되는 방법)

function likeFood (name, color) {
    this.name = name;
    this.color = color;
}

likeFood.prototype.describe = function () {
    console.log(this.name + ' is ' + this.color);
}

var apple = new likeFood('apple', 'red');
var banana = new likeFood('banana', 'yellow');
apple.describe(); // "apple is red"
banana.describe(); // "banana is yellow"

 

2. class, constructor(부모 클래스) //class extends super(자식 클래스)

- 클래스 상속은 코드 재사용 관점에서 매우 유용하다. 새롭게 정의할 클래스가 기존에 있는 클래스와 매우 유사하다면, 상속을 통해 그대로 사용하되 다른 점만 구현하면 된다. 코드 재사용은 개발 비용을 현저히 줄일 수 있는 잠재력이 있으므로 매우 중요하다.

- extends 키워드는 부모 클래스를 상속받는 자식 클래스를 정의할 때 사용한다. 부모 클래스 Circle을 상속받는 자식 클래스 Cylinder를 정의해 보자.

// 부모 클래스
class Circle {
  constructor(radius) {
    this.radius = radius; // 반지름
  }

  // 원의 지름
  getDiameter() {
    return 2 * this.radius;
  }

  // 원의 둘레
  getPerimeter() {
    return 2 * Math.PI * this.radius;
  }

  // 원의 넓이
  getArea() {
    return Math.PI * Math.pow(this.radius, 2);
  }
}

// 자식 클래스
class Cylinder extends Circle {
  constructor(radius, height) {
    super(radius);
    this.height = height;
  }

  // 원통의 넓이: 부모 클래스의 getArea 메소드를 오버라이딩하였다.
  getArea() {
    // (원통의 높이 * 원의 둘레) + (2 * 원의 넓이)
    return (this.height * super.getPerimeter()) + (2 * super.getArea());
  }

  // 원통의 부피
  getVolume() {
    return super.getArea() * this.height;
  }
}

// 반지름이 2, 높이가 10인 원통
const cylinder = new Cylinder(2, 10);

// 원의 지름
console.log(cylinder.getDiameter());  // 4
// 원의 둘레
console.log(cylinder.getPerimeter()); // 12.566370614359172
// 원통의 넓이
console.log(cylinder.getArea());      // 150.79644737231007
// 원통의 부피
console.log(cylinder.getVolume());    // 125.66370614359172

// cylinder는 Cylinder 클래스의 인스턴스이다.
console.log(cylinder instanceof Cylinder); // true
// cylinder는 Circle 클래스의 인스턴스이다.
console.log(cylinder instanceof Circle);   // true
}

 

 

---

참고자료 : https://feynubrick.github.io/2019/02/24/javascript-study-instantiation.html : 인스턴스화 4가지 방법

참고자료 : https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67 : 프로토타입 이해

참고자료 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/super : extends super

참고자료 : https://poiemaweb.com/es6-class : extends super