객체지향 프로그래밍 - 실세계에 존재하고 인지하고 있는 객체(Object)를 소프트웨어의 세계에서 표현하기 위해 객체의 핵심적인 개념 또는 기능만을 추출하는 추상화를 통해 모델링하려는 프로그래밍 패러다임
우리가 주변의 실세계에서 사물을 인지하는 방식을 프로그래밍에 접목하려는 사상
함수들의 집합 혹은 단순한 컴퓨터의 명령어들의 목록이라는 전통적인 절차지향 프로그래밍과는 다른, 관계성있는 객체들의 집합이라는 관점으로 접근하는 소프트웨어 디자인

클래스 기반 언어 - 클래스로 객체의 자료구조와 기능을 정의하고 생성자를 통해 인스턴스를 생성

자바스크립트는 클래스 개념이 없고 별도의 객체 생성 방법이 존재

// 1. 객체 리터럴
var obj1 = {};
obj1.name = 'Lee';

// 2. Object() 생성자 함수
var obj2 = new Object();
obj2.name = 'Lee';

// 3. 생성자 함수
function F() {}
var obj3 = new F();
obj3.name = 'Lee';

각각의 인스턴스에 메소드 setName, getName이 중복되어 생성되는 것을 프로토타입을 이용하여 방지

function Person(name) {
  this.name = name;
}

// 프로토타입 객체에 메소드 정의
Person.prototype.setName = function (name) {
  this.name = name;
};

// 프로토타입 객체에 메소드 정의
Person.prototype.getName = function () {
  return this.name;
};

var me  = new Person('Lee');
var you = new Person('Kim');
var him = new Person('choi');

console.log(Person.prototype);
// Person { setName: [Function], getName: [Function] }

console.log(me);  // Person { name: 'Lee' }
console.log(you); // Person { name: 'Kim' }
console.log(him); // Person { name: 'choi' }

상속 - 새롭게 정의할 클래스가 기존에 있는 클래스와 매우 유사하다면, 상속을 통해 다른 점만 구현
코드 재사용의 관점에서 매우 유용
자바스크립트는 기본적으로 프로토타입을 통해 상속을 구현=프로토타입을 통해 객체가 다른 객체로 직접 상속된다는 의미

자바스크립트 상속 구현
1. 의사 클래스 패턴 상속 (클래스 기반 언어의 상속 방식을 흉내 내는 것)
자식 생성자 함수의 prototype 프로퍼티를 부모 생성자 함수의 인스턴스로 교체하여 상속을 구현하는 방법
부모와 자식 모두 생성자 함수를 정의

  1. 프로토타입 패턴 상속 (프로토타입으로 상속을 구현하는 것)

캡슐화(정보 은닉) - 관련있는 멤버 변수와 메소드를 클래스와 같은 하나의 틀 안에 담고 외부에 공개될 필요가 없는 정보는 숨기는 것

자바스크립트의 객체는 아래와 같이 크게 3가지 - 네이티브 객체, 호스트 객체, 사용자 정의 객체

네이티브 객체 - ECMAScript 명세에 정의된 객체를 말하며 애플리케이션 전역의 공통 기능을 제공
네이티브 객체는 애플리케이션의 환경과 관계없이 언제나 사용 가능
Object, String, Number, Function, Array, RegExp, Date, Math와 같은 객체 생성에 관계가 있는 함수 객체와 메소드로 구성

객체를 생성할 경우 특수한 상황이 아니라면 객체리터럴 방식을 사용하는 것이 일반적

var o = {};
var x = new Boolean(false);
if (x) { // x는 객체로서 존재한다. 따라서 참으로 간주된다.
  // . . . 이 코드는 실행된다.
}

호스트 객체 - 브라우저 환경에서 제공하는 window, XmlHttpRequest, HTMLElement 등의 DOM 노드 객체와 같이 호스트 환경에 정의된 객체
예를 들어 브라우저에서 동작하는 환경과 브라우저 외부에서 동작하는 환경의 자바스크립트(Node.js)는 다른 호스트 객체를 사용할 수 있음
브라우저에서 동작하는 환경의 호스트 객체는 전역 객체인 window, BOM(Browser Object Model)과 DOM(Document Object Model) 및 XMLHttpRequest 객체 등을 제공

전역 객체 - 모든 객체의 유일한 최상위 객체를 의미하며 일반적으로 Browser-side에서는 window, Server-side(Node.js)에서는 global 객체를 의미

BOM - 브라우저 객체 모델은 브라우저 탭 또는 브라우저 창의 모델을 생성
최상위 객체는 window 객체로 현재 브라우저 창 또는 탭을 표현하는 객체
이 객체의 자식 객체들은 브라우저의 다른 기능들을 표현
이 객체들은 Standard Built-in Objects가 구성된 후에 구성

DOM - 문서 객체 모델은 현재 웹페이지의 모델을 생성
최상위 객체는 document 객체로 전체 문서를 표현
이 객체의 자식 객체들은 문서의 다른 요소들을 표현
이 객체들은 Standard Built-in Objects가 구성된 후에 구성

profile
Front-end Developer 💻🔜

0개의 댓글