[JavaScript] 객체지향 프로그래밍

메서드 호출

• 메서드호출 : 객체.메서드()
• 메서드란 객체 안에 정의된 함수
• 메서드 호출을 이용할때는 화살표 함수를 못씀
• 단순객체 사용

let ageCounter1 = {
  age: 20,
  increase: function() {
    this.age++;
  },
  decrease: function() {
    this.age--;  
  },
  getAge: function(){
    return this.age;  
  }
}

ageCounter1.increase();
ageCounter1.getAge(); // 21

ageCounter1 하나밖에 못씀, 재사용성 떨어짐

• 클로저 모듈패턴

 function makeAgeCounter() {
  let age = 20;
  return {
    increase: function() {
      age++;
    },
    decrease: function() {
      age--;
    },
    getAge: function() {
      return age;
    }
  }
}

let ageCounter1 = makeAgeCounter();
ageCounter1.decrease();
ageCounter1.getAge(); // 19

let ageCounter2 = makeAgeCounter();
ageCounter2.increase();
ageCounter2.increase();
ageCounter2.getAge() // 22

함수 표현으로 리턴에 객체표현, 재사용가능

객체지향 프로그래밍

• 하나의 모델이 되는 청사진(붕어빵틀) 을 만들고 청사진 바탕으로 한 객체를 만드는 프로그래밍 패턴
• 청사진을 앞으로 class, 청사진을 바탕으로 한객체는 instance object , 줄여서 인스턴스로 부르겠다.
• 클래스는 함수로 정의할수 있음

function Car(brand,name,color){
 // 인스턴스가 만들어질때 실행되는 코드
}

class Car {
	constructor(brand,name,color){
     //인스턴스가 만들어질때 실행되는 코드, 최근에 자주씀
    }
}

• new 키워드로 인스턴스 만듬
  let avante = new Car('bmw', 'mini, 'white')
• this 는 이 인스턴스 객체를 의미함, 해당 인스턴스에 부여하겠다는 의미

class Car{
	constructor(brand, name, color){ //생성자
    	this.brand = brand(매개변수);
        this.name = name;
        this.color = color;
    }
}

메서드 정의

• ES5은 prototype 키워드로 메서드 정의할 수 있음

function Car(brand, name, color){ 
	this.brand = brand;
}
Car.prototype.refuel = function() {
	console.log(this.brand + '가 운전을 시작합니다');
}
let avante = new Car('hyundai');
avante.drive(); // 현대가 운전을 시작합니다.

• ES6은 class안에 묶어서 정의함

class Car{
	constructor(brand, name, color){ //생성자
    	this.brand = brand(매개변수);
    }
    drive() {
    }
}
let avante = new Car('hyundai');
avante.brand; // hyundai
avante.drive();

• 사실 우리는 array의 인스턴스를 써오고 있었음, arr.length, arr.push('course') 사용법 같다

객체지향 프로그래밍(OOP)

• 이전에 C등은 절차지향 프로그래밍이었음. 순차적 명령의 조합, 함수로이동하는게 전부였음

• OOP의 모든건 객체로 그룹화됨

• 화면에 보이는 하나의 요소를 객체단위로 생각하면, 보다 쉬운 코드를 작성할수있게됨

• 객체지향 잘 이해, 응용하는게 중요함. 4가지 기본적인 개념이 있음

1. 캡슐화 : 데이터와 기능을 하나의 객체안에서 결합
2. 상속 : 부모클래스 특징을 자식클래스가 물려받음
3. 추상화 : 내부는 복잡한데 겉은 단순하게 만든다는 개념
4. 다형성 : 같은 메서드라도 조금씩 다르게 작동함

객체지향 차이점

• JavaScript는 private이라는 키워드가 없지만 ES2019부터 #이라는 키워드가 도입되었습니다.
  Java나 TypeScript는 클래스 내부에서만 쓰이는 속성 및 메서드를 구분시키기 위해 private이라는 키워드를 제공합니다.
• JavaScript에는 interface 키워드는 없습니다.
  Java나 TypeScript는 interface를 구현해 놓았으며 이 인터페이스가 일종의 규약처럼 간주되어, 클래스를 구현하는 사람들이 이에 맞게 작성할 수 있게 돕습니다.

프로토타입

• Js는 프로토타입 기반 언어임. 프로토타입은 원형객체를 의미함.
• 모든 객체들이 메소드와 속성을 상속받기 위한 템플릿으로써 프로토타입 객체를 가짐.
• 그 프로토타입 객체도 상위 프로토타입객체에게 상속받으룻 있음. 이를 프로토타입 체인이라 부르며, 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간임.
• Js는 객체 인스턴스와 프로토타입간에 연결의 __proto__속성으로 객체 인스턴스에 구현하고있음

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

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let kimcoding = new Human('김코딩', 30);

// 실습해보세요
Human.prototype.constructor === Human; 
Human.prototype === kimcoding.__proto__; 
Human.prototype.sleep === kimcoding.sleep;  //다 true 나옴

• 클래스, 인스턴스, 프로토타입의 관계 (외울것)