JavaScript의 OOP 초보자 가이드

객체 지향 프로그래밍(OOP)?

객체 지향 프로그래밍은 특성으로 알려진 데이터와 메서드로 알려진 코드를 포함하는 프로그래밍 언어의 "객체"를 기반으로 하는 일종의 패러다임입니다.

철학

객체 지향 프로그래밍은 다음 4가지 원칙을 기반으로 합니다.

추상화

개체는 다른 개체의 사용과 관련된 내부 메커니즘만 드러내고 불필요한 구현 코드는 숨깁니다.

캡슐화

개체의 일부 속성 또는 메서드가 해당 범위 외부에서 액세스하는 것을 방지합니다. 이러한 캡슐화된 속성 또는 메서드를 해당 범위 밖에서 변경하는 것을 방지합니다.

상속

청사진 개체에서 메서드를 상속합니다. 원래 정의된 청사진 개체에서 메서드를 재사용할 수 있다는 특징이 있습니다.

다형성

다형성은 객체 지향 프로그래밍의 중요한 기능 중 하나로 간주됩니다. 다형성을 통해 단일 작업을 다양한 방식으로 수행할 수 있습니다. 즉, 다형성을 통해 하나의 인터페이스를 정의하고 여러 구현을 가질 수 있습니다. 폴리(poly)는 많다는 뜻이고 모프(morphs)는 형태를 의미하므로 많은 형태를 의미합니다.

JavaScript에서 OOP 구현

Javascript는 OOP 기반 프로그래밍 언어이므로 일반적인 OOP 언어와 동일한 철학을 따르지만 구현 방식이 약간 다릅니다.

상속과 프로토타입 체인

프로토타입은 JavaScript 객체가 서로 기능을 상속하는 메커니즘입니다. 상속과 관련하여 JavaScript에는 개체라는 하나의 구조만 있습니다. 각 개체에는 해당 프로토타입이라는 다른 개체에 대한 링크를 보유하는 전용 속성이 있습니다. 그 프로토타입 객체는 자신의 프로토타입을 가지고 있으며, null이 프로토타입인 객체에 도달할 때까지 계속됩니다. 정의에 따르면 null에는 프로토타입이 없으며 이 프로토타입 체인의 최종 링크 역할을 합니다.

JavaScript의 거의 모든 객체는 프로토타입이 null인 Object의 인스턴스입니다.

OOP 프로그래밍 언어의 핵심은 객체입니다. 그럼 토론해 봅시다.

물체

개체는 속성과 메서드를 포함하는 고유한 엔터티입니다. 예를 들어 "자동차"는 색상, 유형, 모델 및 마력과 같은 몇 가지 특성이 있고 운전과 같은 특정 작업을 수행하는 실제 개체입니다.

JavaScript에서는 다음과 같은 방법으로 JavaScript에서 OOP를 구현할 수 있습니다.

시공함수법

Object.create 메서드

ES6 클래스 방식

하나씩 논의합시다.

구성 함수 메서드

JavaScript에서는 생성자 함수에서 여러 개체를 만들 수 있습니다. 생성자 함수에서 객체를 생성하려면 new 키워드를 사용합니다.

const Person = function (firstName, birthYear) {
  this.firstName = firstName;
  this.birthYear = birthYear;  
}
//here person is a construction function
//for creating construction function, function declaration or function expression is used. Arrow can not be used because it doesn't have "this" keyword

Person.prototype.calcAge = function() {
  return console.log(`Age: ${2020 - this.birthYear}`);
}
//using the prototype object, a new method is created to person function, which can be used for all the instances

const Student = function (firstName, birthYear, course) {
  this.firstName = firstName;
  this.birthYear = birthYear;
  this.course = course;
};
Student.prototype = Object.create(Person.prototype);
//Student extends to Person

Student.prototype.greet = function () {
  return console.log(`Hi, I am ${this.firstName} and I study ${this.course}.`);
};


const ram = new Student('Ram', 2000, 'computer science'); //new instance 'ram' is created

ram.calcAge() // 20
ram.greet() //Hi, I am Ram and I study computer science.
console.log(ram instanceof Student) //true
console.log(ram instanceof Person) //true

다음은 생성된 프로토타입 체인입니다.

램 -> 학생 -> 사람 -> 객체
__proto__ 속성을 사용하여 확인할 수 있습니다.

console.log(ram.__proto__ === Student.prototype) //true
console.log(ram.__proto__.__proto__ === Person.prototype) //true
console.log(ram.__proto__.__proto__.__proto__ === Object.prototype) //true

Object.create 메서드

Object.create() 메서드는 기존 개체를 새로 만든 개체의 프로토타입으로 사용하여 새 개체를 만듭니다.

const Person = {
  init(firstName, birthYear) {
    this.firstName = firstName;
    this.birthYear = birthYear
  },
  calcAge() {
    return console.log(`Age: ${2020 - this.birthYear}`);
  }
}

const Student = Object.create(Person)

Student.init = function(firstName, birthYear, course) {
  this.firstName = firstName;
  this.birthYear = birthYear;
  this.course = course
}

Student.greet = function() {
  return console.log(`Hi, I am ${this.firstName} and I study ${this.course}.`);
}

const ram = Object.create(Student)
ram.init('Ram', 2000, 'Computer Science')

ram.calcAge() //Age: 20
ram.greet() //Hi, I am Ram and I study computer science.

ES6 클래스 방식

클래스는 개체를 만들기 위한 템플릿입니다. 데이터를 코드로 캡슐화하여 해당 데이터에 대해 작업합니다. JS의 클래스는 프로토타입을 기반으로 합니다.

class Person {
  constructor(fullName, birthYear) {
    this.fullName = fullName;
    this.birthYear = birthYear;
  }

  calcAge() {
    return console.log(`Age: ${2020 - this.birthYear}`);
  } 
}

class Student extends Person {
  constructor(fullName, birthYear, course) {
    super(fullName, birthYear);
    this.course = course;
  }

  greet() {
    console.log(`Hi there, I am ${this.fullName} and I study ${this.course}.`);
  }
}

const ram = new Student('Ram', 2000, 'Computer Science')

ram.greet() //Hi there, I am Ram and I study Computer Science.
ram.calcAge() //Age: 20

정적 메서드 및 속성

static 키워드는 클래스의 정적 메서드 또는 속성을 정의합니다. 정적 메서드나 정적 속성은 클래스의 인스턴스에서 호출할 수 없습니다. 대신 클래스 자체에서 호출됩니다.

class Person {
  constructor(fullName, birthYear) {
    this.fullName = fullName;
    this.birthYear = birthYear;
  }
  static property = 'some value';

  calcAge() {
    console.log(`Age: ${2020 - this.birthYear}`);
  } 

  static method() {
    console.log('this is a static method')
  }
}

const ram = new Person('Ram', 2000)

console.log(ram.property) //throws an error
console.log(ram.calcAge()) //Age: 20
console.log(ram.method()) //throws an error

개인 수업 기능

클래스 필드는 기본적으로 공용이지만 비공개 클래스 멤버는 해시# 접두사를 사용하여 만들 수 있습니다. 이러한 클래스 기능의 개인 정보 보호 캡슐화는 JavaScript 자체에 의해 시행됩니다.

class Person {
  constructor(fullName, birthYear) {
    this.fullName = fullName;
    this.birthYear = birthYear;
  }
  #property = 'some value';

  calcAge() {
    console.log(`Age: ${2020 - this.birthYear}`);
    console.log(this.#property)
  } 
}

const ram = new Person('Ram', 2000)

console.log(ram.#property) //throws an error
//Error: Private field '#property' must be declared in an enclosing class

ram.calcAge()
//Age: 20
//some value

이 블로그는 JavaScript의 OOP에 대한 간략한 소개에 관한 것입니다. 이 항목에 대한 자세한 내용은 MDN Web Docs을 참조하십시오.