[JavaScript] 프로토타입 메소드(Prototype Method)

프로토타입 메소드(Prototype Method)

 

클래스 함수를 사용하여 객체를 생성할 경우 클래스 함수에 선언된 프로퍼티와 메소드가 객체의 요소로 생성된다.
프로퍼티는 객체의 속성값을 저장하기 위해 객체마다 따로 생성되어 사용하는 것이 맞지만
메소드는 동일한 명령의 함수가 객체마다 따로 생성되어 저장되는 것은 비효율적이다.

객체의 메소드를 프로토타입 메소드로 선언하면 객체의 갯수에 상관없이 메소드가 하나만 생성되어 모든 객체가 공유하여 사용할 수 있다.

---

 

1) 클래스 함수 선언할 때 프로퍼티와 메소드를 함께 생성

function Student(num, name, address) {
		this.num=num;
		this.name=name;
		this.address=address;
		
		this.display=function() {
			alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
		}
		
		this.setValue=function(num, name, address) {
			this.num=num;
			this.name=name;
			this.address=address;
		}
	}

 

생성된 객체마다 프로퍼티와 메소드를 따로 저장하기 때문에 비효율적이다. 

var student1=new Student(1000, "홍길동", "서울시 강남구");
var student2=new Student(2000, "임꺽정", "서울시 종로구");
var student3=new Student(3000, "전우치", "서울시 동작구");
	
student1.display();//학번 = 1000, 이름 = 홍길동, 주소 = 서울시 강남구
student2.display();//학번 = 2000, 이름 = 임꺽정, 주소 = 서울시 종로구
student3.display();//학번 = 3000, 이름 = 전우치, 주소 = 서울시 동작구

---

2) 클래스 함수를 선언할 때, 메소드를 만들지 않고 프로퍼티만 생성 

function Student(num, name, address) {
	this.num=num;
	this.name=name;
	this.address=address;
}

 

클래스 함수에 프로토타입 메소드 추가 (방법1)

Student.prototype.display=function() {
		alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
}
	
Student.prototype.setValue=function(num, name, address) {
	this.num=num;
	this.name=name;
	this.address=address;
}

 

클래스 함수에 프로토타입 메소드 추가 (방법2)

Student.prototype={
	"display" : function() {
		alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
	},
	"setValue" : function(num, name, address) {
		this.num=num;
		this.name=name;
		this.address=address;
	}
}

 

생성된 객체에는 프로퍼티만 저장되고 메소드는 하나만 생성되어 모든 객체가 공유하여 사용한다.

//객체 생성
var student1=new Student(1000, "홍길동", "서울시 강남구");
var student2=new Student(2000, "임꺽정", "서울시 종로구");
var student3=new Student(3000, "전우치", "서울시 동작구");
	
student1.display();//학번 = 1000, 이름 = 홍길동, 주소 = 서울시 강남구
student2.display();//학번 = 2000, 이름 = 임꺽정, 주소 = 서울시 종로구
student3.display();//학번 = 3000, 이름 = 전우치, 주소 = 서울시 동작구

 

 

클래스 함수를 선언할 때 프로퍼티와 메소드를 함께 생성할 경우 생성된 객체마다 프로퍼티와 메소드를 따로 저장하지만, 
클래스 함수를 선언할 때 프로퍼티만 생성 후 프로토타입 메소드를 추가해주면 생성된 객체에는 프로퍼티만 저장되고 메소드는 하나만 생성되어 모든 객체가 공유하여 사용할 수 있다는 차이점이 있다.

 

따라서 프로토타입을 사용하면 객체를 여러번 선언했을 때, 객체에 딸린 프로퍼티는 여러번 메모리 비중을 차지하더라도 
메소드는 1번만 메모리를 차지하고 모든 객체가 해당 메소드를 공유해서 사용하기 때문에 메모리를 절약할 수 있다.

 

 

---

instanceof 연산자 : ES6에서 추가된 연산자로 변수에 저장된 객체가 클래스 함수(클래스)에 접근하지 못할 경우 [false]를 반환하고 
접근 가능한 경우 [true]를 제공한다.

형식) 객체변수 instanceof 클래스  

 

function Student(num, name, address) {
	this.num=num;
	this.name=name;
	this.address=address;
}

Student.prototype={
	"display" : function() {
		alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
	},
	"setValue" : function(num, name, address) {
		this.num=num;
		this.name=name;
		this.address=address;
	}
}

var student=new Student(1000, "홍길동","서울시 강남구");

alert(student instanceof Student);//true

---

in 연산자 : 객체의 요소를 확인하기 위한 연산자로 객체의 요소가 아닌 경우 [false]를 제공하고 객체의 요소인 경우 [true]를 제공한다.

형식)"요소명" in 객체변수

 

alert("num" in student);//true
alert("display" in student);//true
alert("phone" in student);//false

---

for 구문을 사용하여 객체 요소에 대한 일괄처리가 가능하다.

형식) for(변수명 in 객체변수) { }

→ 객체 요소의 이름을 하나씩 제공받아 변수에 저장하여 반복 처리한다. 

 

for(variable in student) {
	//객체의 요소는 . 연산자가 아닌 [] 연산자를 사용하여 접근 가능
	if(typeof(student[variable]) != "function") {//객체의 요소가 메소드가 아닌 경우
		alert(variable+" = "+student[variable]);
	}
}

//num = 1000
//name = 홍길동
//address = 서울시 강남구

---

with 구문을 사용하여 객체 요소를 변수처럼 사용하는 기능을 제공한다.

with(student) {
	alert("학번 = "+num+", 이름 = "+name+", 주소 = "+address); 
}