본문 바로가기

JAVASCRIPT

생성자와 new 객체지향

객체를 만드는 것을 다시 복습해봅니다.

 

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