객체를 만드는 것을 다시 복습해봅니다.
let person = {} -------- object
person.name = 'egoing'; --------- name (프로퍼티)
person.introduce = function(){ -------- 프로퍼티에 함수가 담겨 있습니다. 이것이 메소드입니다.
return 'My name is '+this.name; 여기서 this는 person을 의미합니다. this.name은 egoing을 의미합니다.
}
document.write(person.introduce());
이과정이 분산되어 있습니다. 코드를 바꿔봅니다.
let person = {
'name' : 'egoing',
'introduce' : function(){
return 'My name is '+this.name;
}
}
document.write(person.introduce());
만약에 person을 여러개 만든다면
let person1 = {
'name' : 'egoing',
'introduce' : function(){
return 'My name is '+this.name;
}
}
let person2 = {
'name' : 'leezche',
'introduce' : function(){
return 'My name is '+this.name;
}
}
즉 중복이 발생합니다. 유지보수 힘들고 코드량이 많아지고 문제가 많습니다.
이문제를 해결하는 방법은 new를 이용하는 것입니다.
생성자(constructor)는 객체를 만드는 역활을 하는 함수다.
function person(){}
undefined
let p0=person();
undefined
p0
undefined
function person() 이값은 어떠한 값도 리턴하지 않기 때문에
p0을 호출하면 어떠한 값도 존재 하징 않습니다.
let p0= new person ();
let p =new person();
undefined
p
person {}
이렇게 출력됩니다.
person {} 비어있는 객체라는 뜻입니다.
new person(); 호출하게 되면 이 함수는 생성자라고 합니다.
무엇을 생성하냐면 객체의 생성자 입니다. 비어있는 객체를 만들고 그 객체를 반환하기 때문에
즉 let p ={ } 이걸 뜻합니다.
다시말하면 함수에 new를 붙이면 객체가 됩니다.
function Person(){}
let p = new Person();
p.name = 'egoing';
p.introduce = function(){
return 'My name is '+this.name;
}
document.write(p.introduce());
여기서 p는 빈객체가 되기때문에
p.introduce = function () {
return 'My name is _ this.name'
}
익명 함수를 프로퍼티에 넣으게 되면 메소드가 됩니다.
앞에 보여드렸던 {} 객체 리터럴
객체를 만들었을 때와 똑같습니다.
function Person(){}
var p1 = new Person();
p1.name = 'egoing';
p1.introduce = function(){
return 'My name is '+this.name;
}
document.write(p1.introduce()+"<br />");
var p2 = new Person();
p2.name = 'leezche';
p2.introduce = function(){
return 'My name is '+this.name;
}
document.write(p2.introduce());
function Person(){}
var p1 = new Person();
p1.name = 'egoing';
p1.introduce = function(){
return 'My name is '+this.name;
}
document.write(p1.introduce()+"<br />");
var p2 = new Person();
p2.name = 'leezche';
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('egoing');
document.write(p1.introduce()+"<br />");
var p2 = new Person('leezche');
document.write(p2.introduce());
var p1 = new Person('egoing'); 생성자 함수입니다. 여기서 egoing은 name 인자에 들어가게 됩니다.
this.name = egoing이 됩니다.
즉 이객체에 name 이라는 프로퍼티의 값은 name 이 됩니다.
이것들이 다실행되서 p1에 담겨지게 됩니다.
this.introduce = function () {
return 'My name is _ this.name'
}
이코드가 객체가 생성될때마다 실행되면서 만들어지고 있기때문에 한번만 정의하게 되면
그다음 부터 정의하지않게 됩니다. 생성자가 하는 일은 초기화가 됩니다. 객체에 대한 초기화 입니다.
init 이라고 합니다
이 포스팅은 생활코딩을 참고해서 포스팅 하였습니다. egoing님 감사합니다.
'JAVASCRIPT' 카테고리의 다른 글
this 객체로서의 함수 (0) | 2020.11.05 |
---|---|
this (0) | 2020.11.05 |
함수 호출 (0) | 2020.11.04 |
매개변수의 수 (0) | 2020.11.03 |
arguments (0) | 2020.11.03 |