[JavaScript] 자바스크립트 Prototype

 

 

 

자바스크립트는 프로토타입 기반 언어라고 불린다. 클래스가 없는 대신 그 역할을 하는 프로토타입을 주로 사용하기 때문이다. 프로토타입은 무엇일까?

 

 

💡 Prototype

 

• 프로토타입에서 함수와 함수의 프로퍼티를 생성하고 공유할 수 있다.
• 프로토타입에 new 키워드로 객체를 생성하여 다른 객체(함수)를 상속 받을 수 있다.

 

어떤 경우에 사용할까?

 

function f1(){
    return{
        a: 10,
        f: function(){}
    }
}
let obj1 = f1();
let obj2 = f1();
console.log(obj1.f === obj2.f);

//false

 

• 위의 프로그램에서 obj1과 obj2 객체가 다르다고 출력된다.
• obj1과 obj2 는 모두 f1 객체를 사용하는데 두 객체가 다르다고 판단되는 것은 주소가 다르기 때문일 것이다. 같은 객체를 사용하는데 주소가 다르다는 것은 비효율적이다. 

 

💡 여기서 두 객체가 왜 다르게 출력되는 걸까?

• 자바스크립트 상에서 다르게 생각한다고 한다.
• 자바에서 new를 통해 객체를 여러 개 생성하면 메모리영역에서 주소가 달라져서 서로 다른 객체로 생각하는 것처럼 자바스크립트에서도 그런 것과 비슷한게 아닌가 싶다.
• 그렇기 때문에 프로토타입을 사용해서 객체를 만들어서 사용한다.

 

// 프로토타입
function F2(){
    this.a = 10
}
let ins1 = new F2();
let ins2 = new F2();
F2.prototype.f = function(){};
console.log(ins1.f === ins2.f);

// true

 

• 생성자 함수로 F2()를 생성하고 프로토타입을 이용해서 F2() 에 프로퍼티 f 를 생성한다.
• f 에 접근하는 객체는 모두 동일하게 된다.

 

 

let obj = function f1(){}
obj.f1 = function(){
    console.log(1);
}
obj.f1();
function F1(){
}
F1.prototype.f1 = function(){
    console.log(2);
}
let ins = new F1();
ins.f1();

// 1
// 2

 

• F1() 함수를 생성하고 prototype 으로 함수 F1 에 요소 f1을 만든다.
• ins 에 F1 객체를 생성하고 f1을 호출한다.

 

 

 

 

 

예제

 

// output() 으로 실행이 되게 만들기
function makeInfo(name, n1, n2) {
    this.name = name,
        this.n1 = n1,
        this.n2 = n2
}

let ar = [];
ar.push(new makeInfo('호랑이0', 10, 60));
ar.push(new makeInfo('호랑이1', 20, 70));
ar.push(new makeInfo('호랑이2', 30, 80));
ar.push(new makeInfo('호랑이3', 40, 90));
ar.push(new makeInfo('호랑이4', 50, 10));

ar.forEach((v, i) => {
    ar[i].sum = v.n1 + v.n2;
})

for (let index in ar) {
    ar[index].output();
}

 

• output() 생성하려면 프로퍼티로 생성해야 한다.

 

// output() 프로퍼티 생성
makeInfo.prototype.output = function () {
    console.log(this.name, this.n1, this.n2, this.sum);
}

 

• ar[index] 가 for 문으로 처음부터 끝까지 접근을 하기 때문에 각 index 를 어떻게 output 프로퍼티에 전달할지가 고민이었는데 this 를 사용해서 output 내에서 스스로 현재 index 를 찾도록 했다.
• output 프로퍼티 생성하고 this 로 index 에 맞는 변수 값을 출력한다.