객체 지향 프로그래밍은 현실에 기반한 개체나 기능들을 추상화를 통해 모델링하는 패러다임이다.
서로 연관된 '변수'와 '함수'를 객체로 그룹핑하고 이름을 붙인 것 이라 볼 수 있는데
각 객체는 별도의 역활이나 책임을 갖는 독립적 기계라고 할 수 있다.
많이 알고있는 언어들 (JAVA, JavaScript, C++, C#, Python, PHP, Ruby, Object-C)은
객체지향 프로그래밍을 지원하고있다.
객체지향 프로그래밍은 보다 유연하고 유지보수성이 높은 프로그래밍을 하도록 되어있고,
대규모 소프트웨어 개발에서 많이 사용 된다.
자바스크립트는 타 다른 언어와 좀 다른 점이 있는데 바로 프로토타입 기반
의 언어라는 점 이다.
자바나 파이썬 등의 언어들은 클래스 기반
언어이다.
객체지향 이라는 틀은 같으나 세부적으로는 다른점이 있다.
객체지향 하면 떠오르는 키워드
붕어빵 틀
, 템플릿
, 생성자 함수
붕어빵
, 인스턴스
정보은닉
그룹핑
다중상속불가
Prototype(원형)은 자바스크립트의 표기법이고, 이 프로토타입을 이용하여 객제가 생성이 된다.
모든 객체는 프로토타입 객체에 대한 내부 참조를 하고, 프로퍼티를 상속 받는다.
모든 함수는 함수 정의시 자동 생성되고, 초기화되는 프로퍼티를 가지고있으며,
추가 하는 프로퍼티는 초기화된 객체 프로퍼티(생성자)로 나타나게 된다.
예를 들어 java, c++ 등의 언어에서는 ‘크로아상 이라 불리는 새로운 객체를 제빵이라는 클래스를 이용하여 생성한다’ 라는 것이 자바스크립트의 프로토타입 객체지향 언어에서는 ‘제빵이라는 객체를 재사용하여 이것을 하나의 프로토타입으로 기본값으로 두고 크로아상 이라 불리는 새로운 객체를 생성 한다.’ 라는 느낌으로 살짝 바뀌어 보이는 것이다.
자바스크립트가 프로토타입을 사용함으로 얻는 이점은
let Car = function(){
let instance = {};
instance.position = 0; // 매개변수 추가하여 0이 아닌 매개변수로 넣을수 있음
instance.move = function () {
this.position += 1;
}
return instance;
}
let Car1 = Car(); // 매개변수가 생기면 초기값 넣을수 있음
Car1.move();
Car1.move();
console.log(Car1) // {position: 2, move: ƒ}
let extend = function(to, from) {
for(let key in from) {
to[key] = from[key];
}
}
let methods = {};
methods.move = function (){
this.position += 1;
}
let Car = function(position) {
let instance = {
position: position,
};
extend(instance, methods);
return instance;
}
let car1 = Car(5)
car1.move()
car1.move()
console.log(car1) // {position: 7, move: ƒ}
⚝ 1번 방법은 각 인스턴스마다 메소드가 할당되는 방식이고,
2번 방식은 각 인스턴스가 사용할 메소드의 메모리 주소만 참조하는 방식이라 메모리 효율이 좋아짐
let methods = {};
methods.move = function(){
this.position += 1;
}
let Car = function(position) {
//Object.create : 특정 객체를 프로토타입인 객체로 만들어줌
let instance = Object.create(methods);
instance.position = position;
return instance;
}
let car1 = Car(5);
car1.move()
car1.move()
console.log(car1) // {position: 7}
let Car = function(position) {
this.position = position;
}
Car.prototype.move = function(){
this.position += 1;
}
//new를 꼭 붙여야 한다.
let car1 = new Car(5);