(JavaScript) 객체 생성자 함수, 프로토타입

객체 생성자 함수(Object Constructor Function)

- 함수를 new 연산자를 통하여 객체화 시키는 것
- var, let 키워드로 내부에 변수나 내부함수 선언시 외부에서 접근 불가능 > java의 private과 비슷
- this 키워드로 내부 변수나 함수(메서드) 선언시 외부에서 접근 가능 > java의 public과 비슷

 

 

새로 생성된 객체의 값 바꾸기

function MyFn2(){//클래스처럼 생각하기
			
	//객체화된 나 자신의 속성 생성
	this.userName = '홍길동';
			
	//객체화된 나 자신의 메서드 생성
	this.getUserName = function(){
				
	};
}		

var myFnObj = new MyFn2(); 
myFnObj.userName = '홍길순';
console.log(myFnObj, new MyFn2().userName);
		
var myFnObj2 = new MyFn2();
myFnObj2.userName = '유관순';
console.log(myFnObj2, new MyFn2().userName);

결과 :

 

 

var(let)와 this의 차이

function MyFn(){//클래스처럼 생각하기
	
	var userName = '이순신';
    
	//객체화된 나 자신의 속성 생성
	this.userName = '홍길동'; 
			
	//객체화된 나 자신의 메서드 생성
	this.getUserName = function(){
				
	};
}

var obj = new MyFn();
console.log(obj.userName);

결과 :

'이순신'은 MyFn()함수의 지역변수로 선언되어 있어 외부에서 접근이 불가능하다.
같은 객체 내에선 지역변수에도 접근할 수 있기 때문에
MyFn() 함수에 익명함수로 선언되어 있는 메서드를 이용하여 호출해야 한다.
9~10번 줄 코드를 아래의 코드로 수정한 뒤 console.log()를 이용하여
getUserName()메서드를 출력하면 '이순신' 결과값을 확인할 수 있다.

this.getUserName = function(){
	return userName;
};

console.log(obj3.getUserName());

결과 :

 

 

구조가 같은 객체를 많이 만들어야 할 때

일반 객체 생성	객체 생성자 함수로 객체 생성
var obj = [ 　{name: '홍길동', age: 20}, 　{name: '이순신', age: 20}, 　{name: '고길동', age: 20}, 　{name: '유관순', age: 20}, ];	function UserInfo(name, age){ this.name = name; this.age = age; } var obj2 = [ new UserInfo('홍길동',20), new UserInfo('이순신',20), new UserInfo('고길동',20), new UserInfo('유관순',20), ];

지금은 객체 안의 멤버가 적어 차이가 잘 보이지 않지만

일반 객체 생성시에는 키를 일일이 써줘야 하는 반면,

객체 생성자 함수로 객체 생성시 매개변수 형태로 값만 써주면 된다

실습1. 아래의 최종 결괏물이 나올 수 있는 객체 생성자 함수를 선언하도록 하여라.

function MyFn(){

}
console.log(new MyFn(), "결괏물-> { userName:'',getUserName:f(){},setUserName:f(name){}}");

풀이

function MyFn(){
	this.userName = '';
	this.getUserName = function(userName){
		return this.userName
	}
	this.setUserName = function(name){
		this.userName = name;
	}
}

결과

 

실습2. 아래의 최종 결괏물이 나올 수 있는 객체 생성자 함수를 선언하도록 하여라.

function ClassInfo(){

}
console.log(new ClassInfo());
//결과 : {ClassNumber:0, setClassNumber:f(n), getClassNumber:f()}

풀이

function ClassInfo(){
	this.ClassNumber = 0;
	this.setClassNumber = function(n){
		this.ClassNumber = n;
	}
	this.getClassNumber = function(){
		return this.ClassNumber;
	}
}

결과

 

실습3. 아래의 객체모형과 똑같은 형태의 객체가 생성될 수 있는 객체 생성자 함수를 선언하고 new 연산자를 활용하여 객체화를 시켜라.

var obj2 ={
	userName : '',
	userAge : 0,
	userAddr : '',
	setUserInfo : function(name,age,addr){
		this.userName = name;
		this.userAge = age;
		this.userAddr = addr;
	}
}

풀이

function MyObj2(){
	this.userName = '';
	this.userAge = 0;
	this.userAddr = '';
	this.setUserInfo = function(name,age,addr){
		this.userName = name;
		this.userAge = age;
		this.userAddr = addr;
	}			
}

console.log(obj2);
console.log(new MyObj2());

결과

 

 

프로토타입(Prototype)

1. 프로토타입: 원형 -> 객체 생성자 함수 정의(선언)한 대상
2. 원형에 메서드 및 속성을 추가 할 수 있다.
   (원형에서 this 키워드로 속성이나 메서드를 추가하지 않고(원형을 건들지 않고) 메서드나 속성을 추가할 수 있다.)
3. 객체화된 대상에서 프로토타입으로 추가된 메서드나 속성을 사용할 수 있다.
   (객체화된 대상 기준으로 프로토타입으로 확장(상속))
4. 정의된 객체생성자 함수 기준으로 객체화가 되며,
   프로토타입으로 선언된 속성이나 메서드는 객체화된 대상에 내용은 포함하고 있지않다.
   허나 사용은 가능하며, 이를 프로토타입에 명시된 속성이나 메서드를 상속했다고 표현할 수 있다. => 메모리 절약
5. 구문 : 원형명.prototype.함수명(or속성명) = 값;

console.log(new Array());

Array.prototype.sum = function(){
	console.log(this, 'sum 메서드 내부에서 this 출력');
	var n = 0;
	for(var i=0; i<this.length; i++){
		n += this[i];
	}
	return n;
}		
var arr01 = [1,2,3,4,5];
console.log(arr01);

//프로토타입으로 추가된 메서드 실행
var sum = arr01.sum();
console.log(sum, 'sum 메서드 실행 후 결괏값');