JavaScript - 프로토타입02

*🔐Study Keyword :

🔑객체 생성 방식(리터럴표기, Object 생성자 함수, 생성자 함수)에 따른 ✔생성자 함수와 어떤 프로토타입이 생성되는지에 대한 프로세스와 ✔프로토타입의 생성시점을 중심으로 무슨 차이와 공통점이 있는지 살펴보자.

• 상속과 프로퍼티 검색을 위한 메커니즘 위한 🔑프로토타입 체인에 대해서 알아보고 스코프 체인과 비교해보자!

-리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입
-프로토타입의 생성 시점
-객체 생성 방식과 프로토타입의 결정
-프로토타입 체인

4. 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입

• 생성자 함수에 의해 생성된 인스턴스는 '프로토타입'의 constructor 프로퍼티에 의해 생성자 함수와 연결된다.

• 이때 constructor 프로퍼티가 가리키는 생성자 함수 = 인스턴스를 생성한 생성자 함수

<script>
// obj 객체를 생성한 생성자 함수는 Object
const obj = new Object();
console.log(obj.constructor === Object);
// add 객체를 생성한 생성자 함수는 Function
const add = new Function('a','b','return a+b');
console.log(add.constructor === Function);
// 생성자 함수
function Person(name) {
  this.name = name;
};
// me 객체를 생성한 생성자 함수는 Person
const me = new Person('kim')
console.log(me.constructor === Person); // true
</script>

▶ 객체 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입

• 하지만 리터럴 표기법에 의한 객체 생성 방식과 같이 명시적으로 new 연산자와 함께 생성자 함수를 호출하여 인스턴스를 생성하지 않는 객체 생성 방식도 있다.

<script>
// 객체 리터럴
const obj = {};
// obj 객체는 Object 생성자 함수로 생성한 객체가 아닌 객체 리터럴로 생성했지만
console.log(obj.constructor === Object)// true가 나온다.. 띠용?!
// 함수 리터럴
const add = function(a,b){return a+b};
// 객체 리터럴
const arr = [1, 2, 3]
// 정규 표현식 리터럴
const regexp = /is/ig;  
</script>

• 위 코드의 obj 객체는 Object 생성자 함수로 생성한 객체가 아닌 객체 리터럴로 생성된 객체지만 obj 객체는 Object 생성자 함수와 constructor 프로퍼티로 연결되어있다.
• 리터럴 표기법에 의해 생성된 객체도 프로토타입 존재하지만 이 경우 프로토타입의 constructor 프로퍼티가 가리키는 생성자 함수가 반드시 객체를 생성한 생성자 함수라고 단정할 수 없다.

• Q. 그렇다면 객체 리터럴에 의해 생성된 객체는 사실 Object 생성자 함수로 생성되는거야..🤷‍♂️?!

-이크마스크립트 사양 내용
1> Object 생성자 함수

• 2번 내용처럼 Object 생성자 함수에
  1.1>인수를 전달하지 않거나 1.2>undefined 또는 null을 인수로 전달하면서 호출하면
  2>내부적으로 추상 연산 OrdinaryObjectCreate를 호출해
  3> Object.prototype을 프로토타입으로 갖는 빈 객체를 생성한다.

<script>
// 2번 예시> Object 생성자 함수에 의한 객체 생성 
// 인수 전달 x 추상 연산 OrdinaryObjectCreate  호출해 빈 객체 생성
let obj = new Object();
console.log(obj); // {}
// 1번 예시> new.target이 undefined나 Object가 아닌 경우
// 인스턴스 -> Foo.prototype -> Object.prototype 순으로 프로토타입 체인 생성하여
// 추상 연산 OrdinaryObjectCreate  호출해 빈 객체 생성
class Foo extends Object();
new Foo(); // Foo{}
// 3. 인수가 전달된 경우에 인수를 객체로 변환
// Number 객체 생성
obj = new Object('123');
console.log(obj); // Number {123}
// String 객체 생성
obj = new Object('123');
console.log(obj); // String {'123'}
</script>

2> 객체 리터럴 평가

• 객체 리터럴이 평가될 때는 다음과 같이 추상 연산 OrdinaryObjectCreate를 호출해 빈 객체를 생성하고 프로퍼티를 추가하도록 정의되어있다.
  
• 1>Object 생성자 함수 호출과 2>객체 리터럴의 평가는 추상 연산 OrdinaryObjectCreate를 호출해 빈 객체를 생성하는 점까지는 동일하다. 그러나 new.target의 확인이나 프로퍼티를 추가하는 처리 등의 세부 내용은 다르다.

• A. 따라서 2>객체 리터럴에 의해 생성된 객체는 1>Object 생성자 함수로 생성한 객체가 아니다❌🙅‍♂️

▶ 객체 리터럴 표기법에 의해 생성된 함수 객체의 생성자 함수와 프로토타입

• 함수의 경우 차이가 더 명확하다,

• 1>Function 생성자 함수를 호출하여 생성한 함수는 1.렉시컬 스코프를 만들지 않고 전역 함수인 것처럼 스코프를 생성해 2. 클로저도 만들지 않는다.
• 2>함수 선언문, 표현식을 평가하여 함수 객체를 생성한 건 Function 생성자 함수가 아니지만 객체 리터럴과 마찬가지로 constructor 프로퍼티를 확인해보면 foo 함수의 생성자 함수는 Functino 생성자 함수라고 나온다😥ㅠㅠ

<script>
// foo 함수는 Function 생성자 함수로 생성한 함수 객체가 아닌 함수 선언문으로 생성
function foo(){}
// constructor 프로퍼티를 통해 확인해보면 
// 함수 foo의 생성자 함수는 Function 생성자 함수가..
console.log(foo.constructor === Function);// 역시 true라고 나온다구ㅠㅠㅠ
</script>

-리터럴 표기법에 의해 생성된 객체와 함수가 생성자 함수를 갖는 쥔짜 이유

-리터럴 표기법에 의해 생성된 객체도 상속을 위해 프로토타입이 필요하여 '가상적인' 생성자 함수를 갖기는한다.
프로토타입은 생성자 함수와 '더불어 생성'되며 prototype, constructor 프로퍼티에 의해 연결되어 있기 때문이다.
=> 프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재한다.

• 리터럴 표기법 (객체, 함수, 정규 표현식 리터럴 등)에 의해 생성된 객체는 생성자 함수에 의해 생성된 객체는 아니지만 큰 틀에서 보면 리터럴 표기법으로 생성한 객체도 생성자 함수로 생성한 객체와 본질적인 면에서는 큰 차이는 없다.

<결론>

• 객체 리터럴에 의해 생성한 객체와 Object 생성자 함수에 의해 생성한 객체는 생성 과정의 미묘한 차이는 있지만 결국 객체로서 동일한 특성을 갖는다.
• 함수 리터럴에 의해 생성한 함수와 Function 생성자 함수에 의해 생성한 함수는 생성 과정과 스코프, 클로저 등의 차이(함수는 객체에 비해 차이가 있음)가 있지만 역시 함수로서 동일한 특성을 갖는다.
  => 프로토타입의 constructor 프로퍼티를 통해 연결되어있는 생성자 함수를 리터럴 표기법으로 생성한 객체를 생성한 생성자 함수로 여겨도 큰 무리없다.
  -리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토 타입

---

5. 프로토타입의 생성 시점

• 리터럴 표기법에 의해 생성된 객체도 생성자 함수와 연결된다.
  객체는 리터럴 표기법 또는 생성자 함수에 의해 생성되므로 결국 모든 객체는 생성자 함수와 연결되어있다.

• 프로토타입은 생성자 함수가 생성되는 시점에 '더불어' 생성된다. 왜냐면 프로토타입과 생성자 함수는 단독으로 존재할 수 없고 항상 '쌍으로 존재'하기 때문이다.

• 생성자 함수는 1>사용자가 직접 정의한 사용자 정의 생성자 함수와
  2>자바스크립트가 기본 제공하는 빌트인 생성자 함수로 구분할 수 있다.

• 1>사용자 정의 생성자 함수와 2>빌트인 생성자 함수를 구분해 프로토타입 생성시점에 대해 이해해보자.

▶ 1>사용자 정의 생성자 함수와 프로토타입 생성 시점

• 내부 메서드 [[Construct]]를 갖는 함수 객체, 즉 화살표 함수나 ES6 메서드의 축약 표현으로 정의하지 않고
  1>일반 함수(선언문, 표현식)으로 정의한 함수 객체는new 연산자와 함께 생성자 함수로서 호출할 수 있다.
• 생성자 함수로서 호출 할 수 있는 함수, 즉 constructor는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.

<script>
// 함수 정의(constructor)가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.
console.log(Person.prototype); // {constructor:f}
// 생성자 함수
function Person(name) {
  this.name = name;
};
</script>

• 반면 생성자 함수로서 호출 할 수 없는 함수, non-constructor는 프로터타입이 생성되지 않는다.

<script>
// 화살표 함수는 non-constructor이다.
const Person = (name) => {
  this.name = name;
};
//  non-constructor는 프로토타입이 생성되지 않음
console.log(Person.prototype); //undefined
</script>

• 함수 선언문(일반 함수)으로 정의된 Person 생성자 함수는 런타임 이전에 어떤 코드보다 먼저 평가되어 함수 객체가 되고 이때 프로토타입도 더불어 생성된다.
• 생성된 프로토타입은 Person 생성자 함수의 prototype 프로퍼티에 바인딩된다.

-Person 생성자 함수와 더불어 생성된 프로토타입 내부.

• 생성된 프로토타입은 오직 constructor 프로퍼티만을 갖는 객체인데 프로토타입도 객체이고 모든 객체는 프로토타입을 가진다.
• 결국 프로토타입도 자신의 프로토타입을 갖는데 생성된 프로토타입의 프로토타입은 Object.prototype이다.

<결론>

=> 이처럼 빌트인 생성자 함수가 아닌 사용자 정의 생성자 함수는 자신이 평가되어 함수 객체로 생성되는 시점에 프로토타입도 함께 생성되며 생성된 프로토타입의 프로토타입은 언제나 Object.prototype이다.

▶ 2>빌트인 생성자 함수와 프로토타입 생성 시점

• 2>Object, String, Numeber, Function, Array, RegExp, Date, Promise 등과 같은 빌트인 생성자 함수도 일반 함수와 마찬가지로 빌트인 생성자 함수가 생성되는 시점에 프로토타입이 생성된다.
• 모든 빌트인 생성자 함수는 🎈전역 객체가 생성되는 시점에 생성된다. 생성된 프로토타입은 빌트인 생성자 함수의 prototype 프로퍼티에 바인딩된다.
  

🎈전역객체

• 🎈전역 객체는 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 생성되는 특수한 객체로
  • 클라이언트 사이드 환경(브라우저)에선 window객체로
  • 서버 사이드 환경(Node.js)에선 global객체를 의미한다.
• 전역 객체 다음의 객체들을 프로퍼티로 갖는다. 1> 표준 빌트인 객체(Object, String, Numeber, Function, Array...등)
  2> 환경에 따른 호스트 객체(클라이언트 Web API 또는 Node.js의 호스트 API),
  3> var 키워드로 선언한 전역 변수와 전역 함수
  => 따라서 Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 생성자 함수다.

<script>
window.Object===Object//true 
</script>

=> 표준 빌트인 객체인 Object도 전역 객체의 프로퍼터이며 전역 객체가 생성되는 시점에 생성된다.

• 이처럼 객체가 생성되기 이전(런타임 전)에 생성자 함수와 프로토타입은 이미 객체화되어 존재한다.
  이후 생성자 함수 또는 리터럴 표기법으로 객체를 생성하면 프로토타입은 생성된 객체의 [[Prototype]] 내부 슬롯에 할당되어 생성된 객체는 프로토타입을 상속받는다.

6. 객체 생성 방식과 프로토타입의 결정

• 객체는 다음과 같이 다양한 생성 방법을 갖는다.

• 1>객체리터럴
• 2>Object 생성자 함수
• 3>생성자 함수
• Object.create 메서드
• 클래스

• 이처럼 다양한 방식으로 생성된 모든 객체는 각 방식 마다 세부적인 객체 생성 방식의 차이가 있으나
  추상 연산 OrdinaryObjectCreate에 의해 생성된다는 공통점이 있다.
• 1> 추상 연산 OrdinaryObjectCreate는 필수적으로 자신이 생성할 객체의 프로토타입을 인수로 전달 받는다. 그리고 자신이 생성할 객체에 추가할 프로퍼티 목록을 옵션으로 전달 할 수 있다.
  2> 추상 연산 OrdinaryObjectCreate는 빈 객체를 생성한 후 객체에 추가할 프로퍼티 목록이 인수로 전달된 경우 프로퍼티를 객체에 추가한다.
  3> 그리고 인수로 전달받은 프로토타입을 자신이 생성한 객체의 [[Prototype]] 내부 슬롯에 할당한 다음 생성한 객체를 반환한다
  즉 프로토타입은 추상 연산 OrdinaryObjectCreate에 전달되는 인수에 의해 결정된다. 이 인수는 객체가 생성되는 시점에 객체 생성 방식에 의해 결정된다.

▶ 6_1. 객체 리터럴에 의해 생성된 객체의 프로토타입

• 자바스크립트 엔진은 1>객체 리터럴을 평가하여 객체를 생성할 때 마다 추상 연산 OrdinaryObjectCreate를 호출한다. 이때 추상 연산 OrdinaryObjectCreate에 전달되는 프로토타입은 Object.prototype로 객체 리터럴에 의해 생성되는 객체의 프로토타입이 Object.prototype라는 뜻이다.

<script>
const obj = {x:1};
</script>

• 위 객체 리터럴이 평가되면 추상 연산 OrdinaryObjectCreate에 의해 다음과 같이 Object 생성자 함수와 Object.prototype과 생성된 객체 사이에 연결이 만들어진다.

• 이처럼 객체 리터럴에 의해 생성된 obj 객체는 Object.prototype을 프로토타입으로 가지며 이로써 Object.prototype을 상속 받는다.

<script>
const obj = {x:1};
// 객체 리터럴에 의해 생성된 obj 객체는 Object.prototype을 상속받는다.
console.log(obj.constructor === Object) // true
console.log(obj.hasOwnProperty('x')) // true
</script>

• obj 객체는 constructor 프로퍼티와 hasOwnProperty 메서드 등을 소유하진 않지만 자신의 Object.prototype의 constructor 프로퍼티와 hasOwnProperty 메서드를 자신의 자산인 것처럼 자유롭게 사용할 수 있는데 이는 obj 객체가 자신의 Object.prototype 객체를 상속받았기 때문이다.

▶ 6_2. 생성자 함수에 의해 생성된 객체의 프로토타입

• 2>Object 생성자 함수를 인수 없이 호출하면 빈 객체가 생성된다.
  Object 생성자 함수시 객체 리터럴과 마찬가지로 추상 연산 OrdinaryObjectCreate가 호출된다. 이때 추상 연산 OrdinaryObjectCreate에 전달되는 프로토타입은 Object.prototype으로 Object 생성자 함수에 의해 생성되는 객체의 프로토타입 Object.prototype이다.

<script>
const obj = new Object();
obj.x =1;
// Object 생성자 함수에 의해 생성된 obj 객체는 Object.prototype을 상속받는다.
console.log(obj.constructor === Object) // true
console.log(obj.hasOwnProperty('x')) // true  
</script>

• 이처럼 Object 생성자 함수에 의해 생성된 obj 객체는 Object.prototype을 프로토타입으로 갖게 되며, 이로써 Object.prototype을 상속받는다.

-1>객체 리터럴과 2>Object 생성자 함수의 객체 생성 방식 차이

• 1>객체 리터럴과 2>Object 생성자 함수에 의한 객체 생성 방식의 차이는 프로퍼티를 추가하는 방식에 있다.
  1>객체 리터럴 방식은 객체 리터럴 내부에 프로퍼티를 추가하지만 2>Object 생성자 함수 방식은 일단 빈 객체를 생성한 이후 프로퍼티를 추가해야 한다.

▶ 6_3. 생성자 함수에 의해 생성된 객체의 프로토타입

• new 연산자와 함께 3> 생성자 함수를 호출하여 인스턴스를 생성하면 다른 객체 생성 방식과 마찬가지로 추상 연산 OrdinaryObjectCreate가 호출된다. 이때 추상 연산 OrdinaryObjectCreate에 전달되는 프로토타입은 생성자 함수의 prototype 프로퍼티에 바인딩되어 있는 객체이다.
• 즉 생성자 함수에 의해 생성되는 객체의 프로토타입은 생성자 함수의 prototype 프로퍼티에 바인딩 되어있는 객체다.

<script>
function Person(name) {
  this.name = name;
};
const me = new Person('kim')  
</script>

• 위 코드가 실행되면 추상 연산 OrdinaryObjectCreate에 의해 아래처럼 생성자 함수와 생성자 함수의 prototype 프로퍼티에 바인딩되어있는 객체와 new 연산자와 함께 생성된 객체(인스턴스) 사이에 연결이 만들어진다.
  

• 표준 빌트인 객체인 2>Object 생성자 함수와 더불어 생성된 프로토타입은 Object.prototpye은 다양한 빌트인 메서드를 갖고 있다 하지만 3>사용자 정의 생성자 함수 Person과 더불어 생성된 프로토타입 Person.prototpye의 프로퍼티는 constructor뿐이다.

-프로토타입의 프로터티 추가/삭제?

• 프로토타입 Person.prototpye에 프로퍼티를 추가하여 하위(자식) 객체가 상속받게하려면 어떻게 해야할까?
• 프로토타입은 객체이므로 일반 객체와 같이 프로토타입을 추가/삭제 할 수 있고 이렇게 추가/삭제된 프로퍼티는 🔗프로토타입 체인에 즉각 반영된다.

<script>
function Person(name) {
  this.name = name;
};
// 프로토타입 메서드
Person.prototype.sayHello = function() {
  console.log(`hi! my name is ${this.name}`)
};
const me = new Person('kim')
const you = new Person('minjae')
me.sayHello(); // "hi! my name is kim"
you.sayHello(); // "hi! my name is minjae"
</script>

• 생성자 함수를 통해 new 연산자와 함께 생성된 모든 객체는프로토타입에 추가된 sayHello 메서드를 상속받아 자신의 메서드처럼 사용할 수 있다.

7. 🔗프로토타입 체인

• Person 생성자 함수에 의해 생성된 me 객체는 Object.prototype의 메서드인 hasOwnProperty를 호출할 수있는데 이는 me 객체가 Person.prototype뿐만 아니라 Object.prototype도 상속받았음을 의미한다.

<script>
function Person(name) {
  this.name = name;
};
// 프로토타입 메서드
Person.prototype.sayHello = function() {
  console.log(`hi! my name is ${this.name}`)
};
const me = new Person('kim')
console.log(me.hasOwnProperty('name')) // true 
</script>

• me 객체의 프로토타입은 Person.prototype이며 Person.prototype에 프로토 타입은 Object.prototpy으로 프로토타입의 프로토타입은 언제나 Object.prototype이다.

<script>
Object.getPrototypeOf(me) === Person.prototype; // true
Object.getPrototypeOf(Person.prototype) === Object.prototype; // true
</script>

• 자바스크립트는 객체의 프로퍼티(메서드 포함)에 접근하려할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯이 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적을 검색하는데 이를 🔗프로토타입 체인이라고한다.
• 🔗프로토타입 체인은 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 메커니즘이다.

<script>
// hasOwnProperty는 Object.prototype 메서드
// me 객체는 `🔗프로토타입 체인`을 따라 hasOwnProperty 메서드를 검색해 사용
/** 
1. hasOwnProperty메서드를 호출한 me 객체에서 hasOwnProperty 메서드를 검색하고
없으면 프로토타입 체인을 따라, [[Prototype]] 내부 슬롯에 바인딩되어있는 
프로토타입(Person.prototype)으로 이동해 hasOwnProperty 메서드 검색한다.
2. Person.prototype에도  hasOwnProperty 메서드가 없으면 
프로토타입 체인을 따라 [[Prototype]] 내부 슬롯에 바인딩되어있는
프로토타입(Object.prototype)으로 이동하여 hasOwnProperty 메서드를 검색한다.
3. Object.prototype에는 hasOwnProperty메서드가 존재하므로
자바스크립트 엔진은 Object.prototype.hasOwnProperty메서드를 호출한다. 
이때 Object.prototype.hasOwnProperty메서드의 this는 me 객체가 된다.
**/
me.hasOwnProperty('name') // true  
Object.prototype.hasOwnProperty.call(me,'name') // 
</script>

🔔call

🔔call 메서드는 this로 사용할 객체를 전달하면서 함수를 호출한다. 위 코드에서 this로 사용할 me 객체를 전달하면서 Object.prototype.hasOwnProperty 메서드를 호출하였다.

• 프로토타입 체인의 최상위에 위치한 객체는 언제나 Object.prototype이기에 모든 객체는 Object.prototype을 상속 받는다.
• Object.prototype을 🔗프로토타입 체인의 종점이라한다.

<script>
console.log(me.foo) ;// Object.prototype에서도 프로퍼티를 검색 X undefined를 반환
</script>

• Object.prototype의 프로토타입 즉 내부슬롯의 [[Prototype]] 값은 null이며 🔗프로토타입 체인의 종점인 Object.prototype에서도 프로퍼티를 검색할 수 없는 경우 undefined를 반환한다.

<script>
me.hasOwnProperty('name') // true  
</script>

• 우선적으로 1. ⛓스코프 체인에서 me 식별자를 검색하는데 me 식별자는 전역에서 선언되어 전역 스코프에서 검색한다.
  2. 이후 me 객체의 🔗프로토타입 체인에서 hasOwnProperty 메서드를 검색한다.
  => ⛓스코프 체인과 🔗프로토타입 체인은 서로 연관없이 별도로 동작하는 것이 아닌 서로 협력하여 식별자와 프로퍼티를 검색하는데 사용된다.

• ⛓스코프 체인 VS 🔗프로토타입 체인

• 자바스크립트 엔진은 🔗프로토타입 체인을 따라 프로퍼티/메서드를 검색한다. 즉 객체간의 상속관계로 이루어진 프로토타입의 계층적인 구조에서 객체의 프로퍼티를 검색하여 🔗프로토타입 체인은 상속과 프로퍼티 검색을 위한 메커니즘이라 말한다.
• 반면 프로퍼티가 아닌 식별자는 ⛓스코프 체인에서 검색한다.
  자바스크립트 엔진은 함수의 중첩관계로 이루어진 스코프의 계층적 구조에서 식별자를 검색한다. 따라서 ⛓스코프 체인은 식별자 검색을 위한 메커니즘이라 할수 있다.

*💡conclusion

• 4. 객체 리터럴, Object 생성자 함수에 의해 생성된 객체의 미묘한 차이
• 5. 프로토타입의 생성 시점은 생성자 함수가 생성되는 시점에 생성된다. 이유는 프로토타입과 생성자 함수는 언제나 쌍으로 존재하기 때문!
  • 생성자 함수는 사용자 정의 생성자 함수와 빌트인 생성자 함수로 구분 되는데 두 생성자 함수의 프로토타입의 생성 시점에 차이에 대해서
    -사용자 정의 생성자 함수는 자신이 평가되어 함수 객체로 생성되는 시점에 프로토타입도 함께 생성
    -빌트인 생성자 함수는 전역 객체(코드가 실행되기 이전 단계에 생성되는 특수한 객체)가 생성되는 시점에 생성되며 프로토타입도 함께 생성된다.
• 6. 객체 생성 방식(1>객체 리터럴, 2>Object 생성자 함수, 3>생성자 함수)에 따른 세부적인 객체 생성 방식 차이와 공통점 그리고 프로토타입의 결정
  • 1>객체 리터럴 - 객체 리터럴이 평가되면 추상 연산에 의해 Object 생성자 함수와 Object.prototype과 생성된 객체 사이에 연결이 만들어진다.
  • 2>Object 생성자 함수 - 인수 없이 호출하면 빈 객체가 생성되고 추상 연산가 호출되어 프로토타입을 전달하여 Object 생성자 함수에 의해 생성된 객체는 프로토타입으로 Object.prototype을 가지며 이를 상속받는다.
    -1> 객체 리터럴과 2>Object 생성자 함수의 차이는 프로퍼티를 추가하는 방식으로 1>객체 리터럴은 객체 리터럴 내부에 프로퍼티를 추가하지만 2>Object 생성자 함수는 일단 빈 객체를 생성한 이후 프로퍼티를 추가한다.
  • 3>생성자 함수 - 추상 연산에 의해 생성자 함수와 생성자 함수의 prototype 프로퍼티에 바인딩되어있는 객체와 new 연산자와 함께 생성된 객체(인스턴스) 사이에 연결이 만들어진다.
    -1> 객체 리터럴& 2>Object 생성자 함수과 3>생성자 함수의 차이는
    1> 객체 리터럴& 2>Object 생성자 함수는 다양한 빌트인 메서드를 갖지만
    3>사용자 정의 생성자 함수와 함께 생성된 프로토타입의 프로퍼티는 constructor뿐이다. 하지만 사용자 정의 생성자 함수는 프로토타입에 프로퍼티를 추가/삭제하여 자식 객체가 상속 받을 수 있다.
• 7. 🔗프로토타입 체인은 객체의 프로퍼티(메서드 포함)에 접근시 자신의 프로토타입의 프로퍼티를 순차적을 검색하는 상속과 프로터리르 위한 메커니즘이고 반면 ⛓스코프 체인는 함수의 중첩 즉 스코프의 계층적 구조에서 식별자를 검색을 위한 메커니즘으로 이 둘은 협력하여 함께 식별자와 프로퍼티를 검색한다.

#📑Study Source

1. 책 - 모던 자바스크립트 Deep Dive (272p-287p)