객체 생성

 

모던 자바스크립트 Deep Dive 참고하여 작성하였습니다.

[17장]-프로퍼티 어트리뷰트

 

객체 생성 방법🤔

객체 생성 방식에는 여러가지가 있다.

첫째로 Object 생성자 함수 - new Object로 생성하는 방법✏️

const method = new Object();
method.name = "sun"; //프로퍼티 추가
console.log(method); //{name: 'sun'}

근데 이런 방법보다 객체 리터럴로 생성하는게 훨씬 더 간편함 . 이 방법은 굳이다.

 

두번째 - 객체리터럴  사용✏️

const literalObject = {
  age: 2,
  getMyAge() {
    return this.age * 2;
  },
};


const similarLiteralObject = {
  age: 10,
  getMyAge() {
    return this.age * 2;
  },
};
console.log(literalObject.getMyAge());

이건 객체 리터럴 방식으로 생성한 객체이다. 

간편하다는 장점이 있다. 하지만 단점도 존재한다.

 

밑에 두개의 객체는 구조가 동일하다. 값은 달라도 특히 getMyAge메서드는 완전히 동일하다.

객체 리터럴을 쓰면 구조가 동일해도 계속 반복해야한다.   

cf)위에 두개의 객체는 애초에 다른 객체기 때문에, 동적 프로퍼티 변경과는 관계 없음..

 

그럴때 생성자 함수를 이용한다.  (템플릿처럼 사용!!) 

 

세번째 - 생성자 함수✏️

//함수명 대문자로 작성 (일반 함수랑 구분을 위해)
function ObjectFunctoion(age) {
  this.age = age,
    this.getMyAge = function () {
      return age * 2;
    };
}

const age1 = new ObjectFunctoion(5);
const age2 = new ObjectFunctoion(10);
console.log(age1.getMyAge()); //10
console.log(age2.getMyAge()); //20

여기서 중요한 점은 생성자 함수를 호출할 때 new를 붙여야 한다는 점이다. 

const age2 = ObjectFunctoion(10);
console.log(age2); //undefined

이렇게 new를 안붙이면 생성자 함수가 아닌 , 일반 함수처럼 동작한다. 즉 undefinde를반환함 

 

생성자 함수의 동작 과정

 

1. 인스턴스(객체) 생성 + this 바인딩

암묵적으로 빈 객체(인스턴스) 생성, 생성 이후 this 바인딩

cf)바인딩: 식별자와 값을 연결하는 과정. 예를들어 <변수선언을 한다 = 식별자와 메모리공간의 주소를 바인딩한다>

 

2.인스턴스 초기화 

this와 바인딩 되어있는 객체를 초기화함

 

3. 인스턴스 반환 

생성자 함수 내부 처리가 끝나면 객체가 바인딩된 this 암묵적으로 반환

function ObjectFunctoion(age) {
// 1. 인스턴스 생성 , this바인딩
// 2. this에 바인딩되어 있는 인스턴스 초기화 
  this.age = age,
    this.getMyAge = function () {
      return age * 2;
    };
    
// 3.완성된 인스턴스가 바인딩된 this가 암묵적으로 반환됨    
}

//4. 인스턴스 생성!! 생성자 함수는 암묵적으로 this반환
const age1 = new ObjectFunctoion(5);

 

 

생성자 함수와 일반 함수의 차이🤔

function foo() {}
//일반 함수로서 호출 (Call 호출)
foo()
//생성자 함수로서 호출 (Construct호출)
new foo()

 

callable - [[Call]]을 갖는 함수 , 모든 함수 객체는 call이 구현되어있음

constructor - [[Counstruct]]를 갖는 함수 ,  JS에서는 함수 선언문, 함수 표현식, class 모두 기본적으로 [[Construct]]를 갖는다.

non-constructor - [[Counstruct]]를 갖지 않는 함수 , 화살표함수

 

 

new 연산자 없이 생성자 함수 호출=> 일반 함수로서 호출

function ObjectFunctoion(age) {
  (this.age = age),
    (this.getMyAge = function () {
      return age * 2;
    });
}
const age1 = ObjectFunctoion(5);

console.log(age1); //undefined (new를 안붙임.일반함수로 호출)
console.log(age); //5, 일반 함수내부의 this는 전역 객체
console.log(getMyAge()); //10