객체지향, OPP, class, instance, prototype

오늘 배운건 솔직히 뭔말인지 이해가 ... 잘 안간다. 근데 뭐 여러번 보다보면 이해 되겠지.. 슥삭 넘기는게 이로울 거 같다. 다음에 보면 이해 될수도 있으니까!!..

👍객체 지향

객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다.

여기서 청사진은 class가 되고, 객체는 instance가 된다.

😄class 와 instance 생성법

class와 instance를 생성할 때 함수와는 다르게 생성한다.

보통 class 명은 대문자로 시작하여 일반명사로 만들고, object즉 instance는 new 키워드를 써서 만든다.

function Car(color) {} // Car라는 class 만들기

let avante = new Car('hyundae', 'avante', 'black') // Car라는 class안에 instance 넣기
let mini = new Car('bmw', 'mini', 'white')

class Car { //생성자 함수
	constructor(brand, name, car) //인스턴트가 만들어질 때 실행되는 코드
}    

각각의 instance는 class의 속성과 메서드를 갖게 된다.

객체 내부에 있는 값을 **속성(property)**라고 한다. 객체의 속성은 모든 자료형이 될 수 있다.

속성중 자료형이 함수인 경우에 이 속성은 특별히 **메소드(method)**라고 부른다.

🤦🏼‍♀️this

• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다.
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
• this는 자바스크립트 엔진에 의해 암묵적으로 생성된다.this는 코드 어디서든 참조할 수 있다.하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.
• 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다.함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다.
• 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.크게 전역에서 사용할 때와 함수안에서 사용할 때로 나눌 수 있다.

class Car{
	constructor(brand, name, color)
		this.brand = brand;
		this.name = name;
		this.color = color;
}

• 한 마디로 this는 인스턴트 객체를 의미한다. this에 할당한다는 것은 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미이다.

😈 ES5와 ES6의 클래스 작성문법

// ES5
function Car(brand, name, color) { //속성 넣기
	this.brand = brand;
	this.name = name;
	this.color = color;

	Car.prototype.refuel = function() { // 메소드 넣기
	}
	Car.prototype.drive = function() {
	}
}

// ES6
class Car {
	constructor(brand, name, color) {//속성 넣기
		this.brand = brand;
		this.name = name;
		this.color = color;
	}
	refuel() { // 메소드 넣기
	}
	drive() {
	}
}

• ES5는 prototype이라는 키워드를 사용해야 메서드를 정의할 수 있다.
• ES6는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의한다.

 

객체 지향 프로그래밍(Object-Oriented Programming) - OPP

객체 지향 프로그래밍이라는 패러다임이 등장하면서, 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과, 데이터의 처리 과정에 대한 모형을 만들어 내는 방식을 고안해냈다. 따라서, 데이터와 기능이 별개로 취급되지 않고, 한 번에 묶여서 처리할 수 있게 되었다.

• 객체 지향 프로그래밍이란 조립식 프로그래밍으로, 객체를 조립하여 프로그램을 만드는 방식이다.
• OOP는 프로그램의 관리, 재사용, 확장에 좋다.
• OOP는 데이터와 기능이 별개로 취급되지 않고 한곳에 묶어 처리한다.
• 자바스크립트 내장 타입인 object와 다르게, 클래스라는 이름으로 부른다.

캡슐화(Encapsulation)

데이터(속성)와 기능(메서드)을 따로 정의하는 것이 아닌, 하나의 객체 안에 넣어서 묶는 것입니다. 데이터(속성)와 기능(메서드)들이 느슨하게 결합되는 것이다.

느슨한 결합은 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미한다. 마우스 구동을 위한 코드 작성을 예로 들면, 스위치가 눌리고, 전기 신호가 생겨서, 전선을 타고 흐르고.. 와 같은 전 과정을 이곳저곳에 나누어 작성하는 것이 아니라, 마우스의 상태를 속성(property)으로 정하고 클릭, 이동을 메서드(method)로 정해서 코드만 보고도 인스턴스 객체의 기능을 상상할 수 있게 작성하는 것이 느슨한 결합을 추구하는 코드 작성법이다.

캡슐화라는 개념은 "은닉화"의 특징도 포함하고 있는데, 은닉화는 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만드는 것이다.

추상화(Abstraction)

추상화는 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념이다.

예를 들어 전화라는 객체가 있다면, 그 안에는 스피커와 마이크가 존재하고, 서킷 보드 등이 존재하는 등 내부 구현이 되어 있을 것이다.

이러한 추상화를 통해 인터페이스가 단순해진다. 너무 많은 기능들이 노출되지 않은 덕분에 예기치 못한 사용상의 변화가 일어나지 않도록 만들 수 있다.

추상화는 캡슐화와 비교해서 종종 헷갈려 하는 개념 중 하나이다.

캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는 클래스를 사용하는 사람이 필요하지 않은 메서드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있다.

상속(Inheritance)

상속은 부모 클래스의 특징을 자식 클래스가 물려받는 것이다.

부모/자식으로 이야기하기도 하지만, 보다 그 특징을 자세하게 설명하는 용어는 "기본 클래스(base class)의 특징을 파생 클래스(derived class)가 상속받는다"로 표현하는 것이 적합하다.

불필요한 코드를 줄여 재사용성을 높인다.

다형성(Polymorphism)

Polymorphism이라는 단어의 poly는 "많은", 그리고 morph는 "형태"라는 뜻을 가지고 있다. 즉 "다양한 형태"를 가질 수 있다라는 뜻이 된다.

"말하다"라는 동작의 본질은 "입으로 소리를 내다"를 의미한다. 그러나, 각기 다른 동물들이 "말할 때" 제각각의 소리를 내는 것처럼, 객체 역시 똑같은 메서드라 하더라도, 다른 방식으로 구현될 수 있다.

일한 메서드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해진다.

 

Prototype(프로토타입)

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language) 라 불린다.

— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object) 를 가진다는 의미다.

프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지다.

이를 **프로토타입 체인(prototype chain)**이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이다.

.proto

proto getter 함수는 객체의 내부 [[prototype]] 값을 노출한다.

객체 리터럴을 사용하여 생성된 객체의 경우 이 값은 Object.prototype이다.

배열 리터럴을 사용하여 생성된 객체의 경우 이 값은 Array.prototype이다.

함수의 경우 이 값은 Function.prototype이다.

__proto__의 사용은 논란의 여지가 있으며 권장하지 않는다.

클래스, 인스턴스, 프로토타입의 관계

클래스는 설계도라서 한번 만든 설계도는 도중에 바뀌는 일이 없다. class 블록 안에 내가 적은 코드는 프로그램이 시작되면 runtime에 바뀌는 일이 없고, 같은 설계도에서 찍어낸 인스턴스는 실행 중에 property나 methods 를 추가하지 않는 한 동일한 형태를 가진다.

반면 prototype 기반 언어는 객체가 곧 설계도가 된다. 객체는 runtime 중에 동적으로 속성추가가 가능하므로 동적인 설계도가 가능하다.

class 에서 상속은 부모 클래스와 자식 클래스간의 관계를 말한다.

prototype 에서의 상속은 prototype 객체와 그것을 상속하는 객체와의 관계를 말한다.