下面内容一定要结合上面这张图阅读
开局肯定要用这张经典的 JavaScript 原型链图， 结合这张图先理解几个概念:
-
构造函数， 简单说构造函数就是用来创建对象和函数的，顶级的构造函数是 Js 出场时自带的 Object() 和 Function()
-
原型对象，简单说就是每个构造函数都有一个专属的原型对象， 用于存放这个构造函数的共有属性和方法， Js引擎调用Function()创建构造函数时会同时调用 Object()为这个构造函数创建一个原型对象
-
prototype， 构造函数用prototype属性指向自己的原型对象
-
constructor， 原型对象用constructor来指向自己所依附的构造函数
-
__proto__， 也写作[[prototype]]，这个属性用来指向创建对象自己的那个构造函数的原型对象， 指向的是构造函数的原型对象， 而不是构造函数本身
(至于__proto__属性的意义， 其他很多文章都有说，这里不再赘述)
关键点:
- Function， 所有的构造函数都由Function创建， 包括 Function 它自己
- Object， 所有的原型对象都由Object创建
- 每一个构造函数都有一个专属的原型对象,它们使用prototype和constructor 互指对方
理解了上面 5 点， 可以想象一下当 Js 引擎执行 function Foo() {...} 的过程可能如下:
- 调用 Function() 创建构造函数 Foo
- 调用 Object() 创建一个名为 Foo_prototype 的空对象， 做为 Foo 的原型对象
- 执行: Foo.prototype = Foo_prototype
- 执行: Foo_prototype.constructor = Foo
- 执行: Foo.__proto__ = Function_prototype //也就是Function.prototype
下面检验一下， 代码参考自"妖精的尾巴"大佬的文章: https://juejin.cn/post/6844903989088092174
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;
1722414050160.png
至于 Object.prototype.__proto__ === null， 就不赘述了， 原型对象往上找到Object.prototype这里就到顶了， 没法再往上找了.
网友评论