オブジェクト向けプログラミング

1.概念

2.特徴

1）パッケージ

const Cat = function(name) {
  this.name = name
}

const KKAKKA = new Cat('KKAKKA')
KKAKKA.name = 'GGAGGA'

console.log(KKAKKA)
// Cat {name: "GGAGGA"}
// KKAKKA의 이름이 GGAGGA로 바뀜

const Cat = function(name) {
  const a = name
  this.getName = function() {
    console.log(a)
  }
}

const KKAKKA = new Cat('KKAKKA')
KKAKKA.name = 'GGAGGA'

console.log(KKAKKA)
// Cat {name: "GGAGGA", getName: ƒ}

KKAKKA.getName()
// KKAKKA
// 외부에선 값을 얻을 수만 있고 바꿀 순 없음

class Cat {
  #name
  constructor(name) {
    this.#name = name
  }
}

const KKAKKA = new Cat('KKAKKA')
KKAKKA.#name = 'GGAGGA'
//에러 발생 : Private field '#name' must be declared in an enclosing class

（2）松結合に有利

2）抽象

3)継承

4）多形性（重合状態）

クラスを使用したモジュール化

1.対象

2.クラス

1) ES6

class Cat {
  // 생성자(constructor) 함수
  constructor(name, color, age) { // 속성
    this.name = name
    this.color = color
    this.age = age
  }
  sayHello() { // 메소드
    return `Hello, I'am ${this.name}`
  }
}

console.log(Cat.prototype)
// {constructor: ƒ, sayHello: ƒ}
// 	constructor: class Cat
// 	sayHello: ƒ sayHello()
// 	__proto__: Object

const KKAKKA = new Cat('KKAKKA', 'Black', 7)
console.log(KKAKKA)
// Cat {name: "KKAKKA", color: "Black", age: 7}
// 	age: 7
// 	color: "Black"
// 	name: "KKAKKA"
// 	__proto__:
// 	  constructor: class Cat
// 	  sayHello: ƒ sayHello()
// 	  __proto__: Object

for(key in KKAKKA) {
  console.log(key)
}
// name, color, age
// 메소드는 제외됨

2) ES5

// 생성자(constructor) 함수
function Cat(name, color, age) { // 속성
  this.name = name
  this.color = color
  this.age = age
  this.eat = function() {
    console.log('eating...')
  }
}

Cat.prototype.legs = 4
Cat.prototype.sayHello = function() { // 메소드
  return `Hello, I'am ${this.name}`
}

// 위의 코드는 아래처럼도 가능하지만 아래의 경우 constructor 명시 필요
// Cat.prototype = {
//   constructor : Cat,
//   legs = 4,
//   sayHello = function() { // 메소드
//   	return `Hello, i'am ${this.name}`
//   }
// }

console.log(Cat.prototype)
// {legs: 4, sayHello: ƒ, constructor: ƒ}
// 	legs: 4
// 	sayHello: ƒ ()
// 	constructor: ƒ Cat(name, color, age)
// 	__proto__: Object

const KKAKKA = new Cat('KKAKKA', 'Black', 7)
console.log(KKAKKA) 
// Cat {name: "KKAKKA", color: "Black", age: 7, eat: ƒ}
// 	age: 7
// 	color: "Black"
// 	eat: ƒ ()
// 	name: "KKAKKA"
// 	__proto__:
// 	  legs: 4
// 	  sayHello: ƒ ()
// 	  constructor: ƒ Cat(name, color, age)
// 	  __proto__: Object

3.例

let KKAKKA = new Cat('KKAKKA', 'Black', 7)

KKAKKA.color // Black
KKAKKA.age // 7
KKAKKA.sayHello() // Hello, i'am KKAKKA

Prototype

const Cat = {
  legs: 4,
  sleep() {
    console.log("slepping...")
  }
}

const KKAKKA = {
  name : "KKAKKA",
  color : "Black"
}

KKAKKA.__proto__ = Cat

console.log(KKAKKA.legs) //4
// KKAKKA 객체엔 legs가 없지만 __proto__로 Cat을 상속받음
// KKAKKA.legs : KKAKKA 객체에 legs가 없으므로  __proto__에서 legs를 찾음

for (key in KKAKKA) {
  console.log(key)
}
// name, color, legs, sleep
// 상속받은 key까지 모두 나옴
// .hasOwnProperty를 이용하면 for in 문에서도 상속된 property는 나오지 않게 할 수 있음

Object.keys(KKAKKA) // ["KKAKKA", "Black"]
Object.values(KKAKKA) // ["KKAKKA", "Black"]
// 상속된 property는 나오지 않음

const KKAKKA2 = {
  name : "KKAKKA2",
  color : "gray"
}

KKAKKA2.__proto__ = KKAKKA
console.log(KKAKKA2.legs) //4
// 상속은 계속됨
// legs가 KKAKKA2에 없어 KKAKKA로 올라가 찾고, 
// KKAKKA에도 없으면 Cat으로 올라가 찾음 = Prototype Chain

const KKAKKA = {
  name : "KKAKKA",
  color : "Black",
  legs : 5
}
console.log(KKAKKA.legs) //5
// KKAKKA.legs : KKAKKA 객체에 legs있으므로 KKAKKA 객체에서 legs를 찾음

1.クラスとプロトタイプ

Cat.prototype.constructor === Cat // true
Cat.prototype === KKAKKA.__proto__ // true
Cat.prototype.sayHello === KKAKKA.sayHello // true

2.プロトタイプチェーン

class Person {
  constructor(name) {
    this.name = name
  }
  sleep() { 
    console.log('sleeping...')
  }
}

const somin = new Person('somin')

class Student extends Person{
  constructor(name, age) {
    super(name)
    // super 키워드가 없으면 에러 발생
    // super를 통해 먼저 부모의 constructor를 실행해줘야 함
    // 이때 인자도 받아서 넘겨줘야 함
    this.age = age
  }
  sleep() { 
    super.sleep()
    // super 키워드가 없으면 자식 메소드로 덮어씌워져 'zzz...'만 나옴
    // super 키워드 사용 시 부모의 메소드 사용으로 'sleeping...'도 나옴
    console.log('zzz...')
  }
  learn() { 
    console.log('learning...')
  }
}

const park = new Student('park', 16) 

console.log(park)
// Student {name: "park", age: 16}
// 	age: 16
// 	name: "park"
// 	__proto__: Person
// 	  constructor: class Student
// 	  learn: ƒ learn()
// 	  sleep: ƒ sleep()
// 	  __proto__:
// 	    constructor: class Person
// 	    sleep: ƒ sleep()
// 	    __proto__: Object

park.name // 'Park'
park.learn() // 'learning...'
park.sleep() // 'sleeping...', 'zzz...'

park instanceof Student // true
park instanceof Person // true
park.__proto__ // Person

References