반응형
객체
객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다.
var person = {}
person.name = 'jin seok';
person.introduce = function(){
return 'My name is '+this.name;
}
document.write(person.introduce());
위의 코드는 person이라는 객체와 밑의 코드들이 분리되어 있어 가독성이 떨어지고 중간에 다른 코드가 끼어있을 우려가 생긴다. 즉 객체를 만드는 과정에 분산되어 있다고 볼 수 있다.
객체를 정의 할 때 값을 셋팅하도록 코드를 바꿔보자.
↓
var person = {
'name' : 'jin seok',
'introduce' : function(){
return 'My name is '+this.name;
}
}
document.write(person.introduce());
위의 코드처럼 객체의 중괄호 안에 프로퍼티(property)와 메소드(method)을 넣어주어 직접 정의주어 가독성과 중간에 다른 코드가 끼어들 우려를 방지 할 수있다.
생성자
- 만약 다른 사람의 이름을 담을 객체가 필요하다면 객체의 정의를 반복해야 할 것이다. 객체의 구조를 재활용할 수 있는 방법이 필요하다. 이 때 사용하는 것이 생성자(constructor)다.
- 생성자는 객체를 만드는 역할을 하는 함수이며 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다.
function Person(){}
var p = new Person();
p.name = 'jin seok';
p.introduce = function(){
return 'My name is '+this.name;
}
document.write(p.introduce());
- 함수를 호출할 때 new을 붙이면 새로운 객체를 만든 후에 이를 리턴한다. 위의 코드는 새로운 객체를 변수 p에 담았다.
- 예를 들자면 마치 var p = {}의 객체를 따로 만들었다고 볼 수 있다.
여러사람을 위한 위한 객체를 위해서 아래와 같이 코드를 짤 수 있다.
function Person(){}
var p1 = new Person();
p1.name = 'jin seok';
p1.introduce = function(){
return 'My name is '+this.name;
}
document.write(p1.introduce()+"<br />");
var p2 = new Person();
p2.name = 'kim';
p2.introduce = function(){
return 'My name is '+this.name;
}
document.write(p2.introduce());
하지만 코드만 길어지고 개선된 바가 없다.
코드를 응집시켜보자.
↓
function Person(name){
this.name = name;
this.introduce = function(){
return 'My name is '+this.name;
}
}
var p1 = new Person('jin seok');
document.write(p1.introduce()+"<br />");
var p2 = new Person('kim');
document.write(p2.introduce());
- 생성자 내에서 이 객체의 프로퍼티를 각각 새롭게 정의하고 있다. 각각 새로운 정의를 해주니 매우 효율적으로 한꺼번에 작업이 가능해졌으며 코드의 재사용성 또한 대폭 높아졌다. 이러한 작업을 초기화라고 한다.
- 위의 코드를 통해서 알 수 있듯이 생성자 함수는 일반함수와 구분하기 위해서 첫글자를 대문자로 표시한다.
자바스크립트 생성자 특징
일반적인 객체지향 언어에서 생성자는 클래스의 소속이다. 하지만 자바스크립트에서 객체를 만드는 주체는 함수다. 함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은 자바스크립트에서 함수의 위상을 암시하는 단서이면서 또 자바스크립트가 추구하는 자유로움을 보여주는 사례라고 할 수 있다.
반응형
'프로그래밍 개발 > JS 기본 언어' 카테고리의 다른 글
Javascript this (0) | 2020.11.13 |
---|---|
Javascript 전역개체에 대하여 (0) | 2020.11.13 |
Javascript 객체 지향 프로그래밍에 대하여 (0) | 2020.11.12 |
Javascript 함수의 호출 (0) | 2020.11.12 |
Javascript 클로저 (0) | 2020.11.10 |
댓글