[Javascript] 객체 생성

개발새발🦶·2022년 11월 3일
0
post-thumbnail
post-custom-banner

생성자 함수를 사용하여 객체를 생성하는 방식


📌Object 생성자 함수

new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.

// 빈 객체 생성
const person = new Object();

// 프로퍼티 추가
person.name = 'Lee';
person.sayHello = function (){
  console.log('Hi! name is' + this.name);
}

console.log(person);
person.sayHello();
  • 생성자 함수란 new연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말함
  • Object 생성자 함수 외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다.
  • 자주 쓰이진 않는다.
// string
const strObj = new String('lee');  // object
console.log(strObj)	 // String {"lee"}

// Function
const func = new Function('x', 'return x * x');  // function
console.log(func)  // f anonymous(x)

📌생성자 함수

생성자 함수는 프로퍼티 구조가 동일한 객체 여러개를 간편하게 생성할 수 있다.

// 생성자 함수
function circle(radius){
  this.radius = radius;
  this.getD = function(){
    return 2 * this.radius
  }
}

// 인스턴스 생성
const circle1 = new Circle(5);
const circle2 = new Circle(10);

생성자 함수 인스턴스 생성 과정

  1. 인스턴스 생성과 this 바인딩 - 암묵적으로 빈 객체 생성
  2. 인스턴스 초기화 - 코드가 한 줄씩 실행되어 this에 바인딩 인스턴스 초기화
  3. 인스턴스 반환 - 함수 내부 처리가 끝나면 완성된 인스턴스가 바인딩 된 this를 암묵적으로 반환

new연산자

new연산자와 함께 함수를 호출하면 해당 함수는 생성자 함수로 동작한다. 내부 메서드 Construct가 호출된다. 반대로 new연산자 없이 함수를 호출하면 일반함수(Call)가 호출된다.

new.target

new.target은 this와 유사하게 Constructor인 모든 함수 내부에서 암묵적인 지역 변수와 같이 사용되며, new연산자와 함께 생성자 함수로서 호출되면 함수 내부의 new.target은 자기자신을 가르킨다. new연산자 없이 호출되면 undefined이다.

profile
발로하는 코딩 정리기
post-custom-banner

0개의 댓글