공부내용 정리 :: JavaScript 기초 4

1. 자바스크립트의 객체지향

1-1. 생성자와 new

  본 장에서는 자바스크립트의 객체지향에 대해서 학습한 내용을 정리하였다.

 

  자바스크립트는 본래 함수지향언어기 때문에 객체지향의 패러다임에 독특하게 적용한 사례중 하나라고 하였다. 자바스크립트의 객체지향은 프로토타입 기반 프로그래밍(prototype-based programming) 이라는 카테고리에 속한다. 

 

   자바스크립트에서 객체(Object)를 생성하는 방법은 이전  장에서 정리한 적이 있다. 복습차원에서 예제를 작성하였고 다음과 같다.

 

 

// 첫번째 방법

var snack = {};

snack.name = "포카칩";
snack.introduce = function() {
	returnn this.name + " 양파맛은 너무 맛있어";
}

snack.introduce();
// 포카칩 양파맛은 너무맛있어

// 두번째 방법

var snack = {
	"name" : "포카칩",
    "introduce" : function() {
    				return this.name + " 양파맛은 너무 맛있어";
                    }
	}
    
// 포카칩 양파맛은 너무맛있어

 

 자바스크립트에서는 필드를 프로퍼티(property)라고 한다. 메소드(method)는 메소드라고 한다. 첫번째 방법은 객체를 선언하고 값을 할당하는 코드가 떨어져있어서 중간에 다른 코드가 끼어들어 변조될 가능성이 있다. 그것을 방지하기 위해서  두번째 방법을 사용하기도 한다.

 

 두번째 방법은 상기 코드와 같이, 변수를 선언함과 동시에 객체 { }안에 프로퍼티와  값을 할당하는 방식으로 되어있다. 이렇게 객체를 생성한다면, 중간에 다른 코드가 끼어들어 변조될 가능성이 없어진다.

 

 하나의 어플리케이션에는 같은내용의 객체가 하나만 사용될 가능성은 적다. 그렇다면 같은내용의 객체가 여러개 생성된다고 가정한다면 다음과 같은 코드가 작성될 수 있다.

 

var snack1 = {
	"name" : "포카칩",
    "introduce" : function() {
    				return this.name + " 은(는) 너무 맛있어";
                    }
	}
    
var snack2 = {
	"name" : "스윙칩",
    "introduce" : function() {
    				return this.name + " 은(는) 너무 맛있어";
                    }
	}
    
var snack3 = {
	"name" : "오감자",
    "introduce" : function() {
    				return this.name + " 은(는) 너무 맛있어";
                    }
	}

 

 예제에서 확인할 수 있듯이, 많은 부분이 중복이 되고있다. 이 중복이 되는 부분을 설계도로 미리 만들어놓고, 필요한 값만 설정해서 필요할 때마다 객체를 찍어낼 수 있는 클래스 라는 것을 이용할 수 있을 것이다. 자바스크립트에서는 클래스와 같은 개념으로 생성자(Constructor)와 new를 사용한다고 하였다. 다음과 같다.

 

function Person() { }

var  person1 = new Person();

person1.name = "김민수";
person1.sayHi = function() {
					return '안녕하세요! 제 이름은 ' + this.name + ' 입니다!';
                    }

person.sayHi();
// '안녕하세요! 제 이름은 김민수 입니다!'

  

 ES6 이전에는 상기와 같이, class라는 개념이 존재하지 않았고, 함수를 정의할 떄 비어있는 객체를 같의 정의한 후, 해당 함수를 new와 같이 호출한다면, 할당하는 변수에 객체를 생성해서 할당할 수 있는 시스템으로 구성되어 있었다. 그러나 ES6 이후에는 클래스가 도입되었다고 하였으니, 이부분은 따로 정리하여 기록하겠다.

 

  하기의 예제는  class가 도입되기 이전(ES6 이전)의 생성자를 통한 객체를 정의하는 방법이다.

 

function Person(name) {

	this.name = name;
    this.introduce = function() {
    	return '안녕하세요 제 이름은 ' + this.name + ' 입니다.';
        }
        
    }
    
    
var person1 = new Person("김민수");
var person2 = new Person("박민수");

person1.introduce();
// 안녕하세요 제 이름은 김민수 입니다.
person2.introduce();
// 안녕하세요 제 이름은 박민수 입니다.