5. JS basic (class - Getter && Setters, field, Static, Inheritance, Class checking)

1. class

속성(Field) + 행동(Method)로 구성

• template
• declare once
• no data in

class person {
let name; // 속성(Field)
let age; // 속성(Field)
speak(); // 행동(Method)
}

- class declarations

class person {
	// constructor
	constructor(name, age) {
  	// fields
    	this.name = name;
    	this.age = age;
  }
	// method
	speak() {
  	console.log(`${this.name}: hello!`);
  } 
}
const lee = new Person('lee', 26);
console.log(lee); // {name: lee, age: 26}
lee.speak(); // lee: hello!

- Getter && Setters

텍스트

ex) 사람의 나이가 -1로 입력 될 경우 setter 통해 재설정 해줄 수 있도록 사용 할 수 있다
get을 활용해 값을 return
set을이용해 값을 설정

class User {
	// constructor
	constructor(firstName, lastName,  age) {
    	this.firstName = firstName;
    	this.lastName = lastName;
    	this.age = age;
  	}
	// getter, user.age을 실행할 때 실행되는 코드
	get age() {
  		return this.age
  	}
	// setter, user.age = value를 실행할 때 실행되는 코드
	set age(value) {
  		this.age = value
  	}
}
const user = ner User('lee', 'changmok',-1);
console.log(user.age);

주의 사항

• get age()를 정의하는 순간 'this.age'는 메모리에 있는 데이터를 읽어오는 것이 아닌 getter를 호출
• set age()를 정의하는 순간 equal sign assign을 호출할 때('= age') 즉 값을 할당할 때 바로 메모리에 값을 할당하는 것이 아닌 setter를 호출
• 즉 set age()에서 전달된 value를 this.age에 할당 할 때 setter를 호출(무한 반복) -> error발생

  set age(value) {
      this.age = value
  }

해결방법

• 변수의 이름을 변경해준다

  	get age() {
    		return this._age
    	}
  	set age(value) {
    		this._age = value
    	}

class User {
	// constructor
	constructor(firstName, lastName,  age) {
    	this.firstName = firstName;
    	this.lastName = lastName;
    	this.age = age;
  	}
	// getter, user.age을 실행할 때 실행되는 코드
	get age() {
  		return this._age
  	}
	// setter, user.age = value를 실행할 때 실행되는 코드
	set age(value) {
  		this._age = value < 0 ? 0 : value;
  	}
}
const user = ner User('lee', 'changmok',-1);
console.log(user.age);

• field는 firstName, lasrName, _age 3개로 구성
• field는 '_age' 이지만 'user.age' 로 값을 호출 , 할당 할 수 있는 이유는 내부적으로 getter, setter를 활용하기 때문

- field(public & private)

최근 추가됨

class Experiment {
	publicField = 2;
	#privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField); // 2
console.log(experiment.privateField); // undefined

- Static properties and methods

최근 추가됨

• object에 상관없이 클래스가 가진 고유의 값을 설정하고 싶을 때 사용
• 공통적 요소를 사용 할 때 static을 활용해 메모리 낭비를 줄일 수 있음

class Article {
	static publisher = 'lee';
	constructor(articleNunber) {
  	this.articleNumber = articleNunber;
  }

	static printPublisher() {
  	console.log(Article.publisher);
  }
}
const article1 =new Article(1);
const article2 =new Article(2);
console.log(article1.publisher); // undefined
console.log(Article.publisher); // 'lee'
Article.printPublisher(); // 'lee'

- Inheritance(상속)

• a way for one class to extend another class

class Shape {
  constructor(width, height, color) {
      this.width = width;
      this.height = height;
      this.color = color;
  }

  draw() {
      console.log(`drawing ${this.color} colo r of`);
  }

  getArea() {
      return this.width * this.height;
  }
}
class Rectangle extends Shape { }
class Triangle extends Shape {
  super.draw(); // drawing red color of
  // override  
  draw() {
      console.log(`tri`);
  }
  // override
  getArea() {
      return (this.width * this.height) / 2;
  }
}
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); // drawing blue color of
console.log(rectangle.getArea()); // 400
//
const triangle = new Triangle(20, 20, 'red');
triangle.draw(); // tri
console.log(triangle.getArea()); // 200
							

- Class checking: instanceOf

모든 객체는 object 객체를 상속한다

class Triangle extends Shape {
    // override  
    toString(){
        return `Triangle: color: ${this.color}`;
    }
    super.draw(); // drawing red color of
    // override  
    draw() {
        console.log(`tri`);
    }
    // override
    getArea() {
        return (this.width * this.height) / 2;
    }
}
console.log(rectangle instanceof Rectangle); // true
console.log(triangle instanceof Rectangle); // false
console.log(triangle instanceof Triangle); // true
console.log(triangle instanceof Shape); // true
console.log(triangle instanceof Object);// true
console.log(triangle.toString()); // Triangle: color: red

- JS의 object들

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference