객체 생성자 함수 프로토타입_js

객체 생성자 함수 프로토타입

1. 프로토타입 : 원형 -> 객체 생성자 함수 정의(선언)한 대상

2. 원형에 추가로 메서드 및 속성을 추가 할 수 있다.

(원형에서 this 키워드로 속성이나 메서드를 추가하지 않고 (원형을 건들지 않고) 메서드나 속성을 추가 할 수 있다.)

3. 객체화된 대상에서 프로토타입으로 추가된 메서드나 속성을 사용할 수 있다.(객체화된 대상 기준으로 프로토타입으로 확장(상속))

4. 정의된 객체생성자 함수 기준으로 객체화가 되며, 프로토타입으로 선언된 속성이나 메서드는 객체화된 대상에 내용은 포함하고 있지않다.

허나 사용은 가능하며, 이를 프로토타입에 명시된 속성이나 메서드를 확장했다고 표현할 수 있다.

5.구문 : 함수명.prototype.함수명이나 속성명 = 값;

<script type="text/javascript">
	function UserInfo(){
		this.userName='';
	}
	var user1=new UserInfo();
	var user2=new UserInfo();
	//this 키워드로 정의된 속성이나 메서드는 객체화시 추가된다.
	console.log(user1,user2);
	//프로토타입으로 속성이나 메서드 추가 해보기
	UserInfo.prototype.getUserName=function(){
</script>

UserInfo.prototype.getUserName=function(){	
	//프로토타입으로 확장된 메서드는
	//this키워드로 객체화된 객체에 접근 할 수 있다.
	return this.userName;
}

<script type="text/javascript">
	function UserInfo(){
		this.userName='';
	}
	var user1=new UserInfo();
	var user2=new UserInfo();
	//this 키워드로 정의된 속성이나 메서드는 객체화시 추가된다.
	console.log(user1,user2);
	console.log(user1.getUserName());
	console.log(user2.getUserName());
	UserInfo.prototype.getUserName=function(){
		return this.userName;
	}
</script>

<script type="text/javascript">
	function UserInfo(){
		this.userName='';
	}
	var user1=new UserInfo();
	var user2=new UserInfo();
	//this 키워드로 정의된 속성이나 메서드는 객체화시 추가된다.
	console.log(user1,user2);
	UserInfo.prototype.getUserName=function(){
		return this.userName;
	}
	//프로토타입으로 추가된 메서드나 속성은 선언 후 아래에서 호출 가능
	console.log(user1.getUserName());
	console.log(user2.getUserName());
</script>

<script type="text/javascript">
	function UserInfo(){
		this.userName='';
	}
	var user1=new UserInfo();
	var user2=new UserInfo();
	//this 키워드로 정의된 속성이나 메서드는 객체화시 추가된다.
	user1.userName='홍길동';
	user2.userName='이순신';
	console.log(user1,user2);
	//프로토타입으로 속성이나 메서드 추가해보기
	UserInfo.prototype.getUserName=function(){
		//프로토타입으로 확장된 메서드는
		//this 키워드로 객체화된 객체에 접근 할 수 있다.
		return this.userName;
	}
	//프로토타입으로 추가된 메서드나 속성은 선언 후 아래에서 호출 가능
		/*
			프로토타입으로 추가된 메서드 getUSerName을 객체화된 객체가
			getUserName 메서드를 상속받아 호출이 가능하다.
		*/
	console.log(user1.getUserName());
	console.log(user2.getUserName());
</script>

내장 객체 생성자 함수 프로토 타입으로 메서드 추가해보기(확장)

<script type="text/javascript">
	//내장 객체 생성자 함수 객체화하여 속성 및 메서드 확인하기
	console.log(new Array());
</script>​

- 프로토타입(sum)

Array.prototype.sum=function(){
	console.log(this);
}

- 프로토타입으로 추가된 메서드 실행

<script type="text/javascript">
	//내장 객체 생성자 함수 객체화하여 속성 및 메서드 확인하기
	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메서드 실행 후 결과값');
</script>