Frontend/JavaScript

[JavaScript]ν”„λ‘œν† νƒ€μž…(Prototype)κ³Ό 객체

sukii 2024. 1. 4. 20:11
λ°˜μ‘ν˜•

πŸ€”ν”„λ‘œν† νƒ€μž…κ³Ό 객체
β–ͺ️ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” 객체 지ν–₯ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄λ‘œ 객체λ₯Ό μ΄μš©ν•˜μ—¬ ν”„λ‘œκ·Έλž¨ μž‘μ„± - μžλ°”μŠ€νŠΈλ¦½νŠΈλŠ” λͺ¨λ“  값을 객체둜 ν‘œν˜„ν•˜μ—¬ 처리
β–ͺ️ 객체(Object) : ν˜„μ‹€μ— μ‘΄μž¬ν•˜λŠ” νŠΉμ • λŒ€μƒμ„ ν”„λ‘œκ·Έλž¨μ—μ„œ μ‚¬μš©ν•˜κΈ° μœ„ν•΄ ν”„λ‘œνΌν‹°(Property : ν‘œν˜„λŒ€μƒμ˜ 속성)와 λ©”μ†Œλ“œ(Method : ν‘œν˜„λŒ€μƒμ˜ ν–‰μœ„)λ₯Ό κ΅¬μ„±ν•˜μ—¬ μƒμ„±ν•œ κ°’

β–ͺ️  μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λͺ¨λ“  κ°μ²΄λŠ” ν”„λ‘œν† νƒ€μž…(prototype)μ΄λΌλŠ” 객체λ₯Ό 가지고 있고, κ·Έλ“€μ˜ ν”„λ‘œν† νƒ€μž…μœΌλ‘œλΆ€ν„° ν”„λ‘œνΌν‹°μ™€ λ©”μ†Œλ“œλ₯Ό μƒμ†λ°›μŒ.

이처럼 μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λͺ¨λ“  κ°μ²΄λŠ” μ΅œμ†Œν•œ ν•˜λ‚˜ μ΄μƒμ˜ λ‹€λ₯Έ κ°μ²΄λ‘œλΆ€ν„° 상속을 λ°›μœΌλ©°, μ΄λ•Œ μƒμ†λ˜λŠ” 정보λ₯Ό μ œκ³΅ν•˜λŠ” 객체λ₯Ό ν”„λ‘œν† νƒ€μž…(prototype)이라고 함.


β–ͺ️ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” 클래슀(Class) μžλ£Œν˜• λŒ€μ‹  클래슀 ν•¨μˆ˜(ν”„λ‘œν† νƒ€μž… - Prototype)을 μ‚¬μš©ν•˜μ—¬ 객체 생성 - new μ—°μ‚°μžλ‘œ 클래슀 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ—¬ 객체 생성
β–ͺ️ ES6μ—μ„œλŠ” 클래슀 μžλ£Œν˜•μ„ μ„ μ–Έν•˜μ—¬ new μ—°μ‚°μžλ‘œ 클래슀의 μƒμ„±μž(Constructor)λ₯Ό ν˜ΈμΆœν•˜μ—¬ 객체 생성
β–ͺ️ 클래슀 ν•¨μˆ˜(클래슀 μžλ£Œν˜•)λ₯Ό μ‚¬μš©ν•˜μ—¬ 객체λ₯Ό μƒμ„±ν•˜λŠ” μ΄μœ λŠ” λ™μΌν•œ ν”„λ‘œνΌν‹°μ™€ λ©”μ†Œλ“œκ°€ ν¬ν•¨λœ λ‹€μˆ˜μ˜ 객체λ₯Ό μ‰½κ²Œ μƒμ„±ν•˜κΈ° μœ„ν•œ μ‚¬μš© - 생산성 및 μœ μ§€λ³΄μˆ˜μ˜ νš¨μœ¨μ„± 증가

 

 

πŸ”˜ν΄λž˜μŠ€ ν•¨μˆ˜(ν”„λ‘œν† νƒ€μž… - Prototype) μž‘μ„± - 객체λ₯Ό μƒμ„±ν•˜κΈ° μœ„ν•œ ν•¨μˆ˜
=> μΌλ°˜ν•¨μˆ˜μ™€ κ΅¬λΆ„ν•˜κΈ° μœ„ν•œ ν•¨μˆ˜λͺ…μ˜ 첫문자λ₯Ό λŒ€λ¬Έμžλ‘œ μž‘μ„± - 파슀칼 ν‘œκΈ°λ²•
=> 클래슀 ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜λ‘œ 값을 전달받아 ν”„λ‘œνΌν‹°μ˜ μ΄ˆκΈ°κ°’μœΌλ‘œ μ €μž₯

function Student(num, name, address) {

      //this ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•΄ ν”„λ‘œνΌν‹°μ™€ λ©”μ†Œλ“œ ν‘œν˜„

      // => this : 클래슀 ν•¨μˆ˜μ—μ„œ 객체λ₯Ό ν‘œν˜„ν•˜κΈ° μœ„ν•œ ν‚€μ›Œλ“œ

 

      //this ν‚€μ›Œλ“œλ‘œ λ³€μˆ˜μ— 값을 μ €μž₯ν•˜μ—¬ ν”„λ‘œνΌν‹° μ„ μ–Έ

      //ν”„λ‘œνΌν‹°(Property) : 객체의 속성값을 μ €μž₯ν•˜κΈ° μœ„ν•œ λ³€μˆ˜ - λ©€λ²„λ³€μˆ˜

      this.num=num;

      this.name=name;

      this.address=address;

 

      //this ν‚€μ›Œλ“œλ‘œ λ³€μˆ˜μ— ν•¨μˆ˜λ₯Ό μ €μž₯ν•˜μ—¬ λ©”μ†Œλ“œ μ„ μ–Έ

      // => λ©”μ†Œλ“œμ—μ„œλŠ” this ν‚€μ›Œλ“œλ‘œ ν”„λ‘œνΌν‹°λ₯Ό μ‚¬μš©ν•˜μ—¬ ν•„μš”ν•œ λͺ…λ Ή μž‘μ„±

      // => κ°μ²΄λ§ˆλ‹€ λ©”μ†Œλ“œλ₯Ό λ”°λ‘œ μ €μž₯ν•˜μ—¬ μ‚¬μš© - 객체 개수만큼 λ©”μ†Œλ“œκ°€ λ§Œλ“€μ–΄μ Έ λ©”λͺ¨λ¦¬ μ‚¬μš© λΉ„νš¨μœ¨μ 

      //λ©”μ†Œλ“œ(Method) : 객체의 ν–‰μœ„(κΈ°λŠ₯)을 ν•¨μˆ˜λ‘œ ν‘œν˜„ν•˜μ—¬ μ €μž₯ν•˜κΈ° μœ„ν•œ λ³€μˆ˜ - λ©€λ²„ν•¨μˆ˜

     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;

     }

}

 

 

μœ„μ—μ„œμ²˜λŸΌ 클래슀 ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ λ©”μ†Œλ“œλ₯Ό μž‘μ„±ν•˜μ§€ μ•Šκ³ , μ™ΈλΆ€μ—μ„œ λ©”μ†Œλ“œλ₯Ό μΆ”κ°€ν•  μˆ˜λ„ μžˆλ‹€.

μœ„μ—μ„œ μž‘μ„±λœ λ©”μ†Œλ“œκ°€ μ—†λ‹€κ³  κ°€μ •ν•˜λ©΄, μ•„λž˜μ™€ 같이 μž‘μ„±

//클래슀 ν•¨μˆ˜(ν”„λ‘œν† νƒ€μž… - Prototype) μ™ΈλΆ€μ—μ„œ λ©”μ†Œλ“œ μΆ”κ°€

// => 객체 κ°œμˆ˜μ— 상관없이 클래슀 ν•¨μˆ˜ 내뢀에 λ©”μ†Œλ“œκ°€ ν•˜λ‚˜λ§Œ μƒμ„±λ˜μ–΄ μ‚¬μš©

 

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;

}

 

or μœ„ 방법 λŒ€μ‹ μ— ν•œλ²ˆμ— μΆ”κ°€ κ°€λŠ₯

//클래슀 ν•¨μˆ˜ 내뢀에 λ‹€μˆ˜μ˜ λ©”μ†Œλ“œλ₯Ό 객체둜 μΆ”κ°€ν•˜μ—¬ μž‘μ„±

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;

   }

}

 

 

πŸ”˜ν΄λž˜μŠ€ ν•¨μˆ˜(ν”„λ‘œν† νƒ€μž… - Prototype)λ₯Ό μ‚¬μš©ν•˜μ—¬ 객체λ₯Ό μƒμ„±ν•˜λŠ” 방법

=> new μ—°μ‚°μžλ‘œ 클래슀 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ—¬ 객체 μƒμ„±ν•˜κ³  μƒμ„±λœ 객체λ₯Ό λ³€μˆ˜μ— μ €μž₯ - κ°μ²΄ν˜• λ³€μˆ˜

ν˜•μ‹) var λ³€μˆ˜λͺ… = new ν΄λž˜μŠ€ν•¨μˆ˜(κ°’, κ°’, ...);

var student1=new Student(1000, "홍길동", "μ„œμšΈμ‹œ 강남ꡬ");

alert("student1 = "+student1);//student1 = [object Object]

alert("λ³€μˆ˜μ˜ μžλ£Œν˜• = "+typeof(student1));//λ³€μˆ˜μ˜ μžλ£Œν˜• = object

newμ—°μ‚°μžλ₯Ό μ‚¬μš©ν•΄ Student 클래슀 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ—¬ 객체λ₯Ό μƒμ„±ν–ˆκ³ , 이λ₯Ό student1μ΄λΌλŠ” λ³€μˆ˜μ— μ €μž₯함.

student1의 μžλ£Œν˜•μ„ 확인해보면 objectλΌλŠ” 것을 μ•Œ 수 있음.

 

//κ°μ²΄λŠ” [ . ]μ—°μ‚°μžλ₯Ό μ‚¬μš©ν•˜μ—¬ 객체의 ν”„λ‘œνΌν‹°μ™€ λ©”μ†Œλ“œ μ‚¬μš© κ°€λŠ₯

//방법1)

alert("ν•™λ²ˆ = "+student1.num+", 이름 = "+student1.name+", μ£Όμ†Œ = "+student1.address);

//방법2)

student1.display();

κ°μ²΄ν˜• λ³€μˆ˜λ₯Ό ν™œμš©ν•˜μ—¬ ν”„λ‘œνΌν‹°μ™€ λ©”μ†Œλ“œ μ‚¬μš© κ°€λŠ₯. μœ„ 두 방법 λͺ¨λ‘ μ•„λž˜μ™€ 같은 κ²°κ³Ό 좜λ ₯.

 

 

student2λΌλŠ” λ³€μˆ˜μ— μƒˆλ‘œμš΄ ν”„λ‘œνΌν‹°λ₯Ό λ§€κ°œλ³€μˆ˜λ‘œ μ „λ‹¬ν•˜μ—¬ Student 클래슀 ν•¨μˆ˜ 호좜 및 객체 생성.

var student2=new Student(2000, "μž„κΊ½μ •", "μ„œμšΈμ‹œ μ’…λ‘œκ΅¬");

student2.display();

λ©”μ†Œλ“œ 호좜 μ‹œ, μ•„λž˜μ™€ 같은 κ²°κ³Ό 좜λ ₯.

 

 

μœ„ μ‹€μŠ΅μ˜ˆμ œ μ „μ²΄μ½”λ“œπŸ‘©‍πŸ’»

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<script type="text/javascript">
	//클래슀 ν•¨μˆ˜(ν”„λ‘œν† νƒ€μž… - Prototype) μž‘μ„± - 객체λ₯Ό μƒμ„±ν•˜κΈ° μœ„ν•œ ν•¨μˆ˜
	// => μΌλ°˜ν•¨μˆ˜μ™€ κ΅¬λΆ„ν•˜κΈ° μœ„ν•œ ν•¨μˆ˜λͺ…μ˜ 첫문자λ₯Ό λŒ€λ¬Έμžλ‘œ μž‘μ„± - 파슀칼 ν‘œκΈ°λ²•
	// => 클래슀 ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜λ‘œ 값을 전달받아 ν”„λ‘œνΌν‹°μ˜ μ΄ˆκΈ°κ°’μœΌλ‘œ μ €μž₯	
	function Student(num, name, address) {
		//this ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•΄ ν”„λ‘œνΌν‹°μ™€ λ©”μ†Œλ“œ ν‘œν˜„
		// => this : 클래슀 ν•¨μˆ˜μ—μ„œ 객체λ₯Ό ν‘œν˜„ν•˜κΈ° μœ„ν•œ ν‚€μ›Œλ“œ
		
		//this ν‚€μ›Œλ“œλ‘œ λ³€μˆ˜μ— 값을 μ €μž₯ν•˜μ—¬ ν”„λ‘œνΌν‹° μ„ μ–Έ
		//ν”„λ‘œνΌν‹°(Property) : 객체의 속성값을 μ €μž₯ν•˜κΈ° μœ„ν•œ λ³€μˆ˜ - λ©€λ²„λ³€μˆ˜
		this.num=num;
		this.name=name;
		this.address=address;
		
		/*
		//this ν‚€μ›Œλ“œλ‘œ λ³€μˆ˜μ— ν•¨μˆ˜λ₯Ό μ €μž₯ν•˜μ—¬ λ©”μ†Œλ“œ μ„ μ–Έ
		// => λ©”μ†Œλ“œμ—μ„œλŠ” this ν‚€μ›Œλ“œλ‘œ ν”„λ‘œνΌν‹°λ₯Ό μ‚¬μš©ν•˜μ—¬ ν•„μš”ν•œ λͺ…λ Ή μž‘μ„±
		// => κ°μ²΄λ§ˆλ‹€ λ©”μ†Œλ“œλ₯Ό λ”°λ‘œ μ €μž₯ν•˜μ—¬ μ‚¬μš© - 객체 개수만큼 λ©”μ†Œλ“œκ°€ λ§Œλ“€μ–΄μ Έ λ©”λͺ¨λ¦¬ μ‚¬μš© λΉ„νš¨μœ¨μ 
		//λ©”μ†Œλ“œ(Method) : 객체의 ν–‰μœ„(κΈ°λŠ₯)을 ν•¨μˆ˜λ‘œ ν‘œν˜„ν•˜μ—¬ μ €μž₯ν•˜κΈ° μœ„ν•œ λ³€μˆ˜ - λ©€λ²„ν•¨μˆ˜
		
		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;
		}
		*/
	}	
	
	//클래슀 ν•¨μˆ˜(ν”„λ‘œν† νƒ€μž… - Prototype) μ™ΈλΆ€μ—μ„œ λ©”μ†Œλ“œ μΆ”κ°€
	// => 객체 κ°œμˆ˜μ— 상관없이 클래슀 ν•¨μˆ˜ 내뢀에 λ©”μ†Œλ“œκ°€ ν•˜λ‚˜λ§Œ μƒμ„±λ˜μ–΄ μ‚¬μš©
	/*
	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;
	}
	*/
	
	//클래슀 ν•¨μˆ˜ 내뢀에 λ‹€μˆ˜μ˜ λ©”μ†Œλ“œλ₯Ό 객체둜 μΆ”κ°€ν•˜μ—¬ μž‘μ„±
	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;
		}	
	}
	
	//클래슀 ν•¨μˆ˜(ν”„λ‘œν† νƒ€μž… - Prototype)λ₯Ό μ‚¬μš©ν•˜μ—¬ 객체λ₯Ό μƒμ„±ν•˜λŠ” 방법
	var student1=new Student(1000, "홍길동", "μ„œμšΈμ‹œ 강남ꡬ");
	//alert("student1 = "+student1);//student1 = [object Object]
	//alert("λ³€μˆ˜μ˜ μžλ£Œν˜• = "+typeof(student1));//λ³€μˆ˜μ˜ μžλ£Œν˜• = object
	
	//κ°μ²΄λŠ” .μ—°μ‚°μžλ₯Ό μ‚¬μš©ν•˜μ—¬ 객체의 ν”„λ‘œνΌν‹°μ™€ λ©”μ†Œλ“œ μ‚¬μš© κ°€λŠ₯	
	//alert("ν•™λ²ˆ = "+student1.num+", 이름 = "+student1.name+", μ£Όμ†Œ = "+student1.address);
	student1.display();
	
	var student2=new Student(2000, "μž„κΊ½μ •", "μ„œμšΈμ‹œ μ’…λ‘œκ΅¬");
	student2.display();
	</script>
</body>
</html>

 

 

 

+μ°Έκ³ 

객체가 뭔지..

2024.01.05 - [JavaScript] - [JavaScript]객체(Object)

 

[JavaScript]객체(Object)

μžλ°”λž‘ λΉ„μŠ·ν•œλ“―ν•˜λ©΄μ„œλ„ λ­”κ°€ ν—·κ°ˆλ¦¬κ²Œ ν•˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 객체.. 객체.. ν”„λ‘œν† νƒ€μž….. 이게 λ‹€ 뭔데 λΌλŠ” 생각이 계속 λ“€μ—ˆλ‹€. κ·ΈλŸ¬λ‹€κ°€ TCP School에 μ •λ¦¬λœ λ‚΄μš©μ΄ κ°€μž₯ μ΄ν•΄ν•˜κΈ° 쉬웠닀. 자

sukis.tistory.com

 

 

ν”„λ‘œν† νƒ€μž… κ°œλ…μž‘κΈ° 졜고의 μ˜μƒ!!!

https://youtu.be/wUgmzvExL_E?si=LDxhXnsyLHz4wT2_

 

 

ν”„λ‘œν† νƒ€μž… κ΄€λ ¨ μ„€λͺ…κΈ€

https://tcpschool.com/javascript/js_object_prototype

 

μ½”λ”©κ΅μœ‘ ν‹°μ”¨ν”ΌμŠ€μΏ¨

4μ°¨μ‚°μ—…ν˜λͺ…, μ½”λ”©κ΅μœ‘, μ†Œν”„νŠΈμ›¨μ–΄κ΅μœ‘, μ½”λ”©κΈ°μ΄ˆ, SWμ½”λ”©, κΈ°μ΄ˆμ½”λ”©λΆ€ν„° μžλ°” 파이썬 λ“±

tcpschool.com

 

λ°˜μ‘ν˜•