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

[공부 내용 정리]

파이썬과의 객체지향 프로그래밍 비교! - 출처 : 노마드 코더

 

객체지향 프로그래밍이란?

프로그램을 작성할 때 객체들을 만들어 서로 소통하도록 하는 방법.

• 객체 지향의 객체 : 우리가 표현하고자 하는 구체적인 사물을 추상적으로 표현한 것.
• 추상화란? : 필요한 최소한의 정보로 대상을 표현하는 것을 의미함.

만약 나를 추상적인 객체로 표현한다면?

const me = {
    name : '이현진',
    address : '제주도 제주귤 돌하르방로',
    phoneNum : '010-0000-0000',
    canWalk : function(){
        console.log('현진이가 걷는다.');
    }
}

• 또한 객체는 행동과 상태를 가짐. 행동 : 메소드, 상태 : 프로퍼티

ex1) (me)객체에 새로운 능력(teaching)을 부여함.

const me = {
    name : '이현진',
    address : '제주도 제주귤 돌하르방로',
    phoneNum : '010-0000-0000',
    canWalk : function (){
        console.log('현진이가 걷는다.');
    },
    teaching : function (student){
        student.levelUp();
    }
}

 

ex2) 새로운 (ormi)객체를 만듦.

const ormi = {
    level : 1,
    levelUp : function (){
        this.level ++;
    }
}

 

ex3) me 객체와 ormi 객체간의 상호작용.

me.teaching(ormi);

 

이렇게 객체와 객체가 서로 메소드를 통해 상호작용하게 하는 것이 객체지향 프로그래밍.

-> 좀 더 효율적인 방법으로 하려면? -> 생성자 

 

생성자 (constructor)

생성자란 객체를 만들 때 new 연산자와 함께 사용하는 함수임.

let myArr = new Array(1, 2, 3);

-> 이러한 생성자를 내장 생성자라고 함.

-> 생성자를 통해 생성된 객체는 같은 프로퍼티와 메서드를 공유할 수 있음!

 

커스텀 생성자 만들어보기

생성자는 함수이기 때문에 기본적으로 함수 필요. 암묵적으로 대문자로 시작하는 이름을 가짐.

function Factory(){}

그리고 new 키워드를 통해 객체를 생성함.

function Factory(){}

let robot1 = new Factory();

Factory 생성자는 따로 return 값을 가지지 않지만 new가 앞에 붙게되면 실행되었을 때 자동적으로 객체를 생성하고 반환함. 이렇게 반환되어 만들어진 객체를 인스턴스 라고 함.

생성자 함수와 객체의 관계는 instanceof로 확인 할 수 있음!

 

ex1) 생성자를 사용해서 객체 만들어보기

function NewFactory(name){
    this.name = name;
    this.sayYourName = function (){
        console.log(`안녕하세요! 제 이름은 ${this.name}입니다.`);
    }
}

-> 생성자 안에서의 this는 생성자 안의 인스턴스를 가리킴.

-> 원래 함수안에서의 this는 함수를 호출한 객체를 참조하지만, 생성자 함수 앞에 new 연산자가 사용되면 함수안의 this는 생성자가 만들어낸 객체 즉, 인스턴스를 참조함.

 

이제 robot1의 이름을 지어주고 실행함.

let robot1 = new NewFactory('이현진');

실행 결과

 

따라서 우리가 필요에 따라 배열(Array), 객체(Object)를 사용하는 것 처럼, 우리가 필요할 때마다 사용할 수 있는 우리만의 객체를 만들어서 사용할 수 있도록 도와주는 것이 바로 생성자임.

 

프로토타입(prototype)

우리는 손쉽게 객체를 선언할 순 있지만, 객체의 메서드를 등록 할 때마다 새로운 함수를 생성해야함.

-> 이러한 자원의 낭비를 해결하기 위해 등장한 것이 바로 프로토타입

 

function NewFactory2(name){
    this.name = name;
    NewFactory2.prototype.sayYourName = function (){
        console.log(`안녕하세요! 프로토타입으로 코드를 짜봤어요. 제 이름은 ${this.name}입니다.`);
    }
}

let robot2 = new NewFactory2('이이현현진진');
let robot3 = new NewFactory2('감자감자');

실행 결과 -> 자원의 효율적인 사용 가능!

객체의 상속

자바스크립트의 상속은 기본적으로 prototype을 통해 일어남.

const obj = {
  name: 'test'
}

console.log(obj.hasOwnProperty('name'));

const arr = [1,2,3];

console.log(arr.hasOwnProperty('name')); 

-> 이 코드에서 배열 인스턴스에 hasOwnProperty를 실행하면, hasOwnProperty를 가지고 있는 객체까지 연결해서 올라감. 따라서 배열도 property 메서드를 사용할 수 있는 이유는, 이 배열의 생성자가 object 함수의 property 를 참조하고 있기 때문임. 이렇게 배열은 배열에 존재하지 않는 객체의 프로퍼티와 메서드를 사용할 수 있게 됨.

 

프로토타입 체이닝 : 자기 자신에게 존재하지 않는 프로퍼티나 메서드를 프로토타입을 통해 추적하는 과정.

console.log(Array.prototype.__proto__ === Object.prototype);
console.log(Number.prototype.__proto__ === Object.prototype);
console.log(String.prototype.__proto__ === Object.prototype);
console.log(Math.__proto__ === Object.prototype);

-> 자바스크립트의 타입들은 기본적으로 Object 타입을 상속받고 있음.

정리하자면 모든 생성자는 Object의 prototype과 연결이 되어있다!

Class

클래스란 객체를 생산하는 생산 도면 혹은 청사진. 클래스는 붕어빵의 틀이다.

class의 사용법

class Robot {
	constructor(name) {
    	this.name = name;
    }
    // 메소드 정의
    sayYourName() {
    	console.log("제 이름은 ${this.name}입니다.");
    }
}

* 인캡슐레이션 : OOP의 개념 중 하나로, 데이터와 해당 데이터를 조작하는 메서드를 하나의 단위로 묶는 것.

 

class 상속받기

클래스의 상속 : extends 키워드 사용.

상속을 받는 클래스는 파생 클래스(derived classes)라고 부름. 이때 부모 클래스의 프로퍼티를 상속받기 위해 super 함수를 사용함. 이때 super는 부모 생성자를 참조함.

 

super 사용시 주의할 점

- 파생 클래스에 생성자 함수를 사용하고 싶다면 반드시 super 함수 사용.

- 파생클래스에 생성자 함수가 없다면 super 함수가 자동으로 호출되어 부모 클래스의 프로퍼티를 상속 받게 함.

- 생성자 함수에서 this 값을 사용할 경우 super 함수는 반드시 this 보다 먼저 실행되어야 함.

- 파생 클래스가 아닌 클래스에서 사용하려고 하면 에러 발생.

class BabyRobot extends Robot {
    constructor(name) {
        super(name);
        this.ownName = '아이크';
    }

    sayBabyName() {
        this.sayYourName();
        console.log('Suceeding you, Father!');
    }
}