ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 Chapter 30 Inheritance, Polymorphism and Code Reuse
    Computer Science/JavaScript 2019.08.02 22:18

    출처: https://github.com/leonardomso/33-js-concepts#30-inheritance-polymorphism-and-code-reuse

     

    자바스크립트 핵심 컨셉 33가지

     

    Chapter 30 Inheritance, Polymorphism and Code Reuse

     

    상속, 다형성 그리고 코드 재사용에 대하여 알아보겠습니다. 자바스크립트는 프로토타입 기반 언어입니다.
    그래서 다른 언어와 다르게 상속을 프로토타입으로 구현하는데 이 부분이 중요한지 지속적으로 다루고 있습니다.

     

    2019/05/06 - [Computer Science/JavaScript] - 자바스크립트 Chapter 14 Factories and Classes

     

    자바스크립트 Chapter 14 Factories and Classes

    자바스크립트 핵심 컨셉 33가지 Chapter 14 Factories and Classes 이번 장에서는 Factories와 Classes를 살펴보자. 자바스크립트에서 팩토리 함수란, 함수가 객체를 반환할 때를 의미한다. 간단한 팩토리 함수의..

    jeongw00.tistory.com

    2019/05/11 - [Computer Science/JavaScript] - 자바스크립트 Chapter 17 Prototype Inheritance and Prototype Chain

     

    자바스크립트 Chapter 17 Prototype Inheritance and Prototype Chain

    모든 자바스크립트 개발자가 알아야 할 개념 33가지 Chapter 17. Prototype Inheritance and Prototype Chain 자바스크립트 프로토타입(prototype)에 대한 내용은 여러 번 다뤘는데 프로토타입 기반 언어이므로..

    jeongw00.tistory.com

     

    상속을 이해하기 위해서 다시 한번 프로토타입에 대해 알아보겠습니다. 자바스크립트에서 모든 객체는 프로토타입 객체(prototype object)를 가집니다. 그래서 프로토타입 객체에 이미 내장되어 있는 메서드들을 사용할 수 있습니다. 예를 들면, push(), pop(), valueOf()... 수많은 메서드들을 은연중에 이미 사용해왔습니다.

    function Person(name, age) {
      this.name = name;
      this.age = age;
    }
    
    Person.prototype.greeting = function () {
      return "Hello"
    }
    
    const jeongwoo = new Person('JeongWoo', 24)
    const minji = new Person('MinJi', 21)
    
    jeongwoo.valueOf() // Person {name: "JeongWoo", age: 24}
    
    console.log(jeongwoo.greeting()) // Hello
    console.log(minji.greeting()); // Hello

    프로토타입 객체에 담아둔 메서드나 속성을 프로토타입 체인을 통해 상속을 하여 서로 공유하므로 valueOf() 메서드 사용이 가능합니다. 여기서 이 링크 역할을 하는 것이 __proto__ property(속성)입니다. 현재 위의 코드는 jeongwoo -> Person -> Object 로 프로토타입 체인이 동작합니다.

    아래는 프로토타입 체인 구조를 이해하기 쉽게 표현한 그림입니다.

    출처: Medium 자바스크립트 프로토타입 이해하기

    Person()을 Student()에게 프로토타입 기반으로 상속하기

    function Person(name, age) {
      this.name = name;
      this.age = age;
    }
    
    Person.prototype.greeting = function () {
      return "Hello"
    }
    
    const jeongwoo = new Person('JeongWoo', 24)
    const minji = new Person('MinJi', 21)
    
    // Person 상속
    function Student(name, age, location) {
      Person.call(this, name, age);
    
      this.location = location;
    }
    
    // Person 메서드 상속
    Student.prototype = Object.create(Person.prototype); // 지정된 프로토타입 객체 및 속성을 갖는 새 객체 생성
    // Student.prototype에 Person.prototype을 상속받은 객체를 할당했으므로
    Student.prototype.constructor = Student; // [Function: Student]
    
    const sara = new Student('Sara', 23, 'Seoul')
    console.log(sara.name) // Sara
    console.log(sara.age) // 23
    console.log(sara.location) // Seoul
    console.log(sara.greeting()) // Hello

    ES2015 프로토타입 기반의 문법적 설탕 클래스로 표현하기

    class Person {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
      greeting() {
        return 'Hello'
      }
    }
    
    const jeongwoo = new Person('JeongWoo', 24)
    
    jeongwoo.valueOf() // Person { name: 'JeongWoo', age: 24 }
    console.log(jeongwoo.greeting()) // Hello

    ES2015 프로토타입 기반의 문법적 설탕 클래스로 상속하기

    class Person {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
      greeting() {
        return 'Hello'
      }
    }
    
    const jeongwoo = new Person('JeongWoo', 24)
    
    class Student extends Person {
      constructor(name, age, location) {
        super(name, age);
        this.location = location;
      }
    }
    
    const sara = new Student('Sara', 21, 'Seoul')
    
    sara.valueOf(); // Student { name: 'Sara', age: 21, location: 'Seoul' }
    sara.greeting(); // Hello

    만약 sara의 지역이 바뀐다고 가정한다면, 현재 값을 반환하는 getter, 해당하는 값을 변경하는 setter을 사용합니다.

    class Person {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
      greeting() {
        return 'Hello'
      }
    }
    
    const jeongwoo = new Person('JeongWoo', 24)
    
    class Student extends Person {
      constructor(name, age, location) {
        super(name, age);
        this._location = location; // 멤버 변수에 _를 붙여 getter/setter 구분
      }
    
      get location() {
        return this._location;
      }
      set location(newLocation) {
        this._location = newLocation;
      }
    }
    
    const sara = new Student('Sara', 21, 'Seoul')
    
    console.log(sara.location) // Seoul
    
    sara._location = 'Busan';
    
    console.log(sara._location) // Busan
    
    sara.greeting() // Hello

    Chapter 30의 자바스크립트의 상속을 구현해보았고, 그 다음 자바스크립트 다형성은 위의 코드처럼 다른 객체(다양한 형태)에서 같은 메소드(단일 액션)를 호출함을 의미하며, 함수형 혹은 클래스 기반으로 작성하다 보면 코드를 재사용할 수 있습니다.

    댓글 0