본문 바로가기

UI개발

자바스크립트 객체지향 - 생성자와 new

기본적인 객체 생성

var person = {}
person.name = '이름';
person.introduce = function(){
	return 'My name is ' + this.name;
}

/*
	위의 코드는 객체를 만드는 과정이 분산되어 있다.
	객체를 정의할 때 값을 셋팅하면 가독성이 좋고, 변질될 위험이 줄어든다.
*/
var person = {
    person.name = '이름';
    person.introduce = function(){
        return 'My name is ' + this.name;
    }
}

 

person (this)

name (property)

introduce (method)

 

 

중복된 코드가 있다는 것은 코드의 양이 많아지고, 유지보수가 힘들고, 가독성이 떨어진다는 것

var person1 = {
    person.name = '이름';
    person.introduce = function(){
        return 'My name is ' + this.name;
    }
}

var person2 = {
    person.name = '이름';
    person.introduce = function(){
        return 'My name is ' + this.name;
    }
}

 

생성자(constructor) new를 통해 중복을 제거

function person() {}

var p1 = new Person();
var p2 = new Person();

p1.name = '이름';
p1.introduce = function(){
    return 'My name is ' + this.name;
}

p2.name = '이름이름';
p2.introduce = function(){
    return 'My name is ' + this.name;
}

 

 

초기화를 통해 중복 제거

function Person(name) { // 생성자 함수는 일반 함수와 구분하기 위해 첫 글자를 대문자로 표시한다.
    this.name = name;
    this.introduce = function(){
        return "My name is " + this.name;
    }
}

var p1 = new Person("이름");
var p2 = new Person("이름이름");