[자바스크립트] 생성자함수 프로토타입

 

프로토타입의 예를 한번 만들어봐라

 

function Person() {}
Person.eyes = 2;
Person.prototype.nose = 1;
var kim  = new Person();
var park = new Person();


console.log(kim);
console.log(kim.eyes);

console.log(Person.prototype.nose);

 

저렇게하면 person의 프로퍼티가 바뀌는게 아니라

인스턴스를 만들때마다 생성자로  인하여 인스턴스의 프로퍼티가 생기는거같다.

우선, Person이라는 생성자 함수를 정의하고 있습니다. 생성자 함수는 객체를 생성할 때 사용하는 함수입니다. 이 함수를 호출하면 새로운 객체가 생성되고, 이 객체는 Person 생성자 함수의 프로토타입 객체를 상속받습니다.

Person.eyes = 2라는 코드는 Person 생성자 함수의 정적 프로퍼티 eyes에 2를 할당하는 것입니다. 정적 프로퍼티는 생성자 함수 자체에 할당되며, 이 함수를 통해 생성된 객체들은 이 프로퍼티를 공유합니다.

Person.prototype.nose = 1라는 코드는 Person 생성자 함수의 프로토타입 객체의 nose 프로퍼티에 1을 할당하는 것입니다. 프로토타입 객체는 생성자 함수로부터 생성된 모든 객체들이 공유하는 객체입니다.

var kim = new Person()라는 코드는 Person 생성자 함수를 이용해 새로운 객체 kim을 생성하는 것입니다. 이 객체는 Person 생성자 함수의 프로토타입 객체를 상속받으며, Person 생성자 함수의 정적 프로퍼티 eyes를 공유합니다.

var park = new Person()라는 코드는 Person 생성자 함수를 이용해 새로운 객체 park를 생성하는 것입니다. 이 객체 역시 Person 생성자 함수의 프로토타입 객체를 상속받으며, Person 생성자 함수의 정적 프로퍼티 eyes를 공유합니다.

console.log(kim)을 실행하면 kim 객체의 정보가 출력됩니다. 이 객체는 Person 생성자 함수의 프로토타입 객체를 상속받았기 때문에 nose 프로퍼티를 가지고 있습니다.

console.log(kim.eyes)를 실행하면 2가 출력됩니다. kim 객체는 Person 생성자 함수의 정적 프로퍼티 eyes를 공유하기 때문입니다.

console.log(Person.prototype.nose)를 실행하면 1이 출력됩니다. 이는 Person 생성자 함수의 프로토타입 객체의 nose 프로퍼티에 1이 할당되어 있기 때문입니다.

 

 

 

 

더 잘 볼수있는 예가 하나 있다.

 

 

function YalcoChicken (name, no) {
    this.name = name;
    this.no = no;
    this.introduce = function () {
        return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
    }
}

// 본사의 정보와 업무
YalcoChicken.prototype.brand = '얄코치킨';
YalcoChicken.prototype.contact = function () {
    return `${this.brand}입니다. 무엇을 도와드릴까요?`;
};


// YalcoChicken.brand = '얄코치킨';
// YalcoChicken.contact = function () {
//     return `${this.brand}입니다. 무엇을 도와드릴까요?`;
// };




const chain1 = new YalcoChicken('판교', 3);

console.log(chain1.brand);

// 프로토타입의 있고 없고 차이가 큰걸 보길

new 생략 실수 방지하기

 

 

 

 

 

 

function YalcoChicken (name, no) {
    this.name = name;
    this.no = no;
    this.introduce = function () {
        return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
    }

    if (!new.target) { // 이 부분을 지우고 다시 해 볼 것
        return new YalcoChicken(name, no);
    }
}

const chain1 = new YalcoChicken('판교', 3);


const chain2 = YalcoChicken('강남', 17);

console.log(chain1);
console.log(chain2);

 

 

YalcoChicken 생성자 함수에 if (!new.target) 코드가 추가되어 있습니다. 이 코드는 생성자 함수가 new 연산자 없이 일반적인 함수 호출로 실행되는 것을 방지하기 위해 사용됩니다. new.target은 new 연산자를 사용하여 생성된 객체를 가리키는 변수로, new 연산자를 사용하지 않고 생성자 함수를 호출할 경우 new.target 값은 undefined가 됩니다.

따라서 if (!new.target) 조건이 참이 되는 경우, 생성자 함수가 new 연산자를 사용하여 재귀적으로 호출되어 객체를 생성하고 반환합니다. 이를 통해 생성자 함수가 new 연산자 없이 호출되더라도 객체가 올바르게 생성되도록 보장할 수 있습니다.

예를 들어 const chain1 = new YalcoChicken('판교', 3); 구문은 new 연산자를 사용하여 생성자 함수를 호출하므로, if (!new.target) 조건이 거짓이 되어 객체가 생성됩니다. 반면 const chain2 = YalcoChicken('강남', 17); 구문은 new 연산자를 사용하지 않고 생성자 함수를 호출하므로, if (!new.target) 조건이 참이 되어 생성자 함수가 재귀적으로 호출되어 객체가 생성됩니다.

따라서 console.log(chain1); 구문은 생성된 객체를 출력하며, console.log(chain2); 구문도 동일하게 객체를 출력합니다. 두 구문 모두 생성된 객체의 name, no, introduce 속성이 포함된 것을 확인할 수 있습니다.