Object-Oriented Programming (3)

const Person = function (firstName, birthYear) {
  console.log(this) // Pesron {}

  // 💡 Instance properties
  // will be available on all the instances that are created through this CF.
  this.firstName = firstName
  this.birthYear = birthYear

  // 💡 What if we wanted to add a method to our objects?
  // ❗️❗️ Never create a method inside of a constructor function.
  // 수천,수백개의 오브젝트가 필요할 때, 이런 식으로 다 copy할 순 없으니까!
  // >> that would be terrible for the performance of our code.
  // ✅ prototypes & prototype inheritance 를 이용할 것이다. (201 강의)
  // this.calcAge = function () {
  //   console.log(2037 - this.birthYear);
  // };
}
// = Blueprint

// = Actual house in the real world.
const jonas = new Person('Jonas', 1991)
console.log(jonas) // Person {firstName: 'Jonas', birthYear: 1991}
// new operator = very special operator

const matilda = new Person('Matilda', 2017)
const jack = new Person('Jack', 1975)
console.log(matilda, jack)
// Person {firstName: 'Matilda', birthYear: 2017} Person {firstName: 'Jack', birthYear: 1975}

// 💡 instanceof = this will return true or false.
const jay = 'Jay'
console.log(jay instanceof Person) // false
// becasue we didn't create this varibale(jay).
console.log(jonas instanceof Person) // true

function Person(name, birthYear) {
  this.name = name
  this.birthYear = birthYear
}
console.log(Person.prototype) // {}

const jay = new Person('Jay', 1995)
console.log(jay.__proto__ === Person.prototype) // true

// - this keyword = the object that's calling the method.
console.log(Person.prototype) // {constructor: ƒ}
Person.prototype.calcAge = function () {
  console.log(2037 - this.birthYear) // this > object 가리키게 돼있음.
}
console.log(Person.prototype) // {calcAge: ƒ, constructor: ƒ}
// prototype object에 calcAge라는 method 추가됨!

jonas.calcAge() // 46 (jonas 본인한테는 없지만 __proto__ 타고 올라감)
matilda.calcAge() // 20 (matilda 본인한테는 없지만 __proto__ 타고 올라감)
// 어떻게 이게 가능하냐? >>> Any object always has access to the methods and properties
// from its prototype.인데, jonas/matilda의 prototype = Person.prototype이기 때문.

console.log(jay.__proto__ === Person.prototype) // true

// 💡 Each object has a special property called __proto__.
console.log(jonas.__proto__) // {calcAge: ƒ, constructor: ƒ}
// calcAge가 존재하기 때문에 jonas 오브젝트 자체에 이 메소드가 없어도, prototype에는 있기 때문에 바로 사용할 수 있는 것!!

// 1. 생성자함수에 의해 만들어진 객체의 프로토타입 = jonas.__proto__
// 2. Person의 프로토타입
// => 이 두 개는 같다.
console.log(jonas.__proto__ === Person.prototype) // true

// 위 코드처럼 사실 Person.prototype = Person 함수의 prototype을 뜻하는 게 아니다.
// 이름은 이렇게 지었지만, 자기자신(Person 생성자함수)의 prototype object를 가리키는 게 아니라,
// 🌟Person function에 의해 만들어진 Object들(=jonas, matilda)의 prototype을 가리키는 것!🌟
// 즉, Person.prototypeOfLinkedObjects라고 이름을 바꿔야 make sense할 수 있는 부분!!

// 다시말해, 아래의 결과처럼, Person.prototype은 Person function으로 생성된 오브젝트들의 prototype이다.
// (the prototype of all the objects that are created with the person constructor function.)
console.log(Person.prototype.isPrototypeOf(jonas)) // true ✅
console.log(Person.prototype.isPrototypeOf(matilda)) // true ✅
console.log(Person.prototype.isPrototypeOf(Person)) // false 💥

console.log(Person.prototype === jonas.__proto__) // true ✅

console.log(Person.prototype.isPrototypeOf(jonas)) // true ✅
console.log(Person.prototype.isPrototypeOf(matilda)) // true ✅
console.log(Person.prototype.isPrototypeOf(Person)) // false 💥

console.log(Person.prototype.constructor) // Person function
// constructor와 prototype은 반대 개념이어서 prototype에 constructor을 붙여주면
// Person function으로 다시 돌아온다.

// ✨ If we want to "inspect" that function, we need to use console.dir
// => console.dir: 개발자가 객체의 속성 구조를 확인하고 싶을 때 적합한 명령어 (트리 구조 출력)
// ex. { innerText: "Click Me", id: "", ... } (객체 구조)
// => console.log: 사람이 읽기 좋은 "값" 중심 디스플레이
// ex. <button>Click Me</button>
console.dir(Person.prototype.constructor)
// ƒ Person(firstName, birthYear)

1. 배열의 프로토타입 (Array.prototype)
const arr = [3, 6, 6, 5, 5, 6, 5]; // new Array === []
console.log(arr.__proto__); // the prototype of array
// 🌟All these methods🌟 that we already know. -> fill/filter/find/pop/push/reduce/shift....
// => This is the reason why all the arrays get access to all of these methods.
// 우리가 그동안 어레이 상에서 method를 불러올 수 있었던 이유는 prototype에 이러한 method들이
// 있었기 때문! 물론 각각의 어레이는 이러한 methods를 다 포함하진 않지만, 이러한 methods를
// 어레이의 prototype으로부터 물려받기(상속받기) 때문에 사용 가능한 것.
// (any array inherits all their methods from its a prototype.)
console.log(arr.__proto__ === Array.prototype);
// prototype property of the constructor = prototype of all the objects created by that constructor.

2. 함수의 프로토타입 (Function.prototype)
function 또한 오브젝트이기 때문에 prototype을 갖는다. -> apply/bind/call method를 포함..
=> 그동안 우리가 함수 상에서 이러한 method를 불러올 수 있었던 이유
console.dir(x => x + 1);

console.log(jonas.__proto__) // prototype property of Person(jonas' CF)
console.log(jonas.__proto__.__proto__) // prototype property of Object(Person's CF)
// = Object.prototype (top of the prototype chain)
console.log(jonas.__proto__.__proto__.__proto__) // 💥null
// because object.prototype is usually the top of the prototype chain.

Array.prototype.unique = function () {
  return [...new Set(this)]
}
console.log(arr.unique()) // [3, 6, 5]

Array.prototype.sayHello = function () {
  console.log('Hello from Array!')
}

const arr = [1, 2, 3]
arr.sayHello() // "Hello from Array!"