프로토타입을 왜 배워야 하는지?
- 자바스크립트에는 객체지향 프로그래밍 언어의 특징인 클래스와 상속, 캡슐화를 위한 키워드인 public, private, protected등이 없어서 객체지향 언어가 아니라고 오해를 하는 경우가 많다. 대신 프로토타입(Prototype)이라는 것이 존재하며 더 강력한 객체지향 프로그래밍 능력을 지니게 된다.
💡 ES6에서 클래스가 도입되었다. 하지만 이 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새로운 객체지향 모델을 제공하는 것은 아님. 새로운 객체 생성 메커니즘으로 봐야함. 이후 클래스에서 추가적으로 공부 필요
const arr1 = [4, 2, 1]
arr1.sort()
console.log(arr1) // [1, 2, 4]
Array 자료에 sort를 추가한적이 없는데 .sort()를 붙일 수 있는 이유?
프로토타입이란?
- 객체의 원형.
- 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다.
- 정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다.
- 이해하기 쉽게 설명하자면 프로토타입은 일종의 "유전자"이다.
function foo() { // 부모
this.a = "strike"
this.b = "snowball"
}
var obj = new foo() // 자식 {q : "strike", w : "snowball"}- prototype을 사용해서도 똑같이 상속이 가능함.
function foo() {
this.a = "strike"
this.b = "snowball"
}
var obj = new foo()
foo.prototype.name = "kim"
foo // ƒ foo() {
// this.a = "strike"
// this.b = "snowball"
obj.name // "kim"
}- foo에는 추가한적이 없지만 obj.name이 사용이 가능한 모습
- prototype에 무언가를 추가하면 다른 자식들이 사용 가능하다.
function foo() { // 이곳에 추가를 하면 자식이 {q : "strike"} 를 직접 가진다.
this.a = "strike"
this.b = "snowball"
}
var obj = new foo()
foo.prototype.name = "kim" // 이곳에 추가를 하면 부모만 {name : "kim"}을 가짐.
foo // ƒ foo() {
// this.a = "strike"
// this.b = "snowball"
obj.name // "kim"
}prototype의 원리
function foo() {
this.a = "strike"
this.b = "snowball"
}
var obj = new foo()
foo.prototype.name = "kim"
foo
obj.name // obj에서 데이터를 뽑을 때 사용
}1. obj가 name을 가지고 있다면 출력
2. obj가 name을 가지고 있지 않다면 obj 부모의 prototype을 찾아서 name이 있으면 출력
3. obj의 부모도 가지고 있지 않다면 부모의 부모 없다면 부모의 부모의 부모....
=> 이를 prototype chain이라고 한다.
prototype의 사용
const arr1 = [4, 2, 1] // 인간의 방식
const arr2 = new Array(4, 2, 1)
arr2.sort()
console.log(arr2) // [1, 2, 4]
Array.prototype // sort, map, length 등등 사용하던 것들이 prototype에 들어있다.
