也谈轻松理解JS 原型和原型链

开局肯定要用这张经典的 JavaScript 原型链图， 结合这张图先理解几个概念:

1. 构造函数， 简单说构造函数就是用来创建对象和函数的，顶级的构造函数是 Js 出场时自带的 Object() 和 Function() $\color{red}{\small{记住: 所有的构造函数都由 Function()这个顶级构造函数创建， }}$ $\color{red}{\small{包括 Function它自己和 Object， Array， Number等系统自带的，}}$ $\color{red}{\small{还有诸如 Foo，User这种由coder编写的构造函数}}$

2. 原型对象，简单说就是每个构造函数都有一个专属的原型对象， 用于存放这个构造函数的共有属性和方法， Js引擎调用Function()创建构造函数时会同时调用 Object()为这个构造函数创建一个原型对象 $\color{red}{\small{记住: 所有的原型对象都由 Object() 这个顶级构造函数创建}}$

3. prototype， 构造函数用prototype属性指向自己的原型对象 $\color{red}{\small{所以说: 只有构造函数才有 prototype 属性， 因为只有构造函数才有原型对象}}$

4. constructor， 原型对象用constructor来指向自己所依附的构造函数 $\color{red}{\small{所以说: 只有原型对象有constructor属性， 因为原型}}$ $\color{red}{\small{对象是专为构造函数服务的， 没有构造函数， 原型对象就没有存在的意义了}}$

5. __proto__， 也写作[[prototype]]，这个属性用来指向创建对象自己的那个构造函数的原型对象， 指向的是构造函数的原型对象， 而不是构造函数本身 $\color{red}{\small{所以说:不管是什么实例对象,原型对象,构造函数,它们都是被Js引擎创建出来的}}$ $\color{red}{\small{包括顶级构造函数 Function和 Object， 它们都有\_\_proto\_\_属性}}$

(至于__proto__属性的意义， 其他很多文章都有说，这里不再赘述)

关键点:

• Function， 所有的构造函数都由Function创建， 包括 Function 它自己
• Object， 所有的原型对象都由Object创建
• 每一个构造函数都有一个专属的原型对象,它们使用prototype和constructor 互指对方
• 构造函数和原型对象是一一对应的
• Object.prototype.__proto__ === null

理解了上面 5 点， 可以想象一下当 Js 引擎执行 function Foo() {...} 的过程可能如下:

1. 调用 Function() 创建构造函数 Foo
2. 调用 Object() 创建一个名为 Foo_prototype 的空对象， 用作 Foo 的原型对象
3. 执行: Foo.prototype = Foo_prototype
4. 执行: Foo_prototype.constructor = Foo
5. 执行: Foo.__proto__ = Function_prototype //也就是Function.prototype

下面检验一下, 代码参考自"妖精的尾巴"大佬的文章: juejin.cn/post/684490…

function Foo() {}   //自定义构造函数 Foo, 这个构造函数本身就是由 Function() 这个顶级构造函数执行创建
let f1 = new Foo(); //f1为实例对象, 由 Foo()这个二级构造函数创建
f1.prototype === ?; //f1为实例对象,不是构造函数, 它没有原型对象 所以它也没有 prototype 属性
f1.__proto__ === ? 

那么这个 f1的__proto__指向谁, 看上面概念点 5, __proto__属性指向的是创建这个对象的构造函数 的 原型对象, 那么 f1 这个实例对象是由 Foo()构造函数创建的, 所以f1.__proto__指向的是 Foo()的原型对象, 写作 Foo.prototype,所以:

f1.__proto__ === Foo.prototype;

接下来

Foo.prototype.__proto__ === ?

Foo 表示 Foo 这个构造函数, Foo.prototype 表示 Foo这个构造函数的原型对象, Foo.prototype.__proto__指向创建这个原型对象的那个构造函数所对应的原型对象, 感觉有点绕, 但是原型对象也是创建出来的啊, 概念 2 说了, 所有的原型对象都是由 Object()这个构造函数创建的, 而 Object 的原型对象写作 Object.prototype, 所以:

Foo.prototype.__proto__ === Object.prototype;

再来

Foo.__proto__ === ?
Function.__proto__ === ?

Foo,Function 是什么, 都是构造函数, 而且 Foo 这个构造函数就是由 Function创建得来的, 概念 1 说了所有的构造函数都由 Function 创建,包括它自己, 再次重复一下,__proto__属性指向的是创建这个对象的那个构造函数的原型对象, Function的原型对象是 Function.prototype, 所以:

Foo.__proto__ === Function.prototype;
Function.__proto__ === Function.prototype;

再来

Function.prototype.__proto__ === ?

Function.prototype 是什么, 是Function 这个构造函数的原型对象, 原型对象由什么创建, 是由 Object()这个构造函数创建, Object的原型对象写作什么, 写作 Object.prototype, 所以:

Function.prototype.__proto__ === Object.prototype;

下面看看 Object这边

let a1 = Object();
a1.__proto__ === ?

a1这个实例对象由 Object 创建, Object的原型对象写作 Object.prototype, 所以:

a1.__proto__ === Object.prototype;

至于 Object.prototype.__proto__ === null, 就不赘述了, 原型对象往上找到Object.prototype这里就到顶了, 没法再往上找了.

下面做点习题(出处:juejin.cn/post/701835… )

function User() {} 
User.prototype.sayHello = function() {} 
var u1 = new User(); 
var u2 = new User(); 
console.log(u1.sayHello === u2.sayHello); 
console.log(User.prototype.constructor); 
console.log(User.prototype === Function.prototype); 
console.log(User.__proto__ === Function.prototype); 
console.log(User.__proto__ === Function.__proto__); 
console.log(u1.__proto__ === u2.__proto__); 
console.log(u1.__proto__ === User.__proto__); 
console.log(Function.__proto__ === Object.__proto__); 
console.log(Function.prototype.__proto__ === Object.prototype.__proto__); 
console.log(Function.prototype.__proto__ === Object.prototype);

分析如下:
1 u1.sayHello === u2.sayHello
   u1 和 u2 这两个实例对象都是由 User 这个构造函数创建, u1.sayHello 和 u2.sayHello 会通
   过各自的__proto__属性在原型链中向上到 User.prototype这个原型对象中找到, 
   所以 u1.sayHello === u2.sayHello 结果为 true
  
2 User.prototype.constructor
  构造函数用 prototype 属性指向原型对象, 原型对象用constructor 指向 构造函数
  所以 User.prototype.constructor === User

3 User.prototype === Function.prototype
  每个构造函数都有自己的专属原型对象, 所以 User的原型对象是 User_prototype(用User.prototype 表示), Function也是一个构造函数, 它的原型对象是 Function_prototype(用 Function.prototype 表示)
  所以 User.prototype === Function.prototype 结果为 false
  
4 User.__proto__ === Function.prototype
  User是一个构造函数, 那么User.__proto__ 指向的是创建 User 这个函数的那个构造函数的原型对象, User 是由 Function这个顶级构造函数创建, 就是说 User.__proto__ 指向 Function 的原型对象 Function_prototype
  所以 User.__proto__ === Function.prototype  结果为 true
  
5 User.__proto__ === Function.__proto__
  Function是个顶级构造函数, 所有构造函数都由 Function 创建,包括它自己, 所以 Function.__proto__指向 Function 的原型对象 Function_prototype
  所以 User.__proto__ === Function.__proto__ 结果为 true
  
6 u1.__proto__ === u2.__proto__
  u1 和 u2 都是由 User 这个二级构造函数创建, 它们的__proto__都指向 User 的原型对象 User_prototype
  所以 u1.__proto__ === u2.__proto__ 结果为 true
  
7 u1.__proto__ === User.__proto__
  u1由 User 创建, 所以 u1.__proto__指向 User_prototype
  User 由 Function 创建, 所以 User.__proto__指向 Function_prototype
  所以 u1.__proto__ === User.__proto__ 结果为 false
  
8 Function.__proto__ === Object.__proto__
  所有的构造函数都由 Function 创建, 包括顶级的 Function 和 Object 这两个构造函数
  那么Function.__proto__ 指向Function的原型对象 Function_prototype
  Object.__proto__ 指向Function的原型对象 Function_prototype
  所以 Function.__proto__ === Object.__proto__ 结果为 true
  
9 Function.prototype.__proto__ === Object.prototype.__proto__
  Function.prototype 是 Function 的原型对象, 所有原型对象都是由 Object 这个顶级构造函数创建,
  Function.prototype.__proto__ 指向的就是创建原型对象的顶级构造函数 Object 的原型对象Object.prototype
  而Object.prototype已经是最顶级原型对象了, 没有更高的原型对象了, 所以它的__proto__属性为 null 
  
  所以 Function.prototype.__proto__ === Object.prototype.__proto__ 可以理解为
  Object.prototype === Object.prototype.__proto__
  显而易见结果为 false

10 Function.prototype.__proto__ === Object.prototype
   根据第 9 题的分析
   所以 Function.prototype.__proto__ === Object.prototype 结果为 true