[JavaScript] New

New

prototype에 대해 블로깅을 하려 했지만, 그전에 new 키워드에 대한 이해도가 필요해 보여서 new에 대한 복습을 했다.

우선 new 키워드의 사용법은 MDN에 다음과 같이 기술되어 있다.

사용법

var [객체명] = new [constructor([arguments])]

new : 빈 객체를 만들어서 생성자(constructor)의 this로 새로운 객체로 만듦

constructor(생성자) : function 이 new 키워드를 만나게 되면 생성자의 기능을 함

 

생성자는 type이 'function' (함수)인 것들만 가능하다.

역할

생성자 함수(Function Constructor)가 하는 일은 class처럼 템플릿으로서 object들을 찍어내는 것이다.

생성자 함수와 new 키워드를 통해 인스턴스를 만들 수 있다.

 

new 키워드를 사용하면 다음과 같은 과정이 일어난다.

1. 빈 객체를 생성

2. 빈 객체의 __proto__ 프로퍼티의 value 값으로 생성자 함수의 prototype object를 참조하도록 설정

3. 생성자 함수를 call()로 invoke 시켜, this가 해당 객체를 지칭하게 함

function Person(name) {
    this.name = name
    this.greet = function(){
        return 'My name is ' + this.name
    }
}

// new 키워드 사용
var person1 = new Person()

// 1. 빈 객체를 생성
var person2 = {}
// 2. 빈 객체의 __proto__ 프로퍼티의 value 값으로 생성자 함수의 prototype object를 참조하도록 설정
person2.__proto__ = Person.prototype
// 3. 생성자 함수를 call()로 invoke 시켜, this가 해당 객체를 지칭하게 함
Person.call(person2)

person1     // Person {name: undefined, greet: ƒ}
person2     // Person {name: undefined, greet: ƒ}

new 키워드를 사용해서 만든 person1 인스턴스와 빈 객체로 만든 person2 인스턴스가 동일한 내용으로 생성이 된 것을 확인할 수 있다.

이점

new 키워드를 사용해서 인스턴스를 만들게 되면 재사용하기 좋고, 가독성 또한 좋아진다.

var person1 = {
    name : 'Jack',
    greet : function () {
        return 'My name is ' + this.name
    }
}

var person2 = {
    name : 'Patric',
    greet : function () {
        return 'My name is ' + this.name
    }
}

var person3 = {
    name : 'John',
    greet : function () {
        return 'My name is ' + this.name
    }

person1.greet()		// My name is Jack
person2.greet()		// My name is Patric
person3.greet()		// My name is John

function Person(name) {
    this.name = name
    this.greet = function(){
        return 'My name is ' + this.name
    }
}

var person1 = new Person('Jack')
var person2 = new Person('Patric')
var person3 = new Person('John')

person1.greet()		// My name is Jack
person2.greet()		// My name is Patric
person3.greet()		// My name is John

위의 두 코드는 동일한 기능을 하는 코드이다.

한눈에 봐도 첫 번째 코드보다 두 번째 코드가 가독성도 좋고, 재사용하기 좋아 보이는 것을 알 수 있다.

 

 

 

※ 잘못된 부분이나 수정해야 할 부분이 있다면 댓글에 남겨주세요~ 바로 반영하도록 하겠습니다!