Languages/Java Script

[Js] 생성자와 new | javascript의 객체 지향 특징 | 객체

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

생성자와 new

객체

자바스크립트 언어의 속하는 계열의 언어들은 prototype - based programming이라고 부른다.

객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. 객체를 만들어보자.

<script>
      var person = {}
      person.name = 'egoing';
      person.introduce = function(){
          return 'My name is '+this.name;
      }
      document.write(person.introduce());
</script>

위 코드에서 this는 함수가 속해있는 객체 즉 person이라는 변수가 담고있는 객체를 의미한다.

객체를 만드는 과정에 분산되어 있다. 객체를 정의 할 때 값을 셋팅하도록 코드를 바꿔보자.

<script>
    var person = {
        'name' : 'egoing',
        'introduce' : function(){
            return 'My name is '+this.name;
        }
    }
    document.write(person.introduce());
</script>

가독성도 좋고, 내용이 중간에 끼어들거나 변조되는 상황을 조금 방지 할 수 있게 된다.

위와 같이 객체를 다른 이름으로 생성한다고 해보자.

하지만 name이라는 부분과 아래 introduce가 중복된다.

엄연히 다른 데이터가 들어가 있지만 중복되는 부분이 많이 생긴다는 뜻이다.

즉 코드의 양이 많아지고, 유지보수가 어려워지며, 가독성이 떨어지는 현상이 발생하는 것이다.

이렇듯 만약 다른 사람의 이름을 담을 객체가 필요하다면 객체의 정의를 반복해야 할 것이다.

객체의 구조를 재활용할 수 있는 방법이 필요하다. 이 때 사용하는 것이 생성자다.

자바스크립트라는 언어를 함수형 언어라고 하고, 함수라는 언어를 카테고리에서 사용하기까지 한다는 것은

자바스크립트에서 함수가 차지하는 위상을 암시하는 것이다.

자바스크립트를 이해하는 가장 중요한 키워드는 "객체"이기 전에 "함수"이다.

생성자

생성자(constructor)는 객체를 만드는 역할을 하는 함수다.

자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다.

<!DOCTYPE html>
<html>
<head>
	<title>생성자</title>
</head>
<body>
<script type="text/javascript">
	function Person(){}// Person이라는 객체를 함수로 창조. 
	var p = new Person();//new가 붙으면 뒤에 함수를 생성자라고 부름.== 객체의 생성자  
	p.name = 'haeun';
	p.introduce = function(){
		return 'My name is '+this.name; //함수에서 this는 함수가 가르키는 객체 즉 p이다.
	}
	document.write(p.introduce());

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

만일 위 코드에서 new라는 것을 붙이지 않고 입력해본다면, defined라고 출력된다.

이는, 리턴해주는 값이 없기 때문이다.

하지만 new라는 키워드를 붙이면 새로운 객체(비어있는 객체)를 만든 후에 이를 리턴(반환)해준다.

위의 코드는 새로운 객체를 변수 p에 담았다.(Person()이라는 객체는 p에 담은 것)

여러사람을 위한 객체를 만든다면 아래와 같이 코드를 작성해야 할 것이다.

<!DOCTYPE html>
<html>
<head>
	<title>생성자</title>
</head>
<body>
<script type="text/javascript">
	function Person(){}
	var p1 = new Person();//1번째 객체 생성 
	p1.name = 'haeun';
	p1.introduce = function(){
		return 'My name is '+this.name;
	}
	document.write(p1.introduce()+"<br />");

	var p2 = new Person(); //2번째 객체 생성
	p2.name = 'admin';
	p2.introduce = function(){
		return 'My name is '+this.name;
	}
	document.write(p2.introduce());

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

별로 개선된 것이 없다.

생성자 내에서 이 객체의 프로퍼티를 정의하고 있다.

이러한 작업을 초기화라고 한다. 이를 통해서 코드의 재사용성이 대폭 높아졌다.

<!DOCTYPE html>
<html>
<head>
	<title>생성자</title>
</head>
<body>
<script type="text/javascript">
	function Person(name){
		this.name = name;
		this.introduce = function(){
			return 'My name is '+this.name+'<br />';
		}
	}
	var p1 = new Person('haeun'); //1번째 객체 
	var p2 = new Person('admin'); //2번째 객체
	document.write(p1.introduce());
	document.write(p2.introduce());
</script>
</body>
</html>

코드를 통해서 알 수 있듯이 생성자 함수는 일반함수와 구분하기 위해서 첫글자를 대문자로 표시한다.

위 코드를 보면, introduce라는 메소드 코드가 단 한번만 정의하였다. -> 객체가 생성될 때마다 실행되며 만들어지게 되어 코드가 간결해졌다.

자바스크립트 생성자의 특징

일반적인 객체지향 언어에서 생성자는 클래스의 소속이다. 하지만 자바스크립트에서 객체를 만드는 주체는 함수다.

함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은 자바스크립트에서 함수의 위상을 암시하는 단서이면서 또 자바스크립트가 추구하는 자유로움을 보여주는 사례라고 할 수 있다.

'Languages > Java Script' 카테고리의 다른 글

[Js] this \| 함수호출 \| 메소드의 호출 \| allpy, call \| 객체 (0)	2021.02.04
[Js] 전역 객체 \| 전역객체 API (0)	2021.02.04
[Js] 객체지향 \| javascript 객체 지향 프로그래밍 \| 문법 (0)	2021.02.04
[Js] 함수의 호출 \| 자바스크립트 함수 호출 \| apply (0)	2021.02.04

Contents

새소식

인기 검색어

[Js] 생성자와 new | javascript의 객체 지향 특징 | 객체

생성자와 new

객체

생성자

자바스크립트 생성자의 특징

'Languages > Java Script' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바