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 を使用してインスタンスを構築します。
コンストラクター (メソッド) 自体はメソッド (関数) のインスタンスであるため、その __proto__ (プロトタイプ チェーン) も見つけることができます

オブジェクト / 関数 F() {} これはコンストラクターであり、1 つは JS ネイティブ API によって提供され、もう 1 つはカスタマイズされます
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 はプロトタイプを表します。これは 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__);
  

ねえ、なぜ i が 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 内のどれが (インスタンス) オブジェクトであるかを理解することです。これは簡単です。
もう 1 つ理解すべきことは、すべてのオブジェクトにはプロトタイプがあるということです!

それでは、それを証明しましょう:

  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这个原型对象上。