🦎 [딥다이브 스터디] 19. 프로토타입

1. 프로토타입?

js 는 프로토 타입 기반의 객체지향 력한 객체지향 프로그래밍 언어다.

2. 객체지향 프로그래밍?

Object는 크게 어떤 상태를 가지는 field (property)와 함수인 method 를 가진다. Class 는 이런 Object 를 생성할 수 있는 '틀'의 개념이다. class 의 instance 를 object 라고 한다.

2-1. SOLID 원칙

1. 단일 책임 원칙 (Single Responsiblity Principle)
   모든 클래스는 각각 하나의 책임만 가져야 한다. 클래스는 그 책임을 완전히 캡슐화해야 함을 말한다.

2. 개방-폐쇄 원칙 (Open Closed Principle)
   확장에는 열려있고 수정에는 닫혀있는. 기존의 코드를 변경하지 않으면서( Closed), 기능을 추가할 수 있도록(Open) 설계가 되어야 한다는 원칙을 말한다.

3. 리스코프 치환 원칙 (Liskov Substitution Principle)
   자식 클래스는 언제나 자신의 부모 클래스를 대체할 수 있다는 원칙이다. 즉 부모 클래스가 들어갈 자리에 자식 클래스를 넣어도 계획대로 잘 작동해야 한다. 자식클래스는 부모 클래스의 책임을 무시하거나 재정의하지 않고 확장만 수행하도록 해야 LSP를 만족한다.

4. 인터페이스 분리 원칙 (Interface Segregation Principle)
   한 클래스는 자신이 사용하지않는 인터페이스는 구현하지 말아야 한다. 하나의 일반적인 인터페이스보다 여러개의 구체적인 인터페이스가 낫다.

5. 의존 역전 원칙 (Dependency Inversion Principle)
   의존 관계를 맺을 때 변화하기 쉬운 것 또는 자주 변화하는 것보다는 변화하기 어려운 것, 거의 변화가 없는 것에 의존하라는 것이다. 한마디로 구체적인 클래스보다 인터페이스나 추상 클래스와 관계를 맺으라는 것이다.

2-2.절차지향 vs 객체지향

절차지향 => 함수가 여러군데 얽혀있기때문에, 하나를 이해하기 위해서 전체적인 동작방식을 모두 이해해야한다.함수 하나를 바꿨을때 예측하지 못한 사이드 이펙트 발생 가능성 있음. 유지보수와 확장성이 떨어진다.
객체지향 => 객체끼리 서로서로 소통하도록 함. 사람과 가까운 생각. 관련있는 오브젝트만 수정하면 되고, 여러번 반복되는건 재사용할 수 있다. 새로운 기능이 필요하면 확장해서 사용할 수 있다는 장점. 빠르게 유지보수가 가능함.

2-3.상속과 프로토타입

상속(inheritance)은 객체지향 프로그래밍의 핵심 개념으로, 부모 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있게하고 기능의 일부분을 변경해야 할 경우 상속받은 자식클래스에서 해당 기능만 다시 수정(정의)하여 사용할 수 있게 하는 것이다. 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다. prototype을 사용하지 않았을 때는 동일한 생성자 함수에 의해 생성된 모든 인스턴스가 동일한 메서드를 중복 소유하여 불필요하게 메모리를 낭비하는 상황이 발생하였는데, 이러한 중복은 prototype을 기반으로한 상속을 구현하면 해결할 수 있다.

const person = { name: 'Lee' };

//persone 객체는 __proto__ 프로퍼티를 소유하지 않는다.
console.log(person.hasOwnProperty('__proto__') //false

//모든 객체는 Object.prototype의 접근자 프로퍼티 __proto__를 상속받아 사용할 수 있다.
console.log({}.__proto__ === Object.prototype); //true

===========================< 문제 >=============================

1. __proto__ 접근자 프로퍼티를 통해 프로토타입에 접근해야하는 이유는?

프로토타입을 가리키는 [[Prototype]] 내부 슬롯에 접근할 수 있다. 이는 프로퍼티가 아니다. 따라서, 자바스크립트는 원칙적으로 내부 슬롯과 내부 메서드에 직접 접근하거나 호출하는 방법을 제공하지 않는다. 단, 간접적으로 내부 슬롯의 값, 즉 프로토 타입에 접근할 수 있다. 이는 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해서다. 프로토타입 체인은 단방향 링크드 리스트로 구현되어야한다. 즉, 프로퍼티 검색 방향이 한쪽 방향으로만 흘러가야한다. 아무런 체크없이 무조건적으로 프로토타입을 교체할 수 없도록, proto 접근자 프로퍼티를 통해 프로토타입에 접근하고 교체하도록 구현되어있다.

접근자 프로퍼티는 자체적으로 값[[value]] 프로퍼티를 갖지 않고, 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수, 즉 get,set 프로퍼티 어트리뷰트로 구성된 프로퍼티이다.

2. 아래 코드의 실행 결과를 말하고 왜 그런지 이유를 설명해보시오.

const Person = (function() {
  function Person(name){
    this.name = name;
  }
  
  Person.prototype = {
    sayHello() {
      console.log(`Hi! My name is ${this.name}`);
    }
  }
  return Person;
}());

const me = new Person('Lee');

me.sayHello = function() {
  console.log(`Hey! My name is ${this.name}`);
}
//이 과정에서 프로토타입 프로퍼티가 인스턴스 프로퍼티로 덮어씌는것이 아니라, 인스턴스 프로퍼티로 추가된다. 
//오버라이딩.(상속관계에 의해 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉 이라고 한다.  
//프로토타입 프로퍼티를 하위 객체를 통해 변경, 또는 삭제하는 것은 불가능하다. 
//get 액세스는 허용되나, set 액세스는 허용되지 않는다. 프로토타입에 직접 접근해야한다.

me.sayHello();  //Q1.출력값은?
'Hey! My name is Lee'

//인스턴스 메세지를 삭제한다. 
delete me.sayHello;
//프로토타입 메서드가 호출된다. 
me.sayHello(); //Q2.출력값은?
'Hi! My name is Lee'

//프로토타입 메서드가 삭제된다. 
delete me.sayHello;
me.sayHello(); //Q3.출력값은?
//type err => 

//delete Person.prototype.sayHello -> 이렇게 해야 지워짐! 
//me.prototype 은 인스턴스에서 접근 안됨! 

//Q4.이유는?

지영

3. 결과값은 무엇입니까? 그리고 왜?

function Circle(radius) {
  this.radius = radius;
}

Circle.prototype.getArea = function() {
  return Math.PI * this.radius ** 2;
}

const Circle1 = new Circle(1);
const Circle2 = new Circle(2);

console.log(circle1.getArea === circle2.getArea); //true

4. 프로토타입 메서드 sayHello를 직접 변경하고,삭제하려면 어떻게 할 수 있을까?

const Person = (function() {
  function Person(name){
    this.name = name;
  }
  
  //생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체
  //prototype에 객체 리터럴을 할당했다. 이는 프로토타입을 객체 리터럴로 교체한 것이다.
  Person.prototype = {
    sayHello() {
      console.log(`Hi! My name is ${this.name}`);
    }
  }
  return Person;
}());

const me = new Person('Lee');