JavaScript prototype과 상속

Develop My Life·2020년 4월 19일
JavaScriptTIL
0

JavaScript

목록 보기
13/15

상속의 개념

프로그래밍을 하다보면 변수와 메소드가 있는 객체를 만들게 된다. 이때 만든 객체에 있는 변수와 메소드를 또다른 객체를 만들 때 활용할 수 있는데 이때 사용되는 개념이 상속이다.

prototype 개념과 상속

  • 함수객체를 선언하면 그 안에 속성(property)가 있다. 그 속성(property)에는 자동적으로 prototype이라는 객체가 들어가있다. 그리고 사용자가 임의로 입력한 객체가 들어있는 것이다.
  • 상속은 한 객체에 있는 prototype의 내용을 또다른 객체의 prototype에 입력하는 것이다.
  • 객체의 속성에 들어있다고해서 상속되는 것이 아니라 객체의 prototype객체에 들어있어야 상속이 가능하다.

상속의 예시

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	function Person(name){ //Person 생성자를 정의한다.
	    this.name = name; //인자를 이 함수가 속한 객체의 name으로 입력
	}
	Person.prototype.name=null; //prototype 객체 name을 null로 초기화시키다.
	Person.prototype.introduce = function(){ //Person객체의 속성인 prototype 객체 안에 자기소개하는 기능 추가
	    return 'My name is '+this.name; 
	}
	 
	function Programmer(name){ //Programmer 생성자 선언
	    this.name = name; //인자를 이 함수가 속한 객체의 name에 입력
	}
	Programmer.prototype = new Person(); //Programmer함수의 속성인 prototype 객체에 Person 함수객체를 상속한다.
	Programmer.prototype.coding = function(){ //Programmer함수의 속성인 prototype 객체에 coding 함수를 넣어 기능을 추가한다.
	    return "hello world";
	}
	
	function Client(name){ 
		this.name = name;
	}
	Client.prototype = new Person();
	Client.prototype.using = function(){
		return "using product";
	}
	// 위와 동일

	var person_1 = new Programmer('lee'); //person_1 객체에 Programmer생성자를 통해 객체 생성 
	var person_2 = new Client('kim'); //person_1 객체에 Programmer생성자를 통해 객체 생성
	document.write(person_1.introduce()+"<br />"); //person_1객체의 속성 prototype객체에 있는 함수 introduce 함수 사용 
	document.write(person_1.coding()+"<br />");
	document.write(person_2.introduce()+"<br />");
	document.write(person_2.using()+"<br />");
	
</script>
</body>
</html>

prototype의 실행 순서(prototype chain)

객체.함수()를 사용하면
1. 객체에 함수가 있는지 확인한다. (있다면 그 함수를 실행한다.)
2. 객체가 상속받은 prototype객체에 함수가 있는지 확인한다. (있다면 그 함수를 실행한다.)
3. 위 과정을 계속한다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	function grand_parent_conductor(){}; //생성자 선언
	grand_parent_conductor.prototype.name = 'lee'; //최상위 생성자의 속성인 prototype객체에 surname을 lee라고 정의 
	function parent_conductor(){}; //생성자 선언
	parent_conductor.prototype = new grand_parent_conductor(); //parent_conductor의 속성인 prototype객체에 grand_parent_conductor 함수객체를 상속 
	parent_conductor.prototype.name = 'kim'; //parent_conductor의 속성인 prototype객체의 surname을 kim이라고 정의
	function child_conductor(){}; //생성자 선언 
	child_conductor.prototype = new parent_conductor(); //child_conductor의 속성인 prototype객체에 parent_conductor 함수객체를 상속

	var child = new child_conductor(); //child에 child_conductor생성자를 이용하여 객체 생성
	child.name = 'bae'; //child객체의 name을 bae라고 입력
	alert(child.name); //child객체의 name을 출력
</script>
</body>
</html>

이 때 출력은 bae 이다.
그 이유는 객체에서 name을 찾았기 때문이다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	function grand_parent_conductor(){}; //생성자 선언
	grand_parent_conductor.prototype.name = 'lee'; //최상위 생성자의 속성인 prototype객체에 surname을 lee라고 정의 
	function parent_conductor(){}; //생성자 선언
	parent_conductor.prototype = new grand_parent_conductor(); //parent_conductor의 속성인 prototype객체에 grand_parent_conductor 함수객체를 상속 
	parent_conductor.prototype.name = 'kim'; //parent_conductor의 속성인 prototype객체의 surname을 kim이라고 정의
	function child_conductor(){}; //생성자 선언 
	child_conductor.prototype = new parent_conductor(); //child_conductor의 속성인 prototype객체에 parent_conductor 함수객체를 상속

	var child = new child_conductor(); //child에 child_conductor생성자를 이용하여 객체 생성
	alert(child.name); //child객체의 name을 출력
</script>
</body>
</html>

이 때 출력은 kim이다.
그 이유는 객체에서 name을 찾지 못해 상속받은 prototype에서 name을 찾았기 때문이다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	function grand_parent_conductor(){}; //생성자 선언
	grand_parent_conductor.prototype.name = 'lee'; //최상위 생성자의 속성인 prototype객체에 surname을 lee라고 정의 
	function parent_conductor(){}; //생성자 선언
	parent_conductor.prototype = new grand_parent_conductor(); //parent_conductor의 속성인 prototype객체에 grand_parent_conductor 함수객체를 상속 
	function child_conductor(){}; //생성자 선언 
	child_conductor.prototype = new parent_conductor(); //child_conductor의 속성인 prototype객체에 parent_conductor 함수객체를 상속

	var child = new child_conductor(); //child에 child_conductor생성자를 이용하여 객체 생성
	alert(child.name); //child객체의 name을 출력
</script>
</body>
</html>

이 때 출력은 lee 이다.
그 이유는 객체에서 name을 찾지 못했고 상속받은 prototype에서도 name을 찾지 못했고 그 상위 prototype에서 name을 찾았기 때문이다.

prototype 사용 시 하지 말아야할 실수

상속을 할 때 다음과 같은 형식으로 작성해야한다.

child.prototype = new parent();

객체.prototype = new 함수( );

하지만 이 때 다음과 같이 작성하면 아이객체가 부모객체에도 영향을 줄 수 있어 이러한 실수는 하면 안된다.

child.prototype = parent.prototype

prototype으로 표준내장객체 확장

JavaScript의 표준내장객체

  • Object
  • Function
  • Array
  • String
  • Boolean
  • Number
  • Math
  • Date
  • RegExp

Array 기능 확장

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	Array.prototype.random = function(){ //Array라는 표준 내장 객체에 prototype에 random이라는 함수객체를 추가한다.
		var index = Math.floor(this.length * Math.random());
		return this[index]; //이 함수가 속해있는 객체의 index 길이를 측정하여 표준내장객체 Math를 활용해 무작위정수 값으로 객체의 값을 불러오는 기능
	}

	var arr = new Array ('math','science','social','korean','english'); //arr객체에 Array 표준내장객체를 이용하여 배열을 입력 
	alert(arr.random()); //arr객체의 random함수 사용 


</script>
</body>
</html>
profile
Develop My Life
이전 포스트

JavaScript new와 생성자

다음 포스트

JavaScript Object

0개의 댓글