.png)
Javascript Object
자바스크립트에서 객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다.
객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다.
객체를 만들어보겠다.
var person = {}; // 'person'이라는 변수에 객체 생성
person.name = 'daseul'; // 'person'객체의 'name'이라는 속성값에 value를 'daseul'로 지정
person.introduce = funtion(){ // 'person'객체의 'introduce' 속성값에 메소드 함수 지정
return 'My name is' + this.name; // 여기서 this는 객체 'person'의미
}
document.write(person.introduce());
// 결과 'My name is daseul'이 출력또 다른 방법
var person = {
'name' : 'daseul',
'introduce' : function(){
return 'My name is' + this.name;
}
}
document.write(person.introduce());
// 결과 'My name is daseul'이 출력이렇게 객체를 만들게되면 만약 다른 사람의 이름을 담을 객체가 필요할 때 객체의 정의를 반복해야 할 것이다.
객체의 구조를 재활용할 수 있는 방법이 필요하다.
이 때 사용하는 것이 생성자다.
생성자
생성자(constructor)는 객체를 만드는 역할을 하는 함수이다.
자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다.
function Person(){}; //'person'이라는 빈 함수 생성
var p1 = new Person(); // 함수에 new를 붙이면서 빈 객체로 만들고 그것을 변수 p1에 할당
p1.name = 'daseul'; // p1객체의 'name'이라는 속성값에 'daseul' 지정
p1.introduce = function(){ // p1객체의 'introduce'라는 속성값에 메소드 지정
return 'My name is 'this.name';
}
document.write(p1.introduce()+"<br/>");
// 'My name is daseul'이 출력된다. 함수를 호출할 때 new를 붙이면 새로운 객체를 만든 후에 이를 리턴한다.
위의 코드는 새로운 객체를 변수 p1에 담았다.
여러사람들 위한 객체를 만든다면 다음과 같이 코드를 작성할 것이다.
function Person(){};
var p1 = new Person();
p1.name = 'daseul';
p1.introduce = function(){
return 'My name is 'this.name';
}
document.write(p1.introduce()+"<br/>");
var p2 = new Person();
p1.name = 'bada';
p1.introduce = function(){
return 'My name is 'this.name';
}
document.write(p1.introduce()+"<br/>");하지만 앞서 썼던 코드에서 별로 개선된 것이 없다.
function Person(name){ //'Person'이라는 함수 정의
this.name = name; // 여기에서 'this'는 함수가 호출될때마다 값이 변한다.
this.introduce = function(){
return 'My name is' + this.name;
}
}
var p1 = new Person('daseul'); //'Person'함수에 new를 붙이면서 객체를 만드는 생성자가 된다. 이것을 p1에 할당.
document.write(p1.introduce()+"<br/>");
var p2 = new Person('bada'); // 위와 동일
document.write(p2.introduce()+"<br/>");이렇게 함수를 생성자로 만드는 것을 초기화라고 한다.
이를 통해 코드의 재사용성이 높아진다.
정리💡
생성자 함수의 역할은 같은 값과 동작을 공유하는 객체를 여러개 만드는 것에 있다.
기본적으로 생성자 함수는 기본 속성과 속성 메소드를 갖춘 객체를 생산해내는 쿠키틀과 같은 것이다.
new 키워드를 사용하면 자바스크립트가 생성자 함수 내에 있는 this의 값을 새로 만들어진 객체로 설정함으로써 생성자 함수는 일반 함수와는 다른 특수한 동작을 수행한다.
특수한 동작을 한 생성자 함수는 기본값을 새로 만든 객체(this)로 반환한다.
생성자 함수가 반환한 새로운 객체는 객체를 만든 생성자 함수의 인스턴스(instance)라고 부른다.
(👩🏻💻✏️ 생성자 함수는 객체를 만드는 틀! 첫글자는 대문자로 시작한다.
new를 통해 함수를 호출하면 그 인자값들을 통해 새로운 객체들이 만들어짐!
이 틀인 함수를 통해 비슷한 속성값들을 갖는 객체를 여러번 정의하는 것이 아니라
인자를 통해 호출만으로도 쉽게 객체를 만들수 있다!
(이게 맞나..이렇게 이해하면 편할것같다))
