15. Prototype

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
}

/*
Circle 생성자 함수가 생성한 모든 인스턴스가 
getArea 메서드를 공유해서 사용할 수 있도록 프로토타입에 추가한다. 
프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다.
*/

Circle.prototype.getArea = function () {
  return Math.PI * this.radius ** 2;
};

const circle1 = new Circle(1);
const circle2 = new Circle(2);

console.log(circle1.getArea === circle2.getArea);
console.log(circle1.getArea());
console.log(circle2.getArea());

// 생성자 함수
function Person(name) {
  this.name = name;
}

const me = new Person("Lee");

// 결국 Person.prototype과 me.__proto__는 결국 동일한 프로토타입을 가리킨다.
console.log(Person.prototype === me.__proto__); // true

// 객체 리터럴
const obj = {};

// 함수 리터럴
const add = function (a, b) {
  return a + b;
};

// 배열 리터럴
const arr = [1, 2, 3];

// 정규 표현식 리터럴
const regexp = /is/gi;

// obj 객체는 Object 생성자 함수로 생성한 객체가 아니라 객체 리터럴로 생성했다.
const obj = {};

// 하지만 obj 객체의 생성자 함수는 Object 생성자 함수다.
console.log(obj.constructor === Object); // true

1. 빈 객체 생성
// Object 생성자 함수
let obj = new Object();
console.log(obj); // {}

// 객체 리터럴
let obj = {};
console.log(obj); // {}


2. 속성 정의
// Object 생성자 함수
let obj = new Object();
obj.a = 1;
obj.b = 2;
console.log(obj); // {a: 1, b: 2}

// 객체 리터럴
let obj = {a: 1, b: 2};
console.log(obj); // {a: 1, b: 2}


3. 계산된 속성이름
// Object 생성자 함수
let key = "dynamicKey";
let obj = new Object();
obj[key] = 42;
console.log(obj); // { daynamic: 42 }

// 객체 리터럴
let key = "dynamicKey";
let obj = { [key]: 42 };
console.log(obj); // { dynamic: 42 }


4. 원시 값 처리
// Object 생성자 함수
console.log(Object(42)); // Number{42}
conosle.log(Object("hello")); // String{"hello"}

// 객체 리터럴
let obj = { a: 1 };
console.log(obj); // { a: 1 }

const obj = new Object();
obj.x = 1;
cosole.log(obj.constructor === Object); // true
console.log(obj.hasOwnProperty("x")); // true

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  console.log(`Hi! My name is ${this.name}`);
};

const me = new Person("Lee");
const you = new Person("Tak");

me.sayHello(); // Hi! My name is Lee
you.sayHello(); // Hi! My name is Tak

const Person = (function () {
  function Person(name) {
    this.name = name;
  }

  // 생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체
  Person.prototype = {
    // constructor 프로퍼티와 생성자 함수 간의 연결을 설정
    constructor: Person,
    sayHello() {
      console.log(`Hi! My name is ${this.name}`);
    },
  };

  return Person;
})();

const me = new Person("Lee");

// constructor 프로퍼티가 생성자 함수를 가리킨다.
console.log(me.constructor === Person); // true
console.log(me.constructor === Object); // false

function Person(name) {
  this.name = name;
}

const me = new Person("Lee");
// 프로토타입으로 교체할 객체
const parent = {
  // constructor 프로퍼티와 생성자 함수 간의 연결을 설정
  constructor: Person,
  sayHello() {
    console.log(`Hi! My name is ${this.name}`);
  },
};
// 생성자 함수의 prototype 프로퍼티와 프로토타입 간의 연결을 설정
Person.prototype = parent;

// me 객체의 프로토타입을 parent 객체로 교체한다.
Object.setPrototype(me, parent); // ⭐️ 추가과정
// 위 코드는 아래의 코드와 동일하게 동작한다.
// me.__proto__ = parent;

me.sayHello();
// constructor 프로퍼티가 생성자 함수를 가리킨다.
console.log(me.constructor === Person); // ture
console.log(me.constructor === Object); // false

// 생성자 함수의 prototype 프로퍼티가 교체된 프로토타입을 가리킨다.
console.log(Person.prototype === Object.getPrototypeOf(me)); // true

const Person = (function () {
  function Person(name) {
    this.name = name;
  }

  Person.prototype = {
    sayHello() {
      console.log(`Hi! My name is ${this.name}`);
    },
  };

  return Person;
})();

const me = new Person("Lee");

console.log(me.constructor === Person); // false
// 하지만 Person.prototype을 새 객체로 대체하면, 새 객체는 기본적으로 constructor 프로퍼티를 가지지 않으므로, 프로토타입 체인을 따라 Object의 constructor를 참조하게 됩니다. 따라서, 원래의 생성자 함수와의 연결이 끊어지게 됩니다.