자바스크립트의 프로토타입

거의 모든 것이 Javascript의 객체입니다.

함수는 특수한 종류의 객체이기는 하지만 Javascript의 객체이기도 합니다.

예:

     function sum(a,b) {
        return a+b;
     }
     console.log(typeof sum); // "function"  :)
     Still an object with internal [[call]] method

따라서 함수에 대해 다음을 수행할 수 있습니다.
예:

    sum.prop1 = "random property";
    console.log(sum.prop1); // "random property"

유사하게, "prototype"은 Javascript의 함수에 내장된 속성입니다(이전 버전과의 호환성 문제로 인해 프로토타입 속성이 함수인 Function 함수 제외).

메모:
"프로토타입"자체는 해당 기능 종류의 객체입니다.
예:

   console.log(typeof sum.prototype); // "object"

이제 자바스크립트에서 객체를 생성하는 한 가지 방법은 "new"키워드를 사용하여 함수를 호출하는 것입니다(주로 생성자 함수 사용).

예:

    function Person(name, age) {
       this.name = name;
       this.age = age;
    }
    const p1 = new Person("John", 25);
    console.log(typeof p1); // "object"

이제 "p1"개체와 "Person.prototype"개체의 생성자 속성을 보면 "Person"함수와 같습니다.

예:

    p1.constructor === Person // true
    Person.prototype.constructor === Person // true

이것은 함수 객체의 "prototype"속성이 함수 자체를 참조한다는 것을 증명합니다.

프로토타입 사용:
프로토타입 체인을 따라 상속되어야 하는 함수의 속성은 "프로토타입"개체 내부에 정의되어 있습니다. 프로토타입으로 인해 Javascript에서 상속이 가능합니다.

예: Person의 "prototype"객체에 getInfo 속성을 정의합시다.

Person.prototype.getInfo = function() {
   return `I am ${this.name}, age ${age}`;
}
const p2 = new Person("Sam", 30);
console.log(p2.getInfo()); // "I am Sam, age 30"

"getInfo"는 Person의 "prototype"에 정의되어 프로토타입 체인을 따라 상속 가능한 속성이 되기 때문에 "p2"개체 또는 Person을 상속하는 생성 함수에서 생성된 모든 개체에서 "getInfo"속성에 액세스할 수 있습니다.

참고: "p2"개체가 기술적으로 "getInfo"속성에 액세스하는 방법이 궁금하다면 개체가 자체적으로 속성을 찾지 못하면 다음 방법을 사용하여 프로토타입 개체에서 찾기 때문입니다.

p2.__proto__ === Person.prototype 
        // true -- soon to be deprecated, not recommended
Object.getPrototypeOf(p2) === Person.prototype  
        // true -- recommended