Today I Learn 0319 [OOP]

@glassestae·2020년 3월 19일
0

TIL

목록 보기
4/9

An introduction to Object-Oriented Programming in JavaScript //이글을 참고하였습니다

프로그래밍 패러다임

프로그래밍 패러다임은 프로그래밍의 패러다임 형태이다.
예시로 축구에서,여러분은 안전한 수비로 경기할 수 있고,오로지 공격만을 할 수도 있다.
이러한 모든 전략에는 동일한 목표가 있다.

프로그래밍 패러다임도 마찬가지이다. 문제에 접근하고 해결하는 다양한 방법이 있고 이 방법들을 사용해 우리는 이러한 방법을 프로그래밍 패러다임이라 부른다.
그중에서도 객체지향 프로그래밍은 현대적인 프로그래밍 패러다임으로
java,c+,C# 그리고 지금은 JS도 객체지향의 모습으로 변해가고 있다.

객체 지향 프로그래밍

객체 지향 프로그래밍에서 프로그램은 서로 상호작용,통신하는 객체의 모임이다.
객체 지향은 기본적으로 실제 세계를 본따 만들었기 때문에 이해하기 쉬운 코드를 작성할 수 있다.

OOP Basic concepts

추상화 Abstraction

공통의 속성이나 기능을 묶어 이름을 임의로 지정해줄 수 있다.
내부의 불필요한 정보는 숨기고 중요한 기능만을 외부로 보여준다.
실제 내부는 복잡하지만 사용하는 입장에선 더 편하다.

캡슐화 Encapsulation

개별 변수들을 묶어 함수의 기능을 통해서만 안전하게 접근,사용할 수 있도록 연결한다.
변수들을 외부에서 접근하지 못하게하고,함수를 통해서만 접근하게 해야하는 것이 캡슐화이다.
이것을 변수,데이터를 숨겨준다는 의미에서 은닉화라고도 하는데
캡슐화를 하게되면 은닉화도 따라오게 된다.

상속 Inheritance

상속을 통해 부모의 속성이나 기능을 자식 클래스에 물려줄 수 있다.
새 자식 클래스를 만들때 하나하나 부모의 기능,속성을 입력할 필요없이 상속을 통해 입력할 수 있을뿐 아니라 상위 클래스의 변경사항을 하위 클래스에 전부 적용시킬 수 있기때문에 업데이트에 효율적이다.

다형성 Polymorphism

부모 클래스로 부터 상속받은 함수(메소드)를 통해 일일히 설정하지 않아도
자식클래스에서 오버라이딩,오버로딩 되어 맥락,상황에 맞는 값을 얻을 수 있다.

여기서 오버라이딩(overiding)은 같은 이름의 메소드가 클래스에서 다른 기능으로 재정의되는것
오버로딩(overloading)은 같은 이름의 메소드가 매개변수의 갯수나 타입에 따라서 다른기능으로 재정의 되는 것

Object 생성 방법

Functional

let Car = function(position){
  let someInstance = {};
  someInstance.position = 0;
  someInstance.move = function (){
    this.position += 1;
  }
  return someInstance;
};

let car1 = Car();
let car2 = Car();
car1.move
let car3 = Car(5);

Functional Shared

let extend = fucntion (to,from){
  for(let key in from){
    to[key] = from[key];
  }
};

let someMethods = {};
someMethods.move = function(){
  this.position += 1;
};

let Car = function (position){
  let someInstance = {
    postion: position,
  };
  extend(someInstance, someMethods);
  return someInstance;
};

let car1 = Car(5);
let car2 = Car(10);

Prototypal

let someMethods = {};
someMethods.move = function(){
  this.position += 1;
};

let Car = function(position){
  let someInstance = Object.create(someMethods);
  someInstance.position = position;
  return someInstance;
};

let car1 = Car(5);
let car2 = Car(10);

pseudoclassical

let Car = function(position){
  this.position = position;
};

Car.prototype.move = function(){
  this.postion += 1; 
}

let car1 = new Car(5);
let car2 = new Car(10);

Prototype

자바스크립트는 객체지향언어지만, 보통의 객체지향언어처럼 클래스기반 언어가 아니다.ES6 부터 class가 등장했지만 그렇다고해서 클래스기반 언어가 된것은 아니다.
자바스크립트는 기본적으로 프로토타입 기반 언어이다.
프로토타입을 통해 클래스의 상속 기능을 흉내낼 수 있다.

function Pesron(){
  this.eye = 2;
  this.nose = 1;
};

let kwon = new Person();

console.log(kwon) //{eye:2, nose:1}

kwon은 부모 클래스인 Person에서 상속받아 기본적으로 eye, nose 2개의 변수를 가지고 태어난다.지금이야 자식이 하나뿐이지만 100개가 되면 200개의 변수가 생겨 메모리를 차지할 것이다.
이런 문제의 해결책으로 프로토타입을 쓸 수 있다.

function Person (){};

Person.prototype.eye =2
Person.prototype.nose =1

let kwon = new Person();
console.log(kwon) //{}
console.log(kwon.eye) //2

Person.prototype 이라는 객체가 어딘가에 존재하고 Person함수로 생성한
자식 클래스들은 이 객체의 값을 가져와 사용할 수 있게된다.
즉 어딘가의 공간에 정보를 넣어놓고 자식클래스끼리 공유해서 사용하는 것이다.

function Animal (){};

let dog = new Animal();
Animal.prototype.isCute = true;

console.log (dog.isCute) // true;

이렇게 이미 만들어진 자식클래스 dog도 Animal 함수의 프로토타입의 변수를 변경하면 적용이 된다.

function Animal (){};

let cat = new Animal();
let dog = new Animal();

Animal.prototype.nose = 0;
console.log(cat) // {}

cat.nose = 1;
console.log(cat) //{nose:1};

Animal.prototype.nose = 2;
console.log(dog.nose) //2
console.log(cat.nose) // 1;

하지만 이렇게 이미 자식클래스 개별의 변수를 바꾼후에는
자식 클래스내에 변수가 직접 들어가고 부모클래스의 프로토타입을 바꿔도
상속이 되지 않는다.

해당 블로그를 참고하였습니다.

profile
프론트엔드 디벨로퍼 지망 :D

0개의 댓글