※ 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 |