Javascript Class & Prototype

Jan 30, 2020

 javascript  ES6

들어가며

  • javascript es6 발표 후 class 와 Prototype 개념이 도입 되면서 java와 유사하게 변화되었습니다.
  • 이 말인 즉슨 oop 객체지향 적 코딩을 하도록 유도 되고 있습니다.
  • 해당 포스트는 mozilla 레퍼런스를 보고 작성 되었습니다. Link mozilla-class

class 선언

  • class 안에 소스는 모두 strict mode 입니다.
  • 선언 예시
class Rectangle {
    constructor(height, width) { // 생성자
        this.height = height;
        this.width = width;
    }
}

Hoisting

  • Link Hoisting
  • class를 선언하고 사용함에 있어 javascript hoisting 이 일어납니다.
  • 그러므로 아래 예시는 오류가 발생합니다.
const rect = new Rectangle(); // referenceError

class Rectangle {}

표현식

  • class 표현은 name 을 줄 수도 안 줄 수도 있습니다.
  • 이름을 가진 class는 body에 대해 local scope에 한해 유효합니다.
// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
//output : "Rectangle"


// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
//output: "Rectangle2"

생성자

  • class block {} 안에 하나에 constructor 메소드만 존재 가능합니다.
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

static method

  • 클래스에 정적 메소드를 정의하면 클래스의 인스턴스화 없이 호출 됩니다.
  • 클래스의 인스턴스에서는 호출할 수 없습니다.
  • 아래 소스에 주석으로 설명을 달아 놓았습니다.
  • 주로 유틸리티 함수를 생성하는데 사용합니다.
  • 아래 소스 중 Math.hypot 같은 함수가 static method
    • javascript 내장함수로 Math 클래스에 hypot 함수가 있습니다.
    • hypot 인수에 제곱 합계에 제곱근을 반환 합니다.
    • 아래 distance 함수는 a 인자와 b 인자에 거리를 반환하는 함수 입니다.
class Point {
    constructor(x, y) { // 생성자 x , y 값을 지정 합니다.
        this.x = x;
        this.y = y;
    }

    static distance(a, b) {   // 정적 메소드 ( static method )
        console.log(a); 
        console.log(b);
        const dx = a.x - b.x;  // 여기서 들어오는 (a,b) 에 a, b는 object 
        const dy = a.y - b.y;

        return Math.hypot(dx, dy);
    }
}

const p1 = new Point(5, 5);  // Point 클래스를 인스턴스화 값 : Point {x: 5, y: 5}
p1.x = 10;  // 이런 식으로 값을 바꾸기 가능
p1.y = 10;  
const p2 = new Point(10, 10);
p1.distance;  //undefined  -> static method 는 인스턴스에서 호출 할 수 없음.
p2.distance;  //undefined

typeof p1.distance; // undefined
typeof Point.distance; // function   이와 같이 사용 가능 하다.

console.log(Point.distance(p1, p2)); // 7.0710678118654755
  • 클래스 안에 distance 함수가 static 이 아니라면
class Point {
    constructor(x, y) { // 생성자 x , y 값을 지정 합니다.
        this.x = x;
        this.y = y;
    }

    distance(a, b) {  
        const dx = a.x - b.x;  // 여기서 들어오는 (a,b) 에 a, b는 object 
        const dy = a.y - b.y;

        return Math.hypot(dx, dy);
    }
}

const p1 = new Point(5,5);
const p2 = new Point(10,10);

console.log(p1.distance(p1,p2)); // distance 함수가 static 이 아니라면 이렇게 사용합니다.
console.log(p2.distance(p1,p2)); // 같은 동작 입니다.
 Toc
 Tags
 Related