객체 생성자

객체 생성자

@2024.04.03

객체 생성자

💡

새로운 객체를 만들고, 그 안에 넣고 싶은 값이나 함수들을 구현할 수 있게 해준다.

• 함수의 이름을 대문자로 시작하고, 새로운 객체를 만들 때는 new 키워드를 앞에 붙인다.

• 객체 vs 객체 생성자
  • 객체 : 속성들의 모음으로, 데이터와 해당 데이터에 대한 동작이 포함

    const person{
    	name : 'Jonhn',
    	age : 30
    	say : function(){
    	 console.log(`나는 ${this.age}살 이야.`);
    	};
    	}

  • 객체 생성자 : 객체를 생성하기 위한 함수로, 객체 생성자를 사용하여 동일한 타입의 객체를 여러 개 생성 가능

  function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function(){
  	  console.log(`나는 ${this.age}살 이야.`);
    };
  }
  
  // 객체 생성
  const person1 = new Person('John', 30);
  const person2 = new Person('Jane', 25);
  
  person1.say(); // 나는 30살이야.
  person2.say(); // 나는 25살이야.

프로토타입을 이용한 상속

1. 부모 객체의 생성자 정의 → 공통 속성과 메서드를 포함

2. 자식 객체의 생성자 정의
   → 부모 생성자를 호출하여 부모 객체의 속성을 초기화
   (.call() 이용)

3. 자식 객체의 프로토타입을 부모 객체의 프로토타입으로 설정(Object.create() 이용)
   
   → 이를 통해 자식은 부모의 메서드를 상속받는다.

• 코드 재사용성을 높이고, 객체 간의 관계를 더욱 유연하게 구성 가능하다.

  // 부모 객체 생성자 
  function Animal(type) {
    this.type = type;
  }
  
  // 부모 객체의 메서드 추가
  Animal.prototype.speak = function() {
    console.log(`나는 ${this.type}입니다.`);
  };
  
  // 자식 객체 생성자 
  function Dog(name) {
    Animal.call(this, '개'); // 부모 객체 생성자 호출
    this.name = name;
  }
  
  // 프로토타입 연결(=상속)
  Dog.prototype = Object.create(Animal.prototype);
  
  // 자식 객체의 메서드 추가
  Dog.prototype.bark = function() {
    console.log(`${this.name}가 짖습니다.`);
  };
  
  // 객체 생성
  var myDog = new Dog('멍멍이');
  
  // 부모 객체 메서드 호출
  myDog.speak(); // 출력: 나는 개입니다.
  
  // 자식 객체 메서드 호출
  myDog.bark(); // 출력: 멍멍이가 짖습니다.

  • call(thisArgm, arg1, arg2 …) : 함수를 호출될 때 사용
    • 첫 번째 파라미터(thisArgm) : 함수 내에서 this로 사용될 값 → 함수가 호출될 때 바인딩 될 객체
    • 두 번째 파라미터(arg) : 함수에 전달할 매개변수
  • Object.create() : 새로운 객체를 생성하고, 이 객체의 프로토타입을 지정된 객체로 설정
    • Dog 생성자로 생성된 모든 객체가 Aniaml 객체의 메서드와 속성을 상속받는다.
    • Dog 객체에서 메서드를 호출할 때 먼저 Dog 객체에 해당 메서드가 없으면,
      프로토타입 체인을 따라 부모인 Animal 프로토타입으로 이동하여 해당 메서드를 찾게 된다.