자바 스크립트 객체지향 프로그래밍

자바스크립트 생성자

여러 객체지향 프로그래밍 언어에서는 객체의 클래스를 정의한 다음 해당 클래스의 인스턴스에 해당하는 개별 객체를 생성하는 것이 가능하다. 자바스크립트에서는 진정한 클래스를 지원하지는 않지만 자바스크립트 객체를 생성하는 생성자 함수를 제공하고 있다.

자바스크립트 생성자는 자바스크립트 객체를 생성하는데 사용되는 함수다. 생성자는 new 연산자와 함께 사용되며 먼저 프로퍼티가 없는 새 객체를 생성한 후 생성자 함수를 호출하고 새 객체를 this 키워드의 값으로 전달하며 객체가 사용되기 전에 설정되어 있어야할 프로퍼티를 설정하는 역할을 한다.

 

ex)

fucntion Point(x,y)
{
	this.x = x;
	this.y = y;
	// 보통 생성자 함수는 반환값이 없다.
}

point1 = new Point(5,5);
point2 = new Point(8,8);

console.log(JSON.stringify(point1));
console.log(JSON.stringify(point2));

 

자바스크립트 프로토타입(prototype)

모든 자바스크립트 객체는 그것의 프로토타입 객체에 대한 내부 참조를 가지고 있으며, 프로토타입 객체로부터 프로퍼티를 상속받는다. 모든 함수는 함수가 정의되었을 때 자동으로 생성되고 초기화되는 prototype 프로퍼티를 가지고 있다. 이러한 프로토타입 객체에 추가하는 프로퍼티는 생성자로 초기화된 객체 프로퍼티로 나타나게 된다.

 

ex)

function Point(x,y)
{
	this.x = x;
	this.y = y;
}

Point.prototype.add = function(){
	return this.x + this.y;
}

point1 = new Point(5,5);
point2 = new Point(8,8);

console.log(point1.add());
console.log(point2.add());

 

메서드와 프로퍼티는 객체가 생성된 이후에도 동적으로 프로토타입에 추가될 수 있다.

 

ex)

function Point(x,y)
{
	this.x = x;
	this.y = y;
}

//객체를 먼저 생성
point1 = new Point(5,5);
point2 = new Point(8,8);

//프로토타입에 메서드를 추가
Point.prototype.add = function(){
	return this.x + this.y;
}

console.log(point1.add()); // 10
console.log(point2.add()); // 16

 

자바스크립트 프로토타입을 쓰는 이유

• 객체지향적이고 상속을 사용할 수 있다.
• 프로토타입 객체를 사용하면 객체가 프로토타입의 프로퍼티를 상당수 상속할 수 있어서 각 객체에 필요한 메모리의 양을 대폭 줄일 수 있다.

인스턴스 프로퍼티와 메서드

인스턴스 프로퍼티

모든 객체는 인스턴스 프로퍼티의 사본을 자체적으로 가지고 있다. 인스턴스 프로퍼티에는 개별 객체(ex point1.x)를 통해 접근할 수 있다.

 

ex)

function Point(x,y)
{
	this.x = x;
	this.y = y;
}

point1 = new Point(5,5);
point2 = new Point(8,8);

console.log(point1.x); // 5
console.log(point2.y); // 8

 

인스턴스 메서드

인스턴스 메서드는 특정 인스턴스나 객체를 대상으로 호출된다. 인스턴스 메서드를 구현할 때는 this. 키워드를 이용해 메서드를 호출할 인스턴스나 객체를 참조할 수 있다. 인스턴스 메서드는 클래스의 모든 인스턴스가 공유한다.

 

ex)

function Point(x,y)
{
	this.x = x;
	this.y = y;
}

//객체를 먼저 생성
point1 = new Point(5,5);
point2 = new Point(8,8);

//프로토타입에 메서드를 추가
Point.prototype.add = function(){
	return this.x + this.y;
}

console.log(point1.add()); // 10
console.log(point2.add()); // 16

 

클래스 프로퍼티와 메서드

클래스 프로퍼티

자바스크립트에서 클래스 프로퍼티는 클래스의 각 인스턴스와 연관된 것이 아닌 클래스 자체와 연관된 프로퍼티를 말한다. 클래스의 인스턴스가 얼마나 생성됐느냐와 관계없이 각 클래스 프로퍼티는 각각 하나씩만 존재한다. 자바스크립트에서 클래스 프로퍼티를 정의하려면 생성자 함수 자체의 프로퍼티로 정의하면 된다. 이는 자바스크립트 함수 역시 객체이기 때문이다.

 

ex)

function Circle(r)
{
	this.radius = r;
}

// 클래스 프로퍼티를 정의
Circle.PI = 3.14159265;

Circle.prototype.area = function(){
	return Circle.PI * this.radius * this.radius;
}

c1 = new Circle(10);

console.log(c1.area()); // 314.159265

 

클래스 메서드

클래스 메서드는 클래스의 인스턴스가 아닌 클래스와 연관된 메서드이다. 자바스크립트에서 클래스 메서드를 정의하려면 적절한 함수를 생성자의 프로퍼티로 만들면 된다. 클래스 메서드는 생성자 함수를 통해 호출되기 때문에 this 키워드는 특정 인스턴스를 참조하지 않는다. 그래서 보통 클래스 메서드에서는 this를 전혀 사용하지 않는다.

 

ex)

function Point(x,y)
{
	this.x = x;
	this.y = y;
}

//클래스 메서드로 정의
Point.getHigherPoint = function(a,b){
	if(a.x > b.x) return a;
	else return b;
}

point1 = new Point(5,5);
point2 = new Point(8,8);

console.log(Point.getHigherPoint(point1,point2).y); //8

 

비공개 멈버와 메서드

자바스크립트에서 비공개 멤버는 생성자로 만드는데, var 키워드를 이용해 정의한 변수와 생성자의 매개변수는 비공개 멤버가 된다. 비공개 멤버는 생성자 함수 밖에서 접근할 수 없으며, 오직 생성자 함수 안에서만 접근할 수 있다. 이를 데이터 캡슐화(data encapsulation)라고 한다.

 

ex)

function Circle(r)
{
	//비공개 프로퍼티
	var radius = r;
    
	//비공개 메서드
	var getArea = Function(){
		return Circle.PI *radius * radius;
	}

	//공개 메서드
	this.area = function(){returnr getArea();}
}

//클래스 프로퍼티를 정의
Circle.PI = 3.14159265;

c1 = new Circle(10);

console.log(c1.area()); // 314.159265