11. 프로토타입

11-1. 프로토타입 사용 사례

11-2. 프로토타입의 정의

11-2-1. 생성자 함수와 프로토타입

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

// 프로토타입에 메서드 추가
Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

// 객체 생성
const person1 = new Person('Alice');
const person2 = new Person('Bob');
// 메서드 호출
person1.greet(); // 출력: Hello, my name is Alice
person2.greet(); // 출력: Hello, my name is Bob

11-2-2. 생성자와 프로토

function Taiyaki(){
    this.filling = "팥";
}

const taiyaki1 = new Taiyaki();
const taiyaki2 = new Taiyaki();
//taiyaki1의 프로토에 산입
taiyaki1.__proto__.setFilling = function(ReFilling){
    this.filling = ReFilling
		return this.filling+"으로 채운다"
}
//taiyaki1의 포로토타입에 산입
taiyaki1.eat = function(newFilling){
		return this.filling + "을 먹다"
}



console.log(taiyaki1.setFilling("크림")) // 크림으로 채운다
console.log(taiyaki1.eat()) // 크림 먹다



console.log(taiyaki2.setFilling("치즈")) // 치즈으로 채운다
console.log(taiyaki2.eat()) // 에러

taiyaki1.__proto__.setFilling = function(ReFilling){
    this.filling = ReFilling
		return this.filling+"으로 채운다"
}

taiyaki1.eat = function(newFilling){
		return this.filling + "을 먹다"
}

11-2-3. 같은 값을 가진 프로토

function Person(name) {
    this.name = name;
}
let person = new Person('John');
console.log(person.__proto__=== Person.prototype); // true

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

// 부모 생성자 함수의 프로토타입에 메서드 추가
Animal.prototype.sayName = function() {
    console.log(`I am ${this.name}`);
};

// 자식 생성자 함수
function Dog(name, breed) {
    Animal.call(this, name); // 부모 생성자 호출
    this.breed = breed;
}

// 자식 생성자 함수가 부모 생성자 함수의 프로토타입체인을 상속 
Dog.prototype = Object.create(Animal.prototype);

// 자식 생성자 함수에 추가된 메서드
Dog.prototype.bark = function() {
    console.log('Woof!');
};

// 객체 생성
const dog = new Dog('Buddy', 'Golden Retriever');

// 메서드 호출
dog.sayName(); // 출력: I am Buddy
dog.bark();    // 출력: Woof!

11-2-4. 프로토타입 간의 소통 공유 범위

function Animal(name) {
    console.log(this.name + '함수 안');
}
 // 부모 생성자 함수의 프로토타입에 메서드 추가

Animal.prototype.getName = function () {
    this.setName();
    console.log(this.name + '프로토타입 안');
};

Animal.prototype.setName = function () {
    this.name = 100;
};
const myAnimal = new Animal('Fido');

myAnimal.getName();
// undefined 함수 안, Fido는 function Animal 안으로 들어가지 않는다.
// 100 프로토타입 안, getName을 호출 시 Fido가 무시되고 100이 들어간다.

11-3. 현업에서 프로토타입과 생성자를 사용 방법

function Vector(x, y) {
    this.x = x || 0;
    this.y = y || 0;
}
Vector.prototype = {
// 입력값이 하나이면 {x.x x.y} 두 개이면 {x, y}
    add: function (x, y) {
        if (arguments.length === 1) {
// 값이 하나이면 아래 로직 실행
            this.x += x.x;
            this.y += x.y;
        } else if (arguments.length === 2) {
// 값이 두 개이면 아래 로직 실행
            this.x += x;
            this.y += y;
        }
// 메서드 체이닝을 위한 반환값 this
       return this;
},
    sub: function (x, y) {
        if (arguments.length === 1) {
            this.x -= x.x;
            this.y -= x.y;
        } else if (arguments.length === 2) {
            this.x -= x;
            this.y -= y;
        }
        return this;
    }}

    Vector.sub = function (v1, v2) {
            // 아규먼트를 받고 v1에서 v2를 빼 다시 벡터를 만든다.
            // 하지만 위에 프로토타입에 sub를 정의해서 아규먼트 개수가 한 개인지 두 개인지 확인하고 적용한다.
        return new Vector(v1.x - v2.x, v1.y - v2.y);
    };
    Vector.add = function (v1, v2) {
            // 위에 프로토타입에 add를 정의해서 아규먼트 개수가 한 개인지 두 개인지 확인하고 적용한다.
        return new Vector(v1.x + v2.x, v1.y + v2.y);
    };

const v1 = new Vector(3, 4);
const v2 = new Vector(2, 3);

const resultAdd = Vector.add(v1, v2);
const resultSub = Vector.sub(v1, v2);

console.log('덧셈 결과: (' + resultAdd.x + ', ' + resultAdd.y + ')');// 덧셈 결과: (5, 7)
console.log('뺄셈 결과: (' + resultSub.x + ', ' + resultSub.y + ')');// 뺄셈 결과: (1, 1)

const v3 = {x:2,y:2};
const resultOneArgAdd =v1.add(v3);
console.log('스칼라 덧셈 결과: (' + resultOneArgAdd.x + ', ' + resultOneArgAdd.y + ')');// 스칼라 덧셈 결과: (5, 6)
const resultOneArgSub = v1.sub(v3);
console.log('스칼라 뺄셈 결과: (' + resultOneArgSub.x + ', ' + resultOneArgSub.y + ')');// 스칼라 뺄셈 결과: (3, 4)

const v4 = new Vector(2, 3);
// 메서드 체이닝
v4.add(1, 2).sub(2, 1);
console.log(v4)// { x: 1, y: 4 }

this.x += x;
this.y += y;

Vector.prototype = {
    add: function (x, y) {
        if (arguments.length === 1) {
            this.x += x.x;
            this.y += x.y;
        } else if (arguments.length === 2) {
            this.x += x;
            this.y += y;
        }
       return this;
},

v4.add(1, 2).sub(2, 1);