프로토타입이 뭐냐
프로토타입은 유전자이다.
function 기계(){
this.q = 'strike';
this.w = 'snowball';
}
기계.prototype
기계.prototype.name ="kim";위처럼 프로퍼티를 나타내는 점표기법으로 prototype에 붙일 수 있다.
nunu의 name을 불러왔을 때, 따로 name이라는 값을 지정해주지 않았는데 kim이라는 값이 나왔다.
아까 설명했던 것처럼 프로토타입은 유전자이기 때문에 부모에서 name 값을 지정해줬기 때문에 따로 설정하지 않아도 이렇게 나온다!
.prototype.name을 이용하면 부모만 갖는 프로퍼티 값을 지정할 수 있다.
nunu를 직접 불렀을 때는 아래와 같이 나온다.
자식이 직접 상속받아서 사용한다.
var nunu =new 기계();
console.log(nunu.name); // kim
console.log(nunu);//{q:"strike",w:"snowball"}자바스크립트는 위처럼 값을 가져온다.
nunu라는 객체가 name프로퍼티가 지정이 안됐을 경우, 부모 객체 그러니까 prototype에서 확인한다.
여기에서도 해당 프로퍼티에 값이 없을 경우 부모의 부모에게 값을 물어본다.
계쏙...
prototype chain
내장함수는 어디서 오는 걸까
예를 들어 아래와 같이 지정했을 때, sort()라는 함수를 우리는 만들어서 사용하지 않는다.
배열 안에 내장함수에서 가져오는 건데, 이렇게 사용할 수 있는 이유는 뭘까
const arr = [1,2,3];
arr.sort();먼저 배열을 다른 방식으로 생성해보자
ver arr = new Array(4,2,1);위와 같은 방법은 첫번째 arr이를 생성할 떄 내부적으로 선언되는 코드이다.
그러니까 Array의 부모에서 length, sort, map, forEach와 같은 함수를 포함하고 있다는 것이다!
Array.prototype 코드 결과 ⬇⬇
안에 되게 친숙한 함수를 확인할 수 있다.
내가 부모에게 사용자 지정 함수를 만들어서 추가할 수있다?!
이왜진?!
아래처럼 함수를 지정해서 점표기법으로 만들 수 있다!
Array.prototype.만든함수 =function(매개변수,왕왕){...}
arr.만든함수(); // 실제로 모든 Array에서 사용할 수 있는 함수가 만들어진 것내가 직접 부모의 dna를 변경할 수있다!
지금 공부하고 있는 타입스크립트 부분이랑 갱장히 비슷하다.
상속을 되게 많이 마주치고 있는데 js의 큰들이 이렇게 상속적인 부분이 많은 것 같다.
공부를 조금씩 하다보면 느끼는 점이, 이렇게 틀이 하나 있으면 여러 군데에서 자주 사용하는 것 같다.
