자바 스크립트에서의 객체 생성 방법

자바의 경우 new 를 통하여 객체 생성

 

class Student{

     int age;

     String name;

}

Student student = new Student();

 

객체 기반 언어인 자바스크립트에서는 다양한 방법으로 객체를 생성할 수 있다.

객체 리터럴

• 1. Object 생성자 함수
• 2.생성자 함수
• 3.Object.create 메서드
• 4. 클래스(ES6)

 

1. 객체 리터럴 방식(Object Literal)

 

객체 리터럴은 중괄호 안에 프로퍼티를 정의하여 객체를 생성

 var obj = { key: value, ... }  : 

변수처럼 객체를 생성하는 방식으로, 중괄호 { } 안에 key:value를 쉼표(,)로 구분하여 만든다.

 

약 중괄호 안에 프로퍼티를 정의하지 않으면 빈 객체가 생성된다.

클래스를 정의하거나 new 연산자를 사용하지 않더라도 손쉽게 객체를 생성

var person = {
  name: 'Lee',
  sayHello: function () {
    console.log(`Hello! My name is ${this.name}.`);
  }
}

var person = {}

2) Object() 생성자 함수

new 키워드를 이용하여 Object 생성자 함수를 호출하면 비어있는 객체를 얻을 수 있습니다.

var person = new Object();
console.log(person.name)
console.log(person.email)
console.log(person.birth)

person.name = "victolee";
person.email = "asdf@example.com";
person.birth = "0225";
console.log(person.name)
console.log(person.email)
console.log(person.birth)

new Object()를 호출하면 비어있는 객체를 생성합니다.

따라서 객체 생성직후 person 객체에는 name, email, birth 프로퍼티를 갖고 있지 않으므로, new Object()로 비어있는 객체를 생성했으면 프로퍼티를 추가해줘야 합니다.

 

3) 생성자 함수

 

생성자 함수를 사용하면 Java나 C++의 Class처럼 껍데기를 만들 수 있습니다.

기존 함수에 new 연산자를 붙여서 호출하면, 해당 함수는 생성자 함수로 동작합니다.

그런데 함수가 일반적인 함수인지 객체를 만들기 위한 목적의 생성자 함수인지 구분하기 위해, 생성자 함수의 첫 문자는 대문자로 표기하는 것이 관례입니다.

function Person(name,email){
    this.name = name;
    this.email = email;
    this.walk = "직립 보행"
}

var person1 = new Person("victolee", "foo@example.com");
var person2 = new Person("worrr", "goo@example.com");

console.log(person1.name + " " + person1.email + " " + person1.walk);
console.log(person2.name + " " + person2.email + " " + person2.walk);

리터럴과 Obejct()로 객체를 생성하는 것과 달리, 생성자 함수를 통해 객체를 생성하면 같은 속성을 가진 객체를 여러 개 생성할 수 있습니다.

즉, person1과 person2 객체는 name, email, walk 프로퍼티를 갖게 되며, 이 방식은 클래스를 통해 객체를 생성하는 것과 유사하죠.

 

또한 생성자 함수에서 정의한 this는 생성자 함수로 생성된 인스턴스가 됩니다.

사실 생성자 함수로 인스턴스를 생성하기 전에, 먼저 비어있는 객체를 생성합니다.

this는 이 비어있는 객체를 가리키고, 그 객체에 name, email, walk 프로퍼티를 추가한 것입니다.

생성자 함수에 반환 값이 없으면 비어있는 객체에 새로운 프로퍼티를 추가한 this가 반환됩니다.

 

일반 함수와 생성자 함수의 차이점은 new 연산자를 붙이느냐의 차이입니다.

생성자 함수인데 new를 붙이지 않는다면 오류를 발생합니다.

이러한 경우를 대비해서 생성자 함수를 호출할 경우 새로운 객체를 만들도록 분기문을 작성하곤 합니다.

function foo(arg){
    if(!(this instanceof foo)){
        return new foo(arg);
    }
    this.value = arg ? arg : -99;
}

let a = new foo(10);
let b = foo(100);

console.log(a);
console.log(b);

위의 예제는 변수 b의 경우 생성자 함수 foo를 호출했지만 new 연산자를 붙이지 않은 경우입니다.

foo() 함수를 호출했을 때 this는 전역 객체 window이며, window는 foo의 인스턴스가 아니므로 생성자 함수를 호출하도록 new foo(arg)를 호출하도록 작성한 코드입니다.

 

 

4.Object.create() 메소드를 이용한 객체의 생성

 

Object.create() 메소드를 이용하여 객체를 생성할 수도 있습니다.

Object.create() 메소드는 지정된 프로토타입(prototype) 객체와 프로퍼티를 가지고 새로운 객체를 만들어 줍니다.

따라서 이 메소드를 이용하면 사용자가 프로토타입 객체를 직접 명시할 수 있으므로, 상당히 유용하게 사용됩니다.

문법

Object.create(프로토타입객체[, 새로운객체의프로퍼티1, 새로운객체의프로퍼티2, ...]);

 

Object.create() 메소드의 첫 번째 인수로는 프로토타입으로 사용할 객체를 전달합니다.

두 번째 인수로는 새로운 객체의 추가할 프로퍼티 정보를 전달합니다.

 

예제

var obj = Object.create(null, {             // null 프로토타입을 사용하여 새로운 객체를 만들고

    x: { value: 100, enumerable: true },    // x좌표를 나타내는 열거할 수 있는 프로퍼티와

    y: { value: 200, enumerable: true }     // y좌표를 나타내는 열거할 수 있는 프로퍼티를 추가함.

});

obj.x;                      // x좌표

obj.y;                      // y좌표 

Object.getPrototypeOf(obj); // 객체의 프로토타입을 반환해 줌.