프로토타입의 동작

객체의 프로토타입 출력

• 객체의 프로토타입 출력하는 방법으로는 __proto__ 와 Object.getPrototypeOf() 가 있다.

  function A() {};
    
  let obj = new A();
    
  console.log(obj.__proto__); // A()
  console.log(Object.getPrototypeOf(obj));  //A()
  console.log(obj.__proto__ === Object.getPrototypeOf(obj)); // true
  

new 연산자의 내부 동작

• 내부적으로는 빈 객체를 생성한 후에 같은 이름의 “프로토타입 객체”를 새로운 객체의 원형(프로토타입)으로 설정.

  function Add(a, b) {
      this.a = a;
      this.b = b;
  }
  Add.prototype.plus = function() {
      return this.a + this.b;
  }
    
  const add = new Add(111, 222);
  console.log(add.plus()); // 333;
    
  // 내부동작
  const newObj = {};
  newObj.__proto__ = Add.prototype;
  Add.apply(newObj,[111, 222]); // 인자 값들을 하나로 묶어서 적용해줘야함.
  console.log(newObj.plus()); // 333
    
  

  정리

  • 생성자 함수와 new 연산자에 의해 새로운 객체 생성합니다.
  • 편리한 장점으로는 객체의 생성과 새로운 객체의 원형(프로토타입)을 지정합니다.
  • 뿐만 아니라, 괄호안에 (111, 222)와 같은 초기화 값을 생성시에 편리하게 지정할수 있습니다. => 새로운 객체 인스턴스를 생성합니다.

생성자 함수와 내부에서 처리되는 동작들

• 객체 리터럴

  const animal = {
      name: 'tiger',
      age: 20
  }
    
  console.log(animal.name, animal.age); // tiger 20
  

  • 위와 비슷한 객체의 동물을 수십, 수백개 만들어야 하는 상황이라면?
  • 이런 상황을 대비하여 위와 같은 비슷한 객체를 생성해주는 생성자 함수를 만들어 놓고 사용합니다.

• 생성자 함수

  • 첫 글자는 관례적으로 대문자로 작성합니다.
  • 새롭게 생성되는 객체 자신을 가리키는 것입니다. (this 사용)
  • new 연산자를 사용해서 새로운 객체를 생성합니다.

  function Person(name, age) {
      this.name = name;
      this.age = age;
  }
    
  let p1 = new Person('홍길동', 20);
  let p2 = new Person('이순신', 30);
  let p3 = new Person('강감찬', 40);
  

  정리

  • 생성자 함수는 비슷한 객체를 만들어내는 “공장” 이라고 생각합시다.

  생성자 함수의 내부 실행 과정

  function Person(name, age) {
     // this = {}; // this라는 빈 객체를 하나 생성한 후에 속성을 추가
      this.name = name;
      this.age = age;
     // return this;
  }
  

  • new 연산자를 사용하여 새로운 객체를 생성시에는 생성자 함수 내부에서 위와 같은 처리로 새로운 객체가 생성됩니다.