javascript - 생성자와 new

김동하·2020년 9월 19일
0

javascript

목록 보기
15/58

object

객체란 서로 연관된 변수와 함수를 그룹핑한 것. 객체 내 변수는 프로퍼티 / 함수는 메서드

const person = {}

person.name = "dongha"
person.introduce = function(){
  return "my name is " + this.name
}
console.log(person.introduce()) // my name is dongha

person 이라는 객체를 만들고 프로퍼티 name과 메서드 introduce를 할당했다. introduce의 함수에는 this.name을 포함한 string을 리턴한다. 여기서 this는 this가 속한 함수의 객체를 지칭한다. 이제 person 객체 안에 프로퍼티와 메서드를 넣어서 응집성을 높여주면 된다.


let person = {
    'name' : 'dongha',
    'introduce' : function(){
        return 'My name is '+this.name;
    }
}

만약 하나의 객체를 더 만든다고 가정했을 때 중복이 발생한다.


let person1 = {
    'name' : 'dongha',
    'introduce' : function(){
        return 'My name is '+this.name;
    }
}

let person2 = {
    'name' : 'dongeun',
    'introduce' : function(){
        return 'My name is '+this.name;
    }
}

중복을 제거하는 방법이 생성자 new다.

생성자(Constructor)

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

function Person(){}

const p = new Person();

p.name = 'dongha';
p.introduce = function(){
    return 'My name is '+this.name; 
}
console.log(p.introduce());

Person()이라는 함수를 만들고 변수 p를 new Person()에 할당했다. 이제 p 는 Person {}이거다. 즉 비어있는 객체다. 이것은 객체 리터럴을 통해 객체를 만든 것과 동일하다. let p = {}

여기서 중요한 것은 함수 Person()에 new를 붙이고 호출하면 객체를 반환한다. 다른 언어와 다르게 생성자는 그냥 함수.

function Person(name){
    this.name = name;
    this.introduce = function(){
        return 'My name is '+this.name; 
    }   
}
const p1 = new Person('dongha');
console.log(p1.introduce()); // My name is dongha 
 
const p2 = new Person('dongeun');
console.log(p2.introduce()); // My name is dongeun

이렇게 바꿀 수 있다. Person이란 함수를 만들고 name을 파라메터로 받게 한다. 그리고 그 안에 필요한 프로퍼티와 메서드를 포함시킨다.

변수 p1과 p2를 만들고 생성자 함수를 통해 dongha, dongeun이라는 인자를 줘서 객체를 만들면 된다.

introduce 메서드를 한 번만 정의하면 된다. 생성자는 객체에 대한 초기화를 한다.

출처 : https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/lecture/2551?tab=note

profile
프론트엔드 개발

0개의 댓글