Prototype
생성자 함수가 가진 프로퍼티들을 물려 받아서 인스턴스를 만드는 것을 상속(inheritance) 이라고 한다.
생성자를 만들 경우 내부에 prototype 이라는 항목이 추가 된다.
function 기계(){
this.name = 'Kim';
this.age = 15;
}
var 학생1 = new 기계();
var 학생2 = new 기계();
console.log(기계.prototype);
prototype은 일종의 유전자 역할을 해주는 비밀공간인 셈이다.
기계.prototype에 변수나 함수가 있다면,
기계로부터 생성 되는 인스턴스들(자식들)은 부모의 변수나 함수를 사용할 수 있다.
function 기계(){
this.name = 'Kim';
this.age = 15;
}
기계.prototype.gender = '남';
var 학생1 = new 기계();
var 학생2 = new 기계();
console.log(학생1.gender); //'남'기계의 prototype에 { gender : '남' } 키/밸류 한 쌍을 할당했다.
이제 기계로부터 생성된 학생1 , 학생2 는 gender 라는 속성을 사용할 수 있다.
작동원리
1.
function 기계(){
this.name = 'Kim';
this.age = 15;
}
기계.prototype.gender = '남';
var 학생1 = new 기계();
console.log(학생1.gender)JS는 오브젝트에서 값을 출력할 때,
(1) 학생1 에 gender 라는 값이 있는가?
(2) 부모 유전자에 gender 라는 값이 있는가?
(3) 부모의 부모 유전자에 gender 라는 값이 있는가?
…
그래서 학생1 에 gender 라는 값을 가지고 있지만
부모의 prototype에 있는 gender 를 출력할 수 있다.
2.
sort, push, toString, map, forEach 등 array에 붙여서 사용이 가능하다.
var arr = [1,2,3];
console.log( arr.toString() ); //가능만든 array에 arr.toString()이 가능한 이유는
만든 array의 부모 유전자가 toString()을 가지고 있기 때문이다.
배열 데이터를 만드는 두 가지 방법이 있는데,
var arr = [1,2,3];
var arr = new Array(1,2,3);위의 방법으로 만들면 내부적으로는 아래의 new 키워드를 이용해 만들어 준다.
그래서 Array로 부터 생성된 자식들은 Array객체의 함수, 데이터들을 사용이 가능한 것이다.
prototype의 상속과 constructor의 상속
자식들이 값을 직접 소요하게 만들고 싶으면 constructor
부모만 가지고 있고 그걸 참조해서 쓰게 만들고 싶으면 prototype
특징
1. prototype은 constructor 함수에만 생성된다.
object, array에는 prtotype이 없다.
object를 상속하고 싶다면,
constructor 함수, Object.create(), Class
2. 부모의 유전자를 찾고 싶다면 ‘**proto’**
부모로부터 생성된 자식 객체들은 proto 라는 속성이 있는데,
부모의 prototype이 출력된다.
function 기계(){
this.name = 'Kim';
this.age = 15;
}
var 학생1 = new 기계();
console.log(학생1.__proto__);
console.log(기계.prototype);3. **proto 를 직접 등록하면 object끼리 상속기능을 구현가능하다.**
var 부모 = { name : 'Kim' };
var 자식 = {};
자식.__proto__ = 부모;
console.log(자식.name); // 'Kim'============================================
예제
Q1.
var 학생1 = { name : 'Kim', age : 20 }
var 학생2 = { name : 'Park', age : 21 }
var 학생3 = { name : 'Lee', age : 22 }constructor를 만들어 보자.
학생1.sayHi() 라고 쓰면 ‘안녕 나는Kim이야’ 라는 글자가 콘솔창에 출력 되도록 sayHi() 라는 함수도 추가하자.
- 답안
function 리스트(name, age) { this.name = name; this.age = age; this.sayHi = function(){ console.log(`안녕 나는 ${this.name}이야.`) } } var 학생1 = new 리스트('Kim', 20); 학생1.sayHi();
Q2. 다음 코드의 결과값은?
function Parent(){
this.name = 'Kim';
}
var a = new Parent();
a.__proto__.name = 'Park';
console.log(a.name) //?- 답안 'Kim' 입니다. 첫 4줄에 의해서 a = { name : 'Kim' } 이 되고 a.proto.name = 'Park'; 이건 부모 prototype에 { name : 'Park' } 이걸 추가하라는 뜻입니다. 그럼 이제 a.name 이라고 사용했을 때 내가 직접 가지고 있는 { name : 'Kim' } 이걸 우선 출력해줍니다.
Q3.
function Student(이름, 나이){
this.name = 이름;
this.age = 나이;
}
Student.prototype.sayHi = () => {
console.log('안녕 나는 ' + this.name + '이야');
}
var 학생1 = new Student('Kim', 20);
학생1.sayHi(); //왜 이 코드가 제대로 안나오죠?- 답안
sayHi()를 추가할 때, 화살표함수를 사용했다. 화살표함수는 this를 바깥에 있는 this를 그대로 사용하고 싶을 때 쓰는 함수이다.sayHi()에 this를 출력해 보면 window가 출력이된다.this키워드는 매번 재정의 된다. 객체 안에 들어 있는 함수 안에 있는 this는 함수를 부른 객체가 된다. 하지만 화살표함수는 this가 재정의 되지 않고 바깥에 있던 this를 사용한다.
Q4.
모든 array에 붙일 수 있는,
array 내에 있는 3이라는 값을 제거해주는 유용한 함수를 하나 만들고 싶습니다.
var arr = [1,2,3];
arr.remove3();
console.log(arr); //[1,2]- 답안
Array.prototype.remove3 = function(){ for (var i = 0; i < this.length; i++) { if ( this[i] === 3 ) { this.splice(i,1); } } }; var arr = [1,2,3,4]; arr.remove3(); console.log(arr); //[1,2,4]
