[로운스쿨] prototype

이로운·2023년 1월 29일
0
function User() {
	this.name = 'mike';
  	this.age = 20;
}

let user1 = new User()
let user2 = new User()

저번 생성자 함수 편에서 간단한 생성자 함수를 하나 만들어봤다
user은 비슷한 객체를 여러개 생성하는 붕어빵 틀 같은 존재이다

부모가 자식을 낳는것과 같아보이기 때문에
부모와 자식 관계라고 칭한다

유전자

프로토타입을 여러 매체에서는 유전자 라고 설명한다
우리는 부모님에게 여러가지 유전자를 물려받는다
객체도 똑같이 부모님에게 여러가지 유전자를 물려받을 수 있다

메소드

예를 들어보자

let array = [1,2,3];

array.sort()

대충 이런 코드가 있다고 생각해보자
.이라는 것은 객체에서 키값이나 벨류 값을 추출하거나 변경할때 사용한다
user.key 이런식으로 말이다
위 예제에서는 sort() 라는 함수를 호출했다 그럼 객체의 메소드를 호출한건데
우리는 이런 메소드를 만든 적이 없다
어디서 나온걸까?

프로토타입

저 sort()라는 메소드는 부모 유전자(prototype)에 이미 존재하는 메소드를 가져와서 사용하는 것이다

유전자 조작

이번엔 유전자를 조작하는 방법에 대해서 알아보자
부모 유전자에 임이의 값을 넣는 것이다

User.prototype.name = 'kim';

맨 위의 코드에서 이것을 추가하고 객체를 순회하면 어떻게 될까?
프로토타입에 적혀있는 name : key 라는 값 까지 전부 순회한다

hasOwnProperty

프로토타입에 있는, 내가 만들어놓은 key와 value 값 까지 전부 출력되지 않게 하려면
hasOwnProperty를 사용한다

User.prototype.hasOwnProperty

이렇게 사용하면 딱 생성자 함수로 만든 내 객체만 나오게 된다

이런 게 왜 있을까?

애초에 프로토타입에 프로퍼티를 만들지 않으면 괜찮지 않을까?
하지만 이것을 사용하는 경우가 있다는 것이다
예를들어서 우리가 자동차를 구매한다고 생각하자
차1, 차2, 차3
이렇게 세가지 차량이 있다고 생각하면

1번차 옵션 {
	옵션1 : 백미러
    옵션2: 전조등
    옵션3: 네비게이션
}
2차 옵션 {
	옵션1 : 백미러
    옵션2: 전조등
}
1번차 옵션 {
	옵션1 : 백미러
    옵션2: 전조등
    옵션3: 선루프
}

이런 객체를 생성할대 백미러와 전조등이 계속 겹치는 것이다
이럴때 이 프로퍼티를 위의 예시처럼 프로토타입에 넣어놓으면 공통적으로 사용이 가능하다

prototype chaining

마지막으로 프로토타입 체이닝에 대해서 알아보자

User.sayName()

이런 객체의 메소드를 뽑아본다고 생각해보자
처음에 User라는 생성자 함수에서 찾아보게 된다 하지만 없다면?
이 생성자 함수의 prototype 즉 부모의 유전자에서 찾게된다
부모의 유전자에서 찾았다면?
그 값을 가져오지만 못찾았다면 또 상위 프로토타입에서 찾게된다
이것을 프로토타입 체이닝이라고 한다

예고

글을 읽다보면 생성자 함수 라는 이야기가 계속 나온다
생성자 함수와 프로토 타입에 대한 더 자세한 내용은 다음 글에서 다루도록 하겠다

profile
이름 값 하는 개발자가 꿈인 사람

0개의 댓글