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 라는 값 까지 전부 순회한다
프로토타입에 있는, 내가 만들어놓은 key와 value 값 까지 전부 출력되지 않게 하려면
hasOwnProperty를 사용한다
User.prototype.hasOwnProperty
이렇게 사용하면 딱 생성자 함수로 만든 내 객체만 나오게 된다
애초에 프로토타입에 프로퍼티를 만들지 않으면 괜찮지 않을까?
하지만 이것을 사용하는 경우가 있다는 것이다
예를들어서 우리가 자동차를 구매한다고 생각하자
차1, 차2, 차3
이렇게 세가지 차량이 있다고 생각하면
1번차 옵션 {
옵션1 : 백미러
옵션2: 전조등
옵션3: 네비게이션
}
2차 옵션 {
옵션1 : 백미러
옵션2: 전조등
}
1번차 옵션 {
옵션1 : 백미러
옵션2: 전조등
옵션3: 선루프
}
이런 객체를 생성할대 백미러와 전조등이 계속 겹치는 것이다
이럴때 이 프로퍼티를 위의 예시처럼 프로토타입에 넣어놓으면 공통적으로 사용이 가능하다
마지막으로 프로토타입 체이닝에 대해서 알아보자
User.sayName()
이런 객체의 메소드를 뽑아본다고 생각해보자
처음에 User라는 생성자 함수에서 찾아보게 된다 하지만 없다면?
이 생성자 함수의 prototype 즉 부모의 유전자에서 찾게된다
부모의 유전자에서 찾았다면?
그 값을 가져오지만 못찾았다면 또 상위 프로토타입에서 찾게된다
이것을 프로토타입 체이닝이라고 한다
글을 읽다보면 생성자 함수 라는 이야기가 계속 나온다
생성자 함수와 프로토 타입에 대한 더 자세한 내용은 다음 글에서 다루도록 하겠다