JavaScript_기본 지식으로 프로토타입 프로토타입 완벽 분석

JS의 프로토타입을 이해하려면 먼저 다음 개념을 이해해야 합니다
1. JS의 모든 것은 객체입니다

2. JS의 모든 것은 Object에서 파생됩니다. 즉, 모든 프로토타입 체인의 끝점이 Object.prototype을 가리킵니다

  // ["constructor", "toString", "toLocaleString", "valueOf", "hasOwnProperty", "isPrototypeOf", 
   // "propertyIsEnumerable", "__defineGetter__", "__lookupGetter__", "__defineSetter__",
   // "__lookupSetter__"]
   console.log(Object.getOwnPropertyNames(Object.prototype));

3. JS의 생성자와 인스턴스(객체)의 미묘한 관계
생성자는 인스턴스의 사양에 동의하도록 프로토타입을 정의한 다음 new를 사용하여 인스턴스를 생성합니다.
생성자(메서드) 자체는 메소드(Function)의 인스턴스이므로 해당 __proto__(프로토타입 체인)도 찾을 수 있습니다.

객체/함수 F() {} 이것은 생성자이며, 하나는 JS 네이티브 API에서 제공되고 다른 하나는 사용자 정의됩니다.
new Object() / new F() 이것은 인스턴스입니다
인스턴스는 __proto__를 확인하여 자신이 기반으로 하는 프로토타입이 무엇인지 "만" 확인할 수 있습니다.
그리고 인스턴스의 인스턴스를 생성하기 위해 인스턴스의 프로토타입을 재정의할 수는 없습니다.

연습은 진정한 지식을 가져오며, 스스로 관찰하고 생각해야만 진정으로 이해할 수 있습니다.

  // 先来看看构造函数到底是什么
  // function Empty() {}  function Empty() {}
  console.log(Function.prototype, Function.__proto__);
  // Object {}          function Empty() {}
  console.log(Object.prototype, Object.__proto__);
  function F() {}
  // F {}              function Empty() {}
  console.log(F.prototype, F.__proto__);

기절하셨을 수도 있으니 한번 풀어보세요.

시제품
프로토타입 출력 형식은 다음과 같습니다: 생성자 이름 프로토타입
먼저 Object.prototype이 무엇을 출력하는지 살펴볼까요?
Object {} -> 앞의 Object는 생성자의 이름이고, 후자는 프로토타입을 나타냅니다. 이는 Object 객체(빈 객체)의 인스턴스입니다.
그러면 F{}가 무엇을 의미하는지 이해하게 됩니다. F는 생성자의 이름이고 프로토타입도 빈 객체입니다

  // 再来看看由构造函数构造出来的实例
  var o = new Object(); // var o = {};
  // undefined       Object {}
  console.log(o.prototype, o.__proto__);
  function F() {}
  var i = new F();
  // undefined       F {}
  console.log(i.prototype, i.__proto__);

조금 더 깊이 들어가 F의 프로토타입을 정의하여 어떤 일이 일어나는지 살펴볼까요?

  function F() {}
  F.prototype.a = function() {};
  var i = new F();
  // undefined       F {a: function}
  console.log(i.prototype, i.__proto__);

이렇게 하면 i가 F에서 구성되고 프로토타입이 {a: function}이라는 것을 확실히 알 수 있습니다. 이는 원래의 빈 개체 프로토타입에 새로운 a 메서드가 있음을 의미합니다.

상황을 바꿔서 F의 프로토타입을 완전히 덮으면 어떻게 될까요?
 

function F() {}
  F.prototype = {
    a: function() {}
  };
  var i = new F();
  // undefined       Object {a: function}
  console.log(i.prototype, i.__proto__);
  

야~ 왜 내가 Object로 구성되었다고 표시되지?
F의 프로토타입을 완전히 덮어쓰기 때문에 실제로는 프로토타입을 객체 {a: function}으로 지정하지만 이로 인해 원래 생성자 정보가 손실되고 객체 {a: function}에서 지정한 생성자가 됩니다.
그럼 객체 {a: function}의 생성자는 무엇인가요?
{a: function} 객체는 실제로
에 상대적이기 때문입니다.

  var o = {a: function() {}} // new了一个Object

그러면 당연히 o의 생성자는 Object입니다

이 실수를 바로잡자

  function F() {}
  F.prototype = {
    a: function() {}
  }
  // 重新指定正确的构造函数
  F.prototype.constructor = F;
  var i = new F();
  // undefined       F {a: function, constructor: function}
  console.log(i.prototype, i.__proto__);

이제 정확한 프로토타입 정보를 다시 얻으실 수 있습니다~

프로토타입 체인

그럼 프로토타입 체인이 무엇인지 살펴볼까요?
간단히 말하면 OOP의 상속 관계(체인)와 동일합니다. 최종 Object.prototype에 도달할 때까지 한 층씩 올라갑니다

가장 중요한 것은 JS에서 어떤 것이 (인스턴스) 객체인지 파악하는 것입니다. JS에서는 모든 것이 객체입니다. 또 한 가지 이해해야 할 점은 모든 객체에는 프로토타입이 있다는 것입니다!

그럼 증명해 보겠습니다.

  Object // 这是一个函数, 函数是 Function 的实例对象, 那么就是由 Function 构造出来的
  Object.__proto__ == Function.prototype // 那么Object的原型, true
  // 这个是一个普通对象了, 因此属于 Object 的实例
  Function.prototype.__proto__ == Object.prototype // true
  // 这已经是原型链的最顶层了, 因此最终的指向 null
  Object.prototype.__proto__ == null // true

  Function // 这也是一个函数, 没错吧!
  Function.__proto__ == Function.prototype // true
  
  function A() {} // 这是一个自定义的函数, 终归还是一个函数, 没错吧! 
  A.__proto__ == Function.prototype // 任何函数都是 Function 的实例, 因此A的原型是?
  var a = new A()
  a.__proto__ == A.prototype // 实例a是由A构造函数构造出来的, 因此a的原型是由A的prototype属性定义的
  A.prototype.__proto__ == Object.prototype // 普通对象都是 Object 的示例

프로토타입과 __proto__
각 개체에는 이 개체의 "프로토타입"을 가리키는 __proto__가 포함되어 있습니다. 비슷한 점은 모든 함수에 프로토타입이 포함되어 있다는 것입니다. 이 프로토타입 객체는 무엇을 합니까?

생성자를 사용하여 객체를 생성하는 다음 코드를 살펴보겠습니다(위는 리터럴 형태로 객체를 생성하는 것입니다).

function Foo(){};
var foo = new Foo();
console.log(foo.__proto__);

생각해 보세요. 이 foo 객체의 __proto__는 무엇을 가리킵니까?

생성자 속성을 포함하는 객체인가요? 잘 이해하지 못해도 상관없습니다. Foo 함수의 프로토타입 속성을 출력해서 비교해 보세요.

function Foo(){};
var foo = new Foo();
console.log(foo.__proto__);
console.log(Foo.prototype);
console.log(foo.__proto__ === Foo.prototype);

새 개체 foo의 __proto__는 Foo 함수의 프로토타입만 가리키는 것으로 나타났습니다.

foo.__proto__ --> Foo.prototype

JS这么设计有何意义了？回忆下上面说的，在JS的世界中，对象不是根据类（模具）创建出来的，而是从原型（另一个对象）衍生出来的。

当我们执行new操作创建一个新的对象时，先不深入new操作的具体实现，但有一点我们是肯定的——就是为新对象的__proto__指向一个原型对象。

就刚才这段代码

function Foo(){};
var foo = new Foo();

foo.__proto__到底要指向谁了？你怎么不能指向Foo这个函数本身吧，虽然函数也是对象，这个有机会会详细讲。但如何foo.__proto__指向Foo固然不合适，因为Foo是一个函数，有很多逻辑代码，foo作为一个对象，继承逻辑处理没有任何意义，它要继承的是“原型对象”的属性。

所以，每个函数会自动生成一个prototype对象，由这个函数new出来的对象的__proto__就指向这个函数的prototype。

foo.__proto__ --> Foo.prototype

总结
说了这么多，感觉还是没完全说清楚，不如上一张图。我曾经参考过其他网友的图，但总觉得哪里没说清楚，所以我自己画了一张图，如果觉得我的不错，请点个赞！（老子可是费了牛劲才画出来）。

咱们就着这张图，记住如下几个事实：

1. 每个对象中都有一个_proto_属性。

JS世界中没有类（模具）的概念，对象是从另一个对象（原型）衍生出来的，所以每个对象中会有一个_proto_属性指向它的原型对象。（参考左上角的那个用字面量形式定义的对象obj，它在内存中开辟了一个空间存放对象自身的属性，同时生成一个_proto_指向它的原型——顶层原型对象。）

2. 每个函数都有一个prototype属性。

“构造函数”为何叫构造函数，因为它要构造对象。那么根据上面第一条事实，构造出来的新对象的_proto_属性指向谁了？总不能指向构造函数自身，虽然它也是个对象，但你不希望新对象继承函数的属性与方法吧。所以，在每个构造函数都会有一个prototype属性，指向一个对象作为这个构造函数构造出来的新对象的原型。

3. 函数也是对象。

每个函数都有一些通用的属性和方法，比如apply()/call()等。但这些通用的方法是如何继承的呢？函数又是怎么创建出来的呢？试想想，一切皆对象，包括函数也是对象，而且是通过构造函数构造出来的对象。那么根据上面第二条事实，每个函数也会有_proto_指向它的构造函数的prototype。而这个构造函数的函数就是Function，JS中的所有函数都是由Function构造出来的。函数的通用属性与方法就存放在Function.prototype这个原型对象上。