자바스크립트의 OOP

프로그래밍 언어와 관련하여 개체라는 용어가 가장 눈에 띄게 등장한 것은 1980년대입니다. 그 이후로 객체 지향 프로그래밍은 소프트웨어를 만드는 가장 중요한 방법이 되었습니다. 가장 기본적인 수준의 개체 지향 프로그래밍은 응용 프로그램의 구성 요소로 개체를 사용하는 것입니다. 이번 주 블로그에서는 JavaScript와 그 구현이 지원하는 몇 가지 중요한 객체 지향 메커니즘을 살펴보겠습니다.

개체 정의

Javascript에서는 객체가 모든 무거운 작업을 수행합니다. 객체는 독립적입니다. 개발 중에 구현될 모든 관련 데이터 및 기능을 저장합니다. 개체에는 인스턴스를 설명하는 속성과 인스턴스에서 작업을 수행하는 메서드가 포함됩니다. 몇 가지 개체를 만들어 봅시다!

// Create an object using an object literal
const location = {
  // characteristics of the instance
  city: 'New Orleans',
  state: 'Louisiana',
  // methods of the object
  getLocation: ()=>{
    return (`Welcome to ${location.city}, ${location.state}!`)
  },
}

console.info(location.getLocation()); // Prints 'Welcome to New Orleans, Louisiana!'

// Create an object using an constructor
const Location = (city, state) => {
  // characteristics of the instance
  this.city = city;
  this.state = state;
}
const location1 = new Location('New Orleans', 'Louisiana');
const location2 = new Location('New York', 'New York');

console.info(`Welcome to ${location2.city}, ${location2.state}!`); // Prints 'Welcome to New York, New York!'

// Create an object using Object.create method
// initialize an object literal
const location = {
  greeting: function(){
    console.info(`Welcome to ${this.city}, ${this.state}!`)
  }
}
// assign the new instance to a variable
const vacaLocation = Object.create(location);
// add properiest to the new instance
vacaLocation.city = 'Sao Paulo';
vacaLocation.state = 'Brazil';

vacaLocation.greeting(); // Prints 'Welcome to Sao Paulo, Brazil!'

캡슐화

캡슐화는 해당 개체 내부에 있는 개체의 모든 기능을 지역화하는 것입니다. 생성자/프로토타입 패턴은 유형의 객체를 정의하는 가장 일반적인 방법입니다. 생성자 패턴은 객체의 속성을 정의하고 프로토타입 패턴은 메서드와 공유 속성을 정의합니다.

class Location {
  construction(city, state){
    // initialize the objects properties and methods
    this.city = city;
    this.state = state;
  }
  addDestination(destination){
    this.destination = destination;
  }
  getPlan(){
    console.info(`From ${this.city}, ${this.state} to ${this.destination}`)
  }
}

const trip1 = new Location('New Orleans', 'Louisiana');
trip1.addDestination('Bali, Indonesia');
trip1.getPlan(); // Prints 'From New Orleans, Louisiana to Bali, Indonesia'

추출

속성과 함수가 정의되는 방식을 간단히 변경하여 추상화를 구현할 수 있습니다. 추상화는 범위를 제한하거나 백그라운드에서 데이터를 숨기는 프로세스입니다.

// abstract the properties and method by setting them to a variable
function Location(city, state){
  let city = city;
  let state = state; 

  let privateLocation = function(){
    return (`Welcome to ${city}, ${state}!`);
  }
  // use the this keyword to give access to instances
  this.publicLocation = function(){
    return (`Welcome to ${city}, ${state}!`);
  }
}

const location1 = new Location('Seattle', 'Washington');
console.info(location1.privateLocation()); // Prints undefined
console.info(location1.publicLocation()); // Prints 'Welcome to Seattle, Washington!'

계승

클래스는 객체 인스턴스의 추상 템플릿 또는 부모입니다. Javascript는 인스턴스와 클래스가 구분되지 않는 특별히 프로토타입 지향적인 언어입니다. 일반적으로 클래스라고 하는 것은 JS에서 프로토타입 객체입니다. class 키워드는 클래스 기반 언어의 개발자를 위한 구문 설탕으로 간단히 추가되었습니다. 상속은 한 개체의 속성과 메서드를 다른 개체로 전달하는 프로세스입니다.

// Class model
class Location{
  constructor(city, state){
    this.city = city;
    this.state = state;
  }
  getLocation(){
    return (`Welcome to ${city}, ${state}!`);
  }
}

// Use the extends keyword to create an subclass of the Location class
class CityByCountry extends Location {
  constructor(city, state, country){
    // Prototype-based inheritance: call related method of the super class (Location)
    super(city, state);
    this.country = country;
  }
  getLocation(){
    return (`Welcome to ${city}, ${state} ${country}!`);
  }
}
const location1 = new CityByCountry('Denver', 'Colorado', 'USA');
console.info(location1.getLocation()); // Prints 'Welcome to Denver, Colorado USA!'

결론

JavaScript 개발자로서 프로토타입 상속을 이해하는 것뿐만 아니라 C++와 같은 클래스 지향 언어를 탐색하는 것도 중요합니다. 나중에 블로그에서 다룰 프로토타입 기반 언어와 클래스 기반 언어 사이에는 주요 차이점이 있습니다. 그동안 JavaScript의 객체 지향 프로그래밍에 대한 이해를 넓히려면 아래 크레딧을 참조하십시오. 즐거운 코딩하세요! 다음에 보자.

학점
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
https://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/