[JS] Object in JavaScript (2019.11.14)

Junyong-Ahn·2019년 11월 14일
0

JavaScript

목록 보기
2/5

OOP(Object Oriented Programming, 객체 지향 프로그래밍)란?

객체지향 프로그래밍이란 컴퓨터 프로그램을 명령어의 집합으로 보는 시각에서 벗어나, 여러개의 독립된 단위인 ‘객체' 들의 모임으로 보는 하나의 프로그래밍 패러다임이다.

객체지향과 비교되는 패러다임으로 절차지향(Procedural) 프로그래밍이 있다. 절차지향 프로그래밍은 말 그대로 작성된 코드를 순서대로 처리해 나간다. 반면에 객체지향 프로그래밍은 순차적으로 코드가 실행된다기 보다는 각각의 객체들이 서로를 호출해가며 하나의 프로그램이 완성된다.

절차지향 프로그래밍 언어에는 대표적으로 C 언어가 있고, 객체지향 프로그래밍 언어에는 Javascript를 포함하여 Java, C++, Python, Swift등이 속한다.

객체 지향 프로그래밍의 구성 요소

객체 지향 프로그래밍은 부모 역할을 하는 Class, 자식 역할을 하는 Object와 각각의 성질을 나타내는 property, method로 이루어져 있다.

객체 지향 프로그래밍의 특징

캡슐화(Encapsulation): 클래스의 프로퍼티 및 메소드들을 한곳에 모아 둔다.
상속(Inheritance): 부모 클래스의 특징을 자식이 물려 받는다
추상화(Abstraction): 사용자는 프로그램 내부의 복잡한 구조를 알 필요 없이 사용할 수 있다
다형성(Polymorphism): 클래스의 상속을 통해 기능 확장이나 변경이 가능하게 해준다.

Class 키워드를 이용한 상속의 예시

예를 들어 세상에는 많은 종류의 사람들이(Class) 있다. 선생님도 있고 학생도 있을 거다(Class). 이들은 모두 ‘직업’ 이라는 프로퍼티는 가지고 있지만, 같지는 않다. 그리고 이런 Class 들을 상속받은 개인들은(Object) 담당하는 과목(subject)이 다를 것이다.

class Person{
	constructor(first, last, age, gender, interests){
		this.name = {
			'first': first,
			'last' : last
		}
		this.age = age;
		this.gender = gender;
		this.interests = interests;
	}
    
	greeting(){
		console.log('Hi! I\'m ' + this.name.first + '.');
	}
}

class Teacher extends Person{
	constructor(first, last, age, gender, interests, subject, grade){
		super(first, last, age, gender, interests);
		this.subject = subject;
		this.grade = grade;
	}
}

JavaScript 에서 Object를 생성하는 여러가지 방법

  • 객체 리터럴 사용
  • 생성자 사용
  • Object() 사용
  • Object.create()를 통한 생성(상속)
/*1. 객체 리터럴 사용*/
function CreatePerson(name){
    var obj = {};
    obj.name = name;
    obj.greeting = function(){
    	console.log('I\'m '+this.name+'.');
    };
    return obj;
}

let Salva = CreatePerson('Salva');

/*2. 생성자 사용*/
function Person(name){
    this.name = name;
    this.greeting = function(){
    	console.log('I\'m '+this.name+'.');
    }
}
let Salva = new Person('Salva');
let Peter = new Person('Peter');

/*3. Object() 사용*/
let person1 = new Object({
    name: 'Chris',
    age: 28,
    greeting: function(){
    	console.log("Hi! My name is "+this.name+".");
    }
});

/*4. Object.create() 사용*/
// 위의 person1 객체를 상속 받는 person2
var person2 = Object.create(person1);

Prototype 이란?

Class(클래스)가 없이도 객체지향일 수 있었던 이유: 프로토타입 기반 언어

클래스는 객체지향 언어에서 빠질 수 없는 요소다. 자바스크립트에는 원래 class라는 개념이 없었다. ES6에 와서 클래스라는 문법이 생겼을 뿐이다. 그럼에도, 그 전부터 자바스크립트는 쭉 객체지향언어였다. 그럴 수 있던 것은 프로토타입(Prototype)덕분이다. 그렇기 때문에 자바스크립트가 객체지향 언어냐는 질문에 대한 답은 ‘YES’ 이지만, 클래스 기반 언어인가 라는 질문에 대한 답은 ‘NO’ 이다.

function 문법과 prototype을 통해 클래스의 상속을 구현할 수 있다.

// 1. function 을 통한 상속 구현
function Person(){
  this.eye = 1;
  this.nose = 2;
}
var kim = new Person();
var park = new Person();

console.log(kim.eye); // 1

// 2. prototype 을 통한 메소드, 성질 추가
function Person(){};
Person.prototype.eye = 1;
Person.prototype.nose = 2;

var kim = new Person();
var park = new Person();

console.log(kim.eye); // 1

객체 생성의 원리

객체가 생성될 때 Prototype(프로토타입)이 동작하는 방법을 아는 것이 중요하다. 위에서 처럼 function Person(){}을 통해 클래스를 생성하면, Person클래스만 생성되는 것이 아니라 프로토타입 객체도 함께 생성된다. Person클래스를 상속하여 만들어진 객체들은(kim, park) 상속받은 객체를 가리키는 proto라는 속성을 갖는데, 이 proto는 상위 객체의 프로토타입 객체를 가리킨다.

마찬가지로, Person의 프로토타입 객체의 proto는 최상위 객체인 Object의 프로토타입 객체를 가리킨다.

0개의 댓글