Create Date: 2022/12/30
Update Date: 2022/12/30
객체 생성하는 3번째 방법을 알기 전에 프로토타입에 대해 알아야 합니다.
자바스크립트에서 클래스는 같은 프로토타입 객체에서 프로퍼티를 상속하는 객체 집합입니다.
따라서 프로토타입 객체가 클래스의 핵심 기능입니다.
자바스크립트 객체 거의 대부분은 자신과 연결된 두 번째 객체를 갖습니다.
여기서 두 번째 객체는 프로토타입이라고 부르며, 첫 번째 객체는 프로토타입에서 프로퍼티를 상속합니다.
출처: https://ko.javascript.info/native-prototypes
객체 리터럴을 사용해 생성한 객체는 모두 같은 프로토타입 객체를 갖습니다.
new 키워드와 생성자를 사용해 만든 객체는 생성자 함수의 prototype 프로퍼티 값을 자신의 프로토타입으로 사용합니다.
new Array()로 생성한 객체는 Array.prototype를 갖고, new Date()로 생성한 객체는 Date.prototype을 갖습니다. (Array로 선언했을 때 배열 메서드를 사용가능하고, Date로 선언했을 때 날짜 관련 메서드를 사용할 수 있다는 것을 떠올리면 쉽습니다!)
여기에서 중요한 부분은 거의 모든 객체에 프로토타입이 있지만 prototype 프로퍼티가 있는 객체는 비교적 적다는 것 입니다. prototype 프로퍼티를 갖는 객체가 다른 객체의 프로토타입을 정의합니다.
Object.prototype / Array.prototype / Date.prototype << prototype 프로퍼티가 있는 객체
Object.prototype은 프로토타입이 없는 드문 객체 중 하나입니다. 이 객체는 어떤 프로퍼티도 상속하지 않습니다.
내장 생성자 대부분에 Object.prototype에서 상속하는 프로토타입이 있습니다.
프로토타입 생성되는 방법은 객체를 생성할 때 원본 객체를 복제하여 생성하는 방법입니다. 아래 예제를 볼까요?
function User() {}
const evan = new User();
console.log(evan); // => User { __proto__: Object }
console.log(typeof evan); // => objectevan이라는 변수에 함수인 User라는 값을 넣었습니다.
가장 마지막 줄의 console.log를 볼까요? function이 아니라 object가 되었습니다.
여기에서 저희는 evan이란 변수에는 User 함수를 생성하여 넣어준 것이 아니라, 사실 User 함수의 프로토타입 객체를 복제하여 넣어준 것을 알 수 있습니다.
console.log(User.prototype); // => User { __proto__: Object }그래서 저희는 이렇게 출력을 하면 문제없이 작동하는 것을 확인할 수 있습니다.
함수를 생성하면 무조건 그 함수의 프로토타입 객체도 함께 생성된다는 것이 키포인트입니다.
출처: https://evan-moon.github.io/2019/10/23/js-prototype
프로토타입 객체는 함수를 사용해서 새로운 객체를 생성할 때 원본 객체 역할을 해줄 객체를 의미합니다.
위 그림에선 User Prototype입니다.
위 그림에서 constructor, proto라는 이상한 단어가 나왔습니다.
constructor의 뜻은 생성자 죠! 자바스크립트에서도 똑같습니다. prototype을 생성한 함수의 값을 담고 있습니다.
위 그림 같은 경우에는 User Function을 갖고 있겠네요. 아래와 같이 정리할 수 있습니다.
출처: https://evan-moon.github.io/2019/10/23/js-prototype
console.log(User.prototype.constructor === User); // => true생성된 객체가 자신의 원본 객체에 접근할 수 있는 프로퍼티가 바로 __proto__ 프로퍼티입니다.
함수를 통해 새롭게 생성된 객체는 원본 객체와의 연결을 가지고 있습니다. 이때 이 연결을 프로토타입 링크(Prototype Link)라고 합니다.
즉 User 함수를 사용하여 생성한 객체는 User.prototype 객체를 복사하여 생성된 객체이기 때문에,
이 객체들은 원본인 User.prototype 객체를 자신의 __proto__ 프로퍼티에 연결해두는 것입니다.
function User() {}
const evan = new User();
console.log(evan.__proto__ === User.prototype); // => trueDate.prototype은 Object.prototype에서 프로퍼티를 상속하므로 new Date()로 생성한 Date객체는 Date.prototype과 Object.prototype 양쪽에서 프로퍼티를 상속합니다.
이렇게 이어지는 프로토타입 객체 사이의 연결을 프로토타입 체인이라 합니다.
출처: https://ko.javascript.info/native-prototypes
위의 사진에서 알 수 있듯이 Object.prototype의 위에는 null이 있습니다.
Object.prototype에도 toString()이라는 메서드가 있고, Array.prototype에도 toString()이라는 메서드가 있다면 가까운 메서드를 사용하게 됩니다.
출처: https://ko.javascript.info/native-prototypes
const a = [1, 2, 3];
a.toString(); //Errorconsole.dir([1,2,3]); 을 사용하면 내장 객체의 상속관계를 확인하는데 도움됩니다.