JavaScript new와 생성자

Develop My Life·2020년 4월 18일
0

JavaScript

목록 보기
12/15

new

new는 함수에 대한 객체를 생성해주는 기능을 한다.

new의 사용방법

1. 함수를 선언한다.
2. new 를 사용하여 함수에 대한 객체를 생성한다.
3. 생성된 객체를 변수에 저장한다.
4. 변수에 저장된 객체안의 메소드를 사용한다.

다음은 new를 활용한 코드를 작성한 것이다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	function subject(){};
	var s1 = new subject(); //new 함수()를 통해 객체를 생성해주고 그것을 s1에 입력한다.
	s1.name = 'math'; //s1객체 안에 name : 'math'를 생성한다.
	s1.print = function(){ //s1객체 안에 print : function()을 생성한다.
		return this.name; //this는 이 함수가 속해있는 객체를 가리킨다.
	}
	var s2 = new subject();
	s2.name = 'science';
	s2.print = function(){
		return this.name;
	}
	//s1과 같은 과정이 반복되면서 코드가 중복된다.
	document.write(s1.print()); //출력 : math
	document.write(s2.print()); //출력 : science

</script>
</body>
</html>

여기서 new를 이용하여 함수의 객체를 생성하고 그 다음에 그 객체의 속성을 하나씩 정의해주는 과정이 있는데 이러한 과정이 분리되게 되면 코드의 중복이 일어나 비슷한 동작을 수행하는 코드에서 효율성이 떨어진다.

생성자

new를 활용한 함수의 객체 생성에서 그 함수가 객체를 초기화 하는 기능을 구현하고 있고 new를 활용해여 함수의 객체를 생성한다면 코드의 중복을 피해 더 효율적인 코드가 될 수 있다. 그리고 그 초기화하는 함수를 생성자 라고 말한다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	function subject(name){ //객체를 초기화하고 있다. = 생성자
		this.name = name;
		this.print = function(){
			return this.name;
		}
	}
	var s1 = new subject('math'); //new subject('math')를 통해 subject객체를 만들고 math를 name으로 초기화 시킨 그 객체를 s1에 입력한다.
	var s2 = new subject('science'); //new subject('science')를 통해 subject객체를 만들고 science를 name으로 초기화 시킨 그 객체를 s2에 입력한다.
	document.write(s1.print()); //출력 : math
	document.write(s2.print()); //출력 : science
	//함수에 객체를 초기화하는 기능을 넣고 변수에 new를 통해 객체를 생성하면서 인수로 초기화시켜서 입력해주는 과정을 통해 코드의 중복을 피할 수 있다.

</script>
</body>
</html>

생성자를 통해 더 객체 지향적인 코딩이 가능하고 코드의 중복을 피할 수 있다.

0개의 댓글