본문 바로가기

Web

Class

※ Class는 Hoisting이 되지 않는다.

1. 사용자 정의타입 생성 (ES5이전 Class 선언)

function Person() {}
Person.prototype.name = "yg1110";
Person.prototype.age = 27;

let kim = new Person();
let Joeng = new Person();

kim.name = "EHwoo";
console.log(kim.name); // EHwoo
console.log(Joeng.name); // yg1110
kim과 Joeng 자신이 변수를 가지고 있는게 아니라,
Person.prototype이라는 Object의 name이라는 속성을 공유하고 있습니다.
즉 객체의 수 만큼 변수가 저장되는 것이 아니라
하나의 prototype 이라는 Object를 메모리를 공유하고 있다는 뜻입니다.

 

2. Class 생성 (ES6이후 Class선언)

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  get name() {
    return this._name;
  }

  get age() {
    return this._age;
  }

  set name(newName) {
    this._name = newName;
  }

  set age(newAge) {
    this._age = newAge;
  }
}

let man = new Person("yg1110", 27); 
console.log(man); //Person { _name: 'yg1110', _age: 27 }
console.log(man.age); //27
console.log(man.name); //yg1110
constructor의 this.name과 this.age는
값을 추가할때는 set age(), set name(),
값을 조회할때는 get age(), get name()을
상황에 맞게 호출합니다.

 

3. static method

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    const dx = a.x - b.x;
    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); //undefined
console.log(p2.distance); //undefined
console.log(Point.distance(p1, p2)); //7.0710678118654755
static 메소드는 클래스의 인스턴스화 없이 호출되며,
클래스의 인스턴스에서는 호출할 수 없습니다.

 

4. 상속

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

Animal.prototype.speak = function() {
  console.log(this.name + " makes a noise.");
};

class Dog extends Animal {
  speak2() {
    console.log(this.name + " barks.");
  }
}

let a = new Animal("anna");
var d = new Dog("Mitzie");
d.speak(); //Mitzie makes a noise.
d.speak2(); //Mitzie barks.

 

'Web' 카테고리의 다른 글

Vanilla Javascript 라우터 구현  (0) 2021.09.27
Vanilla Javascript Component Core 구현  (0) 2021.09.26
WebPack을 이용한 Typescript 번들링  (0) 2021.08.09
prototype chain  (0) 2020.05.01
Javascript 배열함수  (0) 2020.04.28