객체지향은 객체 자체가 자체 데이터에서 작동하고 데이터를 다른 객체에서 허용되는 것들만 받아서 쓰거나 원하는 데이터들만
전달하는 방식이다
주로 시작점인 시작 클래스(메인클래스)를 통해 다른 클래스(객체)들을 이용하면서 프로그래밍 된다
프로그래밍에서 추상화의 시작
독립된 단위인 추상화 된 객체들을 만들고 이 객체들을 레고블러과 같이 조립을 해서 프로그래밍을 하는 방식으로,
생활에 존재하는 사물들을 객체로 만들어서 객체들의 상태와 동작을 구현하고 이를 동작시킴으로써 실 생활을 컴퓨터 적으로 해석하면서 프로그래밍을 할 수 있는 패러다임을 가져다주었다
그래서 추상화란?
어떤 한 물체를 그 자체로 나타내는 것이 아니라 특정 개념이자 상위 개념으로 추출하는 것을 뜻한다
충상화의 동사는 추출하다이다. 말 그대로 특징, 개념만을 추출한것으로 받아들이면 된다 구체적이지 않고, 희미하게 표현한 것
프로그래밍에서 추상화 한 대상은 마찬가지로 구체적이지 않고 추상이라는 단어의 의미에 맞게 추출 할 수 있는 것들을 추출해서 표현한다
객체지향에서 추상화 하는 대상은 객체로, 객체에서 추출할 수 있는 속성과 동작을 추출한다
예를 들면 객체 : 사람 / 속성 : 이름, 이메일, 주소, 전화번호 / 동작 : 확인하기, 이메일보내고, 전화하기
이 동작을 주로 함수로 나타내는데 이런 객체들의 동작을 담당하는 함수들을 메서드라고 한다.
객체에는 데이터의 상태를 나타내는 속성과 동작을 나타내는 메서드 두가지로 이뤄진다
클래스는 객체를 추상화 한 것
사람이란 객체에서 추출된 속성과 동작만이 기술된 형태를 클래스라고한다 그리고 이 객체가 추상회된 클래스는 상속이 가능하다
객체지향의 장점 중 4가지는 캡슐화, 추상화, 상속, 다향성이 있다
캡슐화란?
클래스 내에 정의된 속성과 메서드들은 코드상에서 한 클래스 내에 묶여서 작성 및 보관할 수 있으며, 내부에 어떻게 정의 되어있는지 모르더라도 사용법만 알면 클래스로 생성되는 객체들을 사용할 수 있게 된다
이렇게 속성과 메서드들은 한 공간에 묶어두고, 내부가 어떻게 이루어져있고, 어떻게 동작하는지에 대해 몰라도 프로그래밍을 할 수 있게하는 기법을 캡슐화라고 한다 또한 클래스 내에서 사용되는 변수나 메소드 등을 원하는대로 감출 수 있기 때문에 이를 통해 정보은닉도 할 수 있다
추상화란?
클래스를 통해 객체의 속성과 행위와 관련 메커니즘만을 표시하여 불필요한 코드를 생성하지 않을 수 있고 이는 유지보스를 하는데 큰 이점을 가져다준다
상속?
객체 간의 관계 및 하위 클래스를 만들어 사우이 클래스에 해당하는 공통 논리를 재사용할 수 있다.
다향성?
상속 구조를 통해 발현되는 특징으로 객체지향은 이 다향성을 통해 어떠한 속성과 메서드가 상황에 따라 다르게 동작하게 할 수 있다
상위 클래스로 하위클래스의 객체들을 받아서 공토이된 메서드 명을 통해 각각 다르게 동작하는 하위클래스 객체의 동작을 시킬 수 있다
단점은??????
프로그램의 볼륨이 커진다
상속을 통해 재사용이 되기도 하지만 불필요한 부분들가지 상속으로 전체적인 불륨의 크기가 증가한다
자식객체에게 본인이 가지고 있는 추상회의 논리를 그대로 계승해주는 것이기에 자식 객체는 부모 객체의 모든 것을 상속받는다
객체는 기본적으로 참족밧을 통해 접근이 가능하다 이로인해 예상치 못한 일이 발생 할 수 있다
그래서 얕은 복사로 일어나는 문제가 발생한다
프로토타입의 동작방식에서 가장 기본적인 원칙은 우리가 가진 객체에서 Property을 읽을 때 만약 해당 Property가 없다면
자동으로 현재 객체의 prototype에서 해당 propery를 찾는다
프로토타입 객체는 생성된 객체들과 공유되는 것을 알 수 있다
각 객체마다 개별적으로 있어야 하고 변동사항이 생길 것 같은 속성은 생성자함수로,
모든 객체에서 같은 값으로 공유해야하는 속성은 프로토타입 객체의 속성으로 설정하면 된다
생성자 함수 : 필드속성, 초기화
프로토타입 : 메서드
prototype은 함수에 자동적으로 생성되고 new키워드와 연계해서 인스턴스의 __proto__로 만들어진다(인스턴스의 프로토타입)
__proto__는 단순히 객체의 프로토타입객체 [[Prototype]]을 나타낸다
function BootCamp(location, teacher) {
this.location = location
this.teacher = teacher
}
BootCamp.prototype.teach = function() {
console.log(`${this.teacher} teachs in ${this.location}`)
}
BootCamp.prototype.isGood = function() {
console.log("I don't know")
}
//부모생성
function VanillaCoding(course, ...rest) {
//1.부모생성자함수에 현재 인스턴스 바인딩 시켜서 확장
console.log(rest);
BootCamp.apply(this, rest)
this.course = course
}
//자식 프로토타입에 부모 프로토타입 체이닝
VanillaCoding.prototype = Object.create(BootCamp.prototype)
VanillaCoding.prototype.constructor = VanillaCoding
//2번 이후로 프로토타입 메서드 할당 자신 것 만약 없다면
//부모타임 prototype.isGood을 찾는다
VanillaCoding.prototype.isGood = function() {
console.log("yes, vanilla coding is good")
}
const prep = new VanillaCoding("prep 11기", "samsung", "ken") //samsung, ken은 rest부분
prep.teach(); // 프로토타입체인을 부모 teach 사용
prep.isGood(); //자식 프로토타입 isGood사용
Prototype은 객체지향 프로그래밍을 하기 위한 방법이고, Prototype기반의 객체지향 프로그래밍은 상속을 복제의 과정을 통해
구현할 수 있다고 했다 이런 것들로 객체지향 프로그래밍을 하고자하는 이유는?
1. 코드의 재사용성
2. 유지보수의 용이성
3. 기능 확장에 유리(상속)
function Rectangle(width, height) {
this.width = width;
this.height = height;
}
Rectangle.prototype.getArea = function() {
return this.width * this.height;
}
Rectangle.prototype.printinformation = function() {
console.log(this.width, this.height);
}
const rectangle1 = new Rectangle(1, 2);
const rectangle2 = new Rectangle(2, 3);
rectangle1.printinformation()
rectangle2.printinformation()
위와 같이 객체지향의 생성자함수를 만들어주니 rectangle을 생성시 쉽게 재생성할 수 있다. 이 부분이 재사용성이다
유지보수의용이성
만약 수정을 해야한다면 메서드에서 직접 수정시 일괄적용 시킬 수 있다
기능확장에 유리(상속)
function Rectangle(width, height) {
this.width = width;
this.height = height;
}
Rectangle.prototype.getArea = function() {
return this.width * this.height;
}
Rectangle.prototype.printinformation = function() {
console.log("width " + this.width, "height " +this.height);
}
function Square(length) {
Rectangle.call(this, length, length)
//call을 바인딩해서
}
Square.prototype = Object.create(Rectangle.prototype);
Square.prototype.constructor = Square;
Square.prototype.printinformation = function() {
console.log(`this is square, length ${this.width}`);
//width인 이유는 위에서 Rectangle.call(this, length, length)
//를 바인딩 하는데 width에 바인딩을 시킨 것
}
const rect = new Rectangle(30, 30);
const square = new Square(100);
rect.getArea();
square.getArea();
rect.printinformation();
square.printinformation();
클래스 기반언어와의 차이
Prototype 기반의 객체지향언어는 객체원형을 도중에 바꿀 수 있다
Prototype으로 설정된 객체는 공유될 뿐 재생성되지 않는다
객체원형을 도중에 바꿀 수 있다
const proto1 = {
proto_name : 'proto1',
}
const proto2 = {
proto_name : 'proto2',
extend : `is extended`,
}
function Human(name) {
this.name = name;
}
Human.prototype = proto1;
Human.prototype.constructor = Human;
const Hong = new Human("Go");
console.log(Hong.proto_name);
console.log(Hong.extend);
Human.prototype = proto2;
Human.prototype.constructor = Human;
const Ann = new Human("john");
console.log(Ann.proto_name);
console.log(Ann.extend);
이처럼 실행되는 중에 객체원형인 Prototype을 변경할 수 있다
Prototype기반 객체지향에서 [[Prototype]]은 한번 생성되면 계속해서 공유되는 객체일 뿐 인스턴스가
생성 될 대마다 새로 생성되거나 그러지 않는다
클래스 문법
class Animal {
constructor(name, age) {
this._name = name;
this._age = age;
}
get name() { //set에 value로 값이 바뀌고 뱉어진다
return this._name;
}
set name(value) { //값을 받는다
this._name = value
}
print(){
console.log(`${this.name}`);
}
}
const animal = new Animal();
animal.name = 'nunu' // 세터를 이용
animal.print();
참고사이트
하옹의 자바스크립트 식사 - Object Oriented Programming(OOP)
* 이 글은 Vanilla Coding - BootCamp 9기 1주차 강의 수강 후 적은 글입니다. 객체지향 프로그래밍이란? 객체지향 프로그래밍 (OOP: Object Oriented Programming…
ha-young.github.io
'Frontend' 카테고리의 다른 글
0.1 + 0.2 !== 0.3 (0) | 2021.12.19 |
---|---|
인터넷 주소창에 URL을 입력한 순간부터 우리에게 웹페이지가 보이기까지 어떤 일들이 발생하는가...? (0) | 2021.11.28 |
사이드작업 / 웹페이지 따라 만들기 (0) | 2021.08.18 |
HTML과 CSS 복습 및 기초다지기 (0) | 2021.07.25 |
30일 챌린지 1일차 (0) | 2021.07.01 |