JavaScript 기초 - 객체 지향 프로그래밍(OPP)

🌈 객체 지향 프로그래밍(OPP)

🔥 class 정의

🔥 상속

🔥 오버라이딩

🔥 Property 추가

2. class 정의

• class 정의 방법 : 🔍 class 클래스명 {}
• 생성자 정의 방법 : 🔍 constructor(){}
• class 안의 함수를 메서드라 부르고, 정의할 때는 "function"을 적지 않음

class User1{
  constructor(){
    this.name = 'Jaewon';
    this.age = 30;
  }
  get_message(){
    return 'Hello!';
  }
}
const jaewon = new User1();
console.log(typeof jaewon) // object
console.log(jaewon.name, jaewon.age) // Jaewon 30
console.log(jaewon.get_message()) // Hello!

class User1{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  get_message(){
    return 'Hello!' + this.name;
  }
}
const info = new User1('jaewon', 20);
console.log(typeof info) // object
console.log(info.name, info.age) // Jaewon 20
console.log(info.get_message()) // Hello!jaewon

2. 상속

• JavaScript 에서는 extends를 이용해서 상속할 클래스를 선언함
• 자식 클래스에서의 constructor() 안에서 super()를 호출함으로써 부모 클래스의 속성을 상속 받음

// 부모 class
class Orizin{
  constructor(name){
    this.name = name;
  }
}
// 자식 class
class User extends Orizin{
  constructor(name, address){
    super(name);
    this.address = address;
  }
}
const jaewon = new User('jaewon', 'seoul')
const haezin = new User('haezin', 'busan')
console.log(jaewon.name, jaewon.address) // jaewon seoul
console.log(haezin.name, haezin.address) // haezin busan

3. 오버라이딩

• 부모 클래스에 있는 속성 및 메서드를 자식 클래스에서 새로운 정의로 덮어써 사용하는 것이 상속
• python 과 유사함(단, python은 매서드명이 같아도 인자의 갯수가 다르면 다른 매서드로 보지만, javascript에서는 인자의 갯수와 상관없이 오버라이딩 됨)

// 부모 class
class Orizin{
  constructor(name){
    this.name = name;
  }
  get_message(){
    return 'Hello!'
  }
}
// 자식 class
class User extends Orizin{
  constructor(name, address){
    super(name);
    this.address = address;
  }
  get_message(){
    return 'I am child'
  }
}
const jaewon = new User('jaewon', 'seoul')
const haezin = new User('haezin', 'busan')
console.log(jaewon.name, jaewon.address) // jaewon seoul
console.log(haezin.name, haezin.address) // haezin busan
console.log(jaewon.get_message()) // I am child
console.log(haezin.get_message()) // I am child

4. Property 추가 및 확인

• "prototype" 메서드를 이용하여 class 속성을 추가 가능
• class 속성 추가 방법 : 🔍 클래스명.prototype.속성 = 값;
• class의 속성이 본래 calss가 갖고 있던 속성인지, 외부에서 추가(prototype을 통해)시킨 속성인지 확인할 수 있음
• 이를 확인하기 위해서는 hasOwnproperty 매서드 이용

class Info{
  constructor(name){
    this.name = name;
  }
  get_message(){
    return 'Hello!';
  }
}
const user_jaewon = new Info('jaewon')
console.log(user_jaewon.name) // jaewon
Info.prototype.age = 10;
Info.prototype.hobby = 'coding';
const user_haeazn = new Info('haezin');
console.log(user_haeazn.name) // haezin
console.log(user_haeazn.age) // 10
console.log(user_haeazn.hobby) // coding
console.log(user_haeazn.hasOwnProperty('name')) // true
console.log(user_haeazn.hasOwnProperty('age')) //false
console.log(user_haeazn.hasOwnProperty('hobby')) //false