javascript prototype

자바스크립트 프로토타입을 사용하면 프로그램의 효율성을 높히고 메모리를 절약 할수 있다.
객체 지향언어의 상속 개념도 흉내 낼수 있다.
prototype의 사용 방법을 알아보자.

프로토타입을 사용한 메모리 공유

var Person = function(){ 
     this.eye = 3; 
} 

Person.prototype.setEye = function(eye) {
    this.eye = eye 
}

Person.prototype.getEye = function() {
    console.log("Person " + this.eye); 
}

var kim = new Person();   
kim.setEye(2);
var lee = new Person();   
lee.setEye(1);

결과)
kim 2
lee 1

프로토타입을 사용하면 eye 변수가 공유된다.

var Person = function(){} 

Person.prototype.eye = 3;

Person.prototype.setEye = function(eye) {
    Person.prototype.eye = eye 
}

Person.prototype.getEye = function() {
    console.log("Person " + this.eye); 
}

var kim = new Person();   
kim.setEye(2);
var lee = new Person();   
lee.setEye(1);

console.log("kim " + kim.eye); 
console.log("lee " + lee.eye);

결과)
kim 1
lee 1

프로토타입 검색 순서

아래 예제는 프로토타입을 사용하지 않고 있다.
var Person = function(name){  
     this.name = name;  
     this.getName = function(){  
        console.log(this.name);  
     }  
}  
 
var kim = new Person('kim');    
kim.getName();  
 
var lee = new Person('lee');    
lee.getName(); 

다음은 프로토타입을 사용하고 있다.
var Person = function(name){ 
     this.name = name; 
     this.getName = function(){ 
        console.log("Person " + this.name); 
     } 
} 

Person.prototype.getName = function(){ 
   console.log("Prototype " + this.name); 
}

var kim = new Person('kim');   
kim.getName();
 
var lee = new Person('lee');   
lee.getName();

결과:
Person kim
Person lee

프로토타입에서 getName을 찾는 순서는 다음과 같다.
  1. Person에서 getName이 있는지 찾는다.
  2. Person의 프로토타입에서 getName을 찾는다. ( = Person.prototype.getName )
  3. 상위오브젝트에서 getName 순서로 찾는다. 

프로토타입을 이용한 상속

프로토타입을 이용하면 상속 흉내를 낼수 있다.

1. 자바스크립트 API-call 함수로 생성자에서 부모 생성자를 호출 하고 있다.

Animal.call(this, name);

2.  부모의 프로토타입, 프로토타입 생성자를 상속 받는다.
객체를 생성하기 이전에 해야 한다.

Monkey.prototype = Object.create(Animal.prototype);
Monkey.prototype.constructor = Monkey;

3. 함수를 재 정의 한다.
함수를 재 정의하고 나서 실행 되는 함수에 영향을 준다.

Monkey.prototype.walk = function() {
    console.log(this.name + "두발로 걷는다");
};

function Animal(name) {
    this.name = name;
};

Animal.prototype.walk = function() {
    console.log(this.name + "네발로 걷는다");
};

function Monkey(name) {
    Animal.call(this, name);
}

var dog = new Animal("dog");

//Monkey 객체를 생성하고 나서 protyp을 선어하면 다음의 에러가 발생한다.
//Uncaught TypeError: monkey.walk is not a function
Monkey.prototype = Object.create(Animal.prototype);  //= new Animal();
Monkey.prototype.constructor = Monkey;

var monkey = new Monkey("monkey");
monkey.walk();

Monkey.prototype.walk = function() {
    console.log(this.name + "두발로 걷는다");
};

dog.walk();
monkey.walk();
console.dir(monkey);

실행 결과:
kim
lee
monkey네발로 걷는다
dog네발로 걷는다
monkey두발로 걷는다
Monkey

같은 객체에서 다른 함수를 사용하는 방법도 있다.

홍길동은 처음에는  네발로 걸었지만, 두발로 걷는 함수를 선언하고 나서는
두발로 걷는다.

var human = new Animal("human");
human.walk();

human.myname = " 홍길동 ";

human.walk = function() {
    console.log(this.name + human.myname + " 드디어 두발로 걷는다");
};

human.walk();

실행 결과:
human네발로 걷는다
human 홍길동  드디어 두발로 걷는다

소스: prototype.html

참고)
https://bestalign.github.io/2015/08/02/JavaScript-Inheritance/
http://beomy.tistory.com/3